Programmatic Rendering

Use `timelineFromData()` to render timelines from arrays or API responses.

View the page source and read the Javascript code to see how it was done.

Javascript code:


// Render timeline from JS data
var items = [
  { 
    id: 1, 
    date: '01/01/24', 
    heading: 'Init', 
    summary: 'Project start' 
  },
  { 
    id: 2, 
    date: '02/01/24', 
    heading: 'Build', 
    summary: 'Development work' 
  },
  { 
    id: 3, 
    date: '05/01/24', 
    heading: 'Ship', 
    summary: 'Release' 
  },
  { 
    id: 4, 
    date: '06/01/24', 
    heading: 'Support', 
    summary: 'Product Support' 
  }
];

// Render and initialize
timelineFromData('#prog-tl', items, {
  mode: 'horizontal',
  minWidth: 600
});