CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
user1717513
user1717513

Reputation: 71

Google Chart Line Chart hours and minutes

I'm trying to use Google's chart API to show a line chart.
I have created a data table with two columns, a date and a numeric value. The line is displayed correctly but the labels on the X axis are missing. All the data are in the same day, but at different hours. If I edit the dates in order to spread them over different days everything works.
I need to focus my chart in one day only and show hours and minutes on the X axis.
How can I do that?

Thanks.

Upvotes: 7

Views: 14390

Answers (2)

ficuscr
ficuscr

Reputation: 7073

Usually comes down to how you pass the data. With arrayToDataTable your dates are just strings. If you instantiate a JS date object and build the dataTable you should get better results. This code works for me (see it 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 have been burned too many times by their unannounced updates. It also has a lot of limitations. Check out Dygraph which handles time series very well.

Upvotes: 6

user1477388
user1477388

Reputation: 21440

To focus my chart in one day only and show hours and minutes on the X axis. you need to do this in your query. This doesn't have anything to do with Google Charts. You could look at the haxis parameters to see if you can change some of those values to achieve what you desire https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

Upvotes: 0

Related Questions