Here's a newbie question, but how do I use dates for the x-axis in a Google Charts line chart?
When I use new Date( ... ) I get the error message "Uncaught Error: Date and datetime column types are not supported"
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Datum','Person1','Person2','Person3'],
[new Date(2012, 12, 19, 0, 0, 0),'5072.0537223002','5072.0537223002','5074.2809630567'],
[new Date(2012, 12, 20, 0, 0, 0),'5072.0537223002','5072.0537223002','5074.2809630567'],
]);
var options = {};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
(Using strings evenly spaces across the x-axis would be acceptable, but when I try with strings "Data column(s) for axis #0 cannot be of type string")
What about to convert the date to a string and just use Date
without new
like below :
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Datum','Person1','Person2','Person3'],
[Date(2012, 12, 19, 0, 0, 0).toString(),'5072.0537223002','5072.0537223002','5074.2809630567'],
[Date(2012, 12, 20, 0, 0, 0).toString(),'5072.0537223002','5072.0537223002','5074.2809630567'],
]);
var options = {};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Edit: You can follow their example in this link :
https://google-developers.appspot.com/chart/interactive/docs/customizing_axes
Edit 2:
This is what I was able to do: http://jsfiddle.net/ANC9H/2/
google.load("visualization", "1", {packages:["LineChart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'persone1');
data.addColumn('number', 'persone2');
data.addColumn('number', 'persone3');
data.addRows([
[new Date(2008, 1 ,1),0.7,0.8,0.6],
[new Date(2008, 1 ,7),0.5,0.55,0.9] ]);
var options = {};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I hope this helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With