Geek Answers Handbook

Google Chart Clock Chart Diagram

I am trying to use the Google chart API to show a line chart.
I created a data table with two columns, date and numeric value. The line is displayed correctly, but there are no labels on the X axis. All data on the same day, but at different hours. If I edit the dates to distribute them on different days, everything will work.
I need to focus my schedule on only one day and show hours and minutes on the X axis.
How can i do this?

Thanks.

+7
source share
2 answers

It usually comes down to how you transmit the data. With arrayToDataTable your dates are just strings. If you create a JS date object and create a dataTable , you should get better results. This code works for me (see live ):

 function drawVisualization() { var data = new google.visualization.DataTable(); data.addColumn('datetime', 'Time of Day'); data.addColumn('number', 'Some Measurement'); data.addRows([ [new Date(2012,10,3,11,30,0), 12], [new Date(2012,10,3,11,45,0), 2], [new Date(2012,10,3,12,1,0), 16], [new Date(2012,10,3,12,15,0), 3], [new Date(2012,10,3,12,30,0), 12], [new Date(2012,10,3,12,45,0), 7] ]); new google.visualization.LineChart(document.getElementById('visualization')). draw(data, {curveType: "function", width: 500, height: 400, vAxis: {maxValue: 10}} ); }

I used to be a fan of Google Visualization, but they were burned too many times for their unannounced updates. It also has many limitations. Check out Dygraph , which handles time series very well.

+7
source

In focus my chart in one day only and show hours and minutes on the X axis. you need to do this in your request. This has nothing to do with Google Charts. You can look at the haxis options to see if you can change some of these values ​​to achieve the desired https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

0
source

More articles:


All Articles