Plotting date on x-axis using google charts

Question

My JSON data is:

{ "cols": [ {"id":"","label":"Duration Time","pattern":"","type":"Date"}, {"id":"","label":"Idle Time","pattern":"","type":"timeofday"} ], "rows": [ {"c":[{"v": "2015-02-06" ,"f": null}, {"v": [00,00,10] ,"f": "00:00:10"}]}, {"c":[{"v": "2015-02-06" ,"f": null}, {"v": [00,00,07] ,"f": "00:00:07"}]}, {"c":[{"v": "2015-02-13" ,"f": null}, {"v": [00,00,04] ,"f": "00:00:04"}]}, {"c":[{"v": "2015-02-13" ,"f": null}, {"v": [00,00,18] ,"f": "00:00:18"}]} ]

Whenever I am plotting anything else on x-axis that is time or number, I am able to do so. But when I am plotting date, it does not show anything.

Part of my script is:

    var piechartdata = new google.visualization.DataTable(jsonPieChartData);

    // Instantiate and draw our pie chart, passing in some options.
    var chart = new      google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(piechartdata, {
  width: 800,
  height: 600,
  pointSize:5,
  chartArea: { left:"10%",top:"10%",width:"80%",height:"80%" },
  legend: {position:'top'},

 hAxis: {
                title: "Date" 
         }
});
 }

I have tried this JSON data as well:

{ "cols": [{"id":"","label":"Date2","pattern":"","type":"Date"}, {"id":"","label":"Duration Time","pattern":"","type":"timeofday"} ], "rows": [ {"c":[{"v": "15,04,09","f": null },{"v": [00,00,10] ,"f": "00:00:10"}]}, {"c":[{"v": "15,04,10","f": null },{"v": [00,00,07] ,"f": "00:00:07"}]}, {"c":[{"v": "15,04,11","f": null },{"v": [00,00,44] ,"f": "00:00:44"}]}, {"c":[{"v": "15,04,20","f": null },{"v": [00,00,18] ,"f": "00:00:18"}]} ] }

Could anyone tell me what the problem is in my scripting or json data?

Answer 1

I believe you need to use "date" instead of "Date" .

Also, your v values also appear to be invalid. For example, the date column it expects Date objects in the v values but you are providing strings.

Changing both of these seems to work with your second set of data:

 google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart); function drawChart() { var jsonPieChartData = { "cols": [{ "id": "", "label": "Date2", "pattern": "","type": "date"}, { "id": "", "label": "Duration Time", "pattern": "", "type": "timeofday" }], "rows": [{ "c": [{ "v": new Date(2015, 3, 9), "f": null }, { "v": [00, 00, 10], "f": "00:00:10"}]}, { "c": [{ "v": new Date(2015, 3, 10), "f": null }, { "v": [00, 00, 07], "f": "00:00:07"}]}, { "c": [{ "v": new Date(2015, 3, 11), "f": null }, { "v": [00, 00, 44], "f": "00:00:44"}]}, { "c": [{ "v": new Date(2015, 3, 20), "f": null }, { "v": [00, 00, 18], "f": "00:00:18"}]}] }; var piechartdata = new google.visualization.DataTable(jsonPieChartData); // Instantiate and draw our pie chart, passing in some options. var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(piechartdata, { width: 800, height: 600, pointSize: 5, chartArea: { left: "10%", top: "10%", width: "80%", height: "80%" }, legend: { position: 'top' }, hAxis: { title: "Date" } }); } 

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