Display multiple lines in timeline

[MS]

Hello,

I was wondering if someone could help me add more column with start and end date for the same name. I tried adding two new addColumn and inserted two dates in the row column but that did not work. Any suggestions?

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',

       'version':'1','packages':['timeline']}]}"></script>

<script type="text/javascript">

google.setOnLoadCallback(drawChart);

function drawChart() {

  var container = document.getElementById('example1');

  var chart = new google.visualization.Timeline(container);

  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'President' });

  dataTable.addColumn({ type: 'date', id: 'Start' });

  dataTable.addColumn({ type: 'date', id: 'End' });

  dataTable.addRows([

    [ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],   ----Basically, add two more "dates" to the same row and have it display accordingly in the same line

    [ 'Adams',      new Date(1797, 2, 3),  new Date(1801, 2, 3) ],

    [ 'Jefferson',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

  chart.draw(dataTable);

}

</script>

<div id="example1" style="width: 900px; height: 180px;"></div>

Thank you,

Manoj

[asgallant]

You can't add more dates to a DataTable row to add more bars in that timeline row.  If you want to group items together in the same timeline row, you do so by setting the first column to a category (which groups all of the timeline bars) and the second column to the bar labels, like in this example.

[MS]

Thank you for the reply,

Ok, so, i can't add a new bar label i.e. date but can I add a new row label string value. Basically, as per the example you sent, instead of four, I will have five rows?  It did not let me add when I tried from my end and gave me an error saiying it could only have 3 or 4 row. Basically, just wanted to verify if there was any other way to do so or if there is some plan on making any similar enhancement in the near future.

Manoj

[asgallant]

If you wanted two bars in the "Washington" row, you could have a DataTable like this:

dataTable.addColumn({ type: 'string', id: 'President' });

dataTable.addColumn({ type: 'string', id: 'Bar Label' });

dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });

dataTable.addRows([

    [ 'Washington', 'Bar label', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
    [ 'Washington', 'Bar label', new Date(1810, 3, 29), new Date(1814, 2, 3) ],
    [ 'Adams', 'Bar label', new Date(1797, 2, 3), new Date(1801, 2, 3) ],

    [ 'Jefferson', 'Bar label', new Date(1801, 2, 3), new Date(1809, 2, 3) ]

]);