Line chart with time as the hAxis

Question

I am experimenting with Google charts and I encountered a problem. I would greatly appreciate any of your help.

I have 2 google charts, a line chart and a timeline as shown here: https://jsfiddle.net/bygo33n8/7/

The code is as below:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>       
<div id="timeline" style="height: 180px;"></div>

google.load('visualization', '1', {packages: ['corechart', 'line', 'timeline']});
google.setOnLoadCallback(drawBasic);
google.setOnLoadCallback(drawChart);

function drawBasic() {

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

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

        dataTable.addRows([
            [new Date(0,0,0,00,0,0), 0, 0],  
            [new Date(0,0,0,01,0,0), 148, 177], 
            [new Date(0,0,0,02,0,0), 214, 270], 
            [new Date(0,0,0,03,0,0), 0, 0]
        ]);

      var options = {
        hAxis: {
          title: 'Time'
          // textPosition: 'none'
        },
        vAxis: {
          title: 'Traffic'
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(dataTable, options);
 }


function drawChart() {

    var container = document.getElementById('timeline');
    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' });
    //specify only the time active
    dataTable.addRows([
        [ 'Activity', new Date(0,0,0,00,0,0),  new Date(0,0,0,00,20,0) ],
        [ 'Activity', new Date(0,0,0,01,0,0),  new Date(0,0,0,02,00,0) ],
        [ 'Activity', new Date(0,0,0,02,00,0),  new Date(0,0,0,03,00,0) ],
    ]);

    var options = {
        timeline: { showRowLabels: false }, 
        colors: ['green'],
        avoidOverlappingGridLines: true,
        //backgroundColor: '#FF0000'
    };

    chart.draw(dataTable, options);
}

I would like the horizontal axis of the line chart to match the horizontal axis of the timeline. Although I have used the same data type and wrote the data in the same manner the horizontal axis of the line chart is outputting random dates.

Dr.Molle Dr.Molle · Accepted Answer · 2015-08-11T11:43:49

The dates are not random. Use the timeofday-type for the first column to get the desired result:

    dataTable.addColumn({ type: 'timeofday', id: 'Start' });
    dataTable.addColumn({ type: 'number', id: 'X' });
    dataTable.addColumn({ type: 'number', id: 'Y' });

    dataTable.addRows([
        [[0,0,0], 0, 0],  
        [[1,0,0], 148, 177], 
        [[2,0,0], 214, 270], 
        [[3,0,0], 0, 0]
    ]);

Line chart with time as the hAxis

1 Answers