Google Chart API : Line Chart - chart date against date?

Question

I'm have problem producing a Google Chart API line chart with dates on both the vertical and horizontal axis. The resulting chart should look like this :

This is some code which attempts to produce that effect :

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
    google.load("visualization", "1", {packages:["LineChart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
     var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('date', 'Target');
        data.addColumn('date', 'Results');
        data.addRows([
    [new Date(2015, 1 ,1), new Date(2015, 3 ,1),new Date(2015, 4 ,1)],
[new Date(2015, 3 ,1), new Date(2015, 4 ,1),new Date(2007, 4 ,15)],
]);

        var options = {'vAxis': {format:'MMM d, y'}};

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);


    //     var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
    //  chart.draw(data, {displayAnnotations: true});
      }

    </script>
    </head>
<body>
    <div id="chart_div" style="width: 300px; height: 240px;" ></div>


        </body>
    </html>

But the resulting chart looks like this :

in which the vertical axis is showing values which don't correspond to the date values supplied. I have tried using the vAxis.format option setting but that hasn't had any effect.

Would like to know how the vertical axis could show 'Feb-2015' etc ? Thanks.

I would think you have to have numbers on the vertical axis and override the display of those numbers with the text of your dates. You cannot plot a date vs date chart. — Kevin Brown
Thanks for your suggestion. I thought it was a good one but in the end I went with the approach suggested by Vadim — glaucon

Vadim Gremyachev Vadim Gremyachev · Accepted Answer · 2015-12-10T12:03:36

Since you are using google.visualization.LineChart, corechart package needs to be loaded:

google.load("visualization", "1", { packages: ["corechart"] });

After that you could specify date type values:

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('date', 'Target');
data.addColumn('date', 'Results');
data.addRows([
      [new Date(2015, 6, 1), new Date(2016, 2 ,1), new Date(2015, 11 ,1)],
      [new Date(2015, 7 ,1), new Date(2016, 1 ,1), new Date(2015, 11 ,1)],
      [new Date(2015, 8 ,1), new Date(2015, 11 ,1), new Date(2015, 11 ,1)],
]);

Example

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('date', 'Target');
    data.addColumn('date', 'Results');
    data.addRows([
          [new Date(2015, 6, 1), new Date(2016, 2 ,1), new Date(2015, 11 ,1)],
          [new Date(2015, 7 ,1), new Date(2016, 1 ,1), new Date(2015, 11 ,1)],
          [new Date(2015, 8 ,1), new Date(2015, 11 ,1), new Date(2015, 11 ,1)],
    ]);



    var options = {
         hAxis: {
             format: 'MMM d, y', 
         }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

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

Google Chart API : Line Chart - chart date against date?

1 Answers