Re: Dates, hours and the x-axis of the Line Chart

asgallant

unread,

Jun 25, 2012, 10:37:27 AM6/25/12

to google-visua...@googlegroups.com

You should have the time set correctly (keep in mind that the "hour" parameter for dates is on a 24-hour clock, so 11PM is 23). Try setting the format of the axis (hAxis.format) to show date and hour.

On Monday, June 25, 2012 5:16:10 AM UTC-4, Antoine O wrote:

Hi
I'd like to know if it's possible to show dates and hours on the x-axis of the Line chart.

Indeed I'd like to show a stock value which is updated twice a day (11:00 AM and 11:00 PM).
So is it possible to show 2 values within the same day ?

I tried that code :
    [new Date(year, month ,day , hour, minutes), value, null, null],

But it didn't work.

Is there an answer to my issue ?

PS : excuse my english

Antoine O

unread,

Jun 26, 2012, 4:51:24 AM6/26/12

to google-visua...@googlegroups.com

OK i read all the docs you reffered to.
But i don't really see where i have to place the code defining the date format ( in my case

{format:'Y,M,d,H'} )

asgallant

unread,

Jun 26, 2012, 11:32:48 AM6/26/12

to google-visua...@googlegroups.com

You'll probably want that in two places:

1) a DateFormatter for the domain column:

var dateFormatter = new google.visualization.DateFormat({pattern: 'Y,M,d,H'});
dateFormatter.format(data, 0);

2) formatting the hAxis of the chart:

chart.draw(data, {
  hAxis: {
  format: 'Y,M,d,H';
  }
});

The first insures that the dates appear correctly in the tooltips, while the second makes sure the axis values are formatted correctly.

Antoine O

unread,

Jun 27, 2012, 2:39:25 AM6/27/12

to google-visua...@googlegroups.com

Ok thank you for your answer.
But i'm not used to use google chart and I have an error wherever I put that code :

      chart.draw(data, {    hAxis: {
   format: 'Y,M,d,H';
   }    });

the error is "missing } after property list (retrieve_cache?unique_id=eab68f34d8191baa7031f8541e6e6a71062a8bd5,61)"

Here is my code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
  google.load('visualization', '1', {packages: ['annotatedtimeline']});

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sold Pencils');
  data.addColumn('string', 'title1');
  data.addColumn('string', 'text1');

data.addRows([
  [new  Date(12133699), 30000, 'title', 'message1'],
[new  Date(12139699), 30000, 'title2', 'message 2'],
  [new Date(1224445555), 14045, null, null],
  [new Date(1236547890), 55022, null, null],
  [new Date(124569873), 75284, null, null],
  [new Date(156987413), 41476, 'Bought Pens', 'Bought 200k pens'],


  ]);

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

var dateFormatter = new google.visualization.DateFormat({pattern: 'Y,M,d,H'});
dateFormatter.format(data, 0);

}

google.setOnLoadCallback(drawVisualization);

</script>
</head>

<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</body>
</html>

asgallant

unread,

Jun 27, 2012, 10:43:28 AM6/27/12

to google-visua...@googlegroups.com

The code you posted works for me (see http://jsfiddle.net/asgallant/fgJzC/). The only thing I see wrong with it is the trailing comma at the end of the line:

[new Date(156987413), 41476, 'Bought Pens', 'Bought 200k pens'],

which will cause the code to fail in IE.

Antoine O

unread,

Jun 27, 2012, 12:11:34 PM6/27/12

to google-visua...@googlegroups.com

I agree, the code is good but dates are not formatted as i'd like ( 'Y,M,d,H'). In fact the error comes from the second property (
chart.draw(data, {
hAxis: {
format: 'Y,M,d,H';
}

}); )
I tried it and Firebug (in the google visualisation playground) answered the error i quoted before.

asgallant

unread,

Jun 27, 2012, 12:31:05 PM6/27/12

to google-visua...@googlegroups.com

Ahh, sorry, that's me not paying attention >;o)

First, the semicolon is causing the error - get rid of it and the error should go away. Second, the hAxis set of options is not available in the AnnotatedTimeline charts (you can use the dateFormat option to format the dates as the appear in the upper right corner when you hover over points, but there is no axis format control). Third, to format years in the dates, use lowercase "y" not uppercase "Y".

If you need to have the axis values formatted in a specific way, you can get most (90+%) of the functionality of the AnnotatedTimeline charts using regular line charts in combination with ChartRangeFilters (and, as a free bonus, you won't have any Flash ruining running on your page).

asgallant

unread,

Jan 3, 2013, 5:39:01 PM1/3/13

to google-visua...@googlegroups.com

No, it's not a bug. The ATL charts don't have an hAxis option at all, so nothing you put there could be expected to work. The ATL charts are old, antiquated, Flash-based charts with limited customization options. I strongly recommend updating them to LineCharts controlled by a ChartRangeFilter. You can get 95% of the functionality of an ATL chart out of the box and have a great deal more flexibility and customization available, without any of the drawbacks of Flash.

On Thursday, January 3, 2013 2:44:54 PM UTC-5, Stefan Ferber wrote:

The date and dateTime formating in the right top corner you can easily control with one option:

        vizOptions = {
                dateFormat: 'dd.MM.yy hh:mm'
                };
        vizChart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        vizChart.draw(vizTable, vizOptions);
      }

I tried several ways to change the dateTime format on the x-axis but was not successful:
        vizOptions = {
                dateFormat: 'dd.MM.yy hh:mm',
                hAxis: {format: 'Y,M,d,H'}
                };
        var formatter = new google.visualization.DateFormat({formatType: 'short'});
        formatter.format(vizTable, 0);
        vizChart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        vizChart.draw(vizTable, vizOptions);
      }

It is simply ignored by the Google API. Is this bug already in the official bug reporting?

andrado

unread,

Nov 23, 2017, 12:39:37 PM11/23/17

to Google Visualization API

Hello every body,

It's work fine but how to work with 'Local date string'?

alert(date.toLocaleDateString("ar-EG"));

// → "٢٠‏/١٢‏/٢٠١٢"var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

Reply all

Reply to author

Forward