Home/ Questions/Q 8802833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T01:11:07+00:00

So I am trying to map Tide times on a line graph using Google’s

  • 0

So I am trying to map Tide times on a line graph using Google’s Chart API.
However, the points plotted on the Graph don’t correspond to the correct date and time values.

The data is in the form date time (x-axis) and height of tide (y-axis).
I’m not sure if I am creating the date time value correctly, or it the API is just doing something weird.

For instance, the last date in the tideTimes array is for the 1st of November, but the Graph is showing data points for December, you can see this behaviour in image below. I added the code below to allow you to recreate these errors.

If anyone could tell me what I am doing wrong, it would be greatly appreciated.
showing wrong data points on google chart api

    <html>
      <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">

        google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawWeekChart);
          function drawWeekChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('datetime', 'Date');
            data.addColumn('number', 'Wave Height (Meters)');
            var tideTimes = [
                [new Date(2012, 10, 29, 05, 44, 00, 00), 9.12],
                [new Date(2012, 10, 29, 11, 47, 00, 00), 1.62],
                [new Date(2012, 10, 29, 18, 01, 00, 00), 9.23],
                [new Date(2012, 10, 30, 00, 01, 00, 00), 1.55],
                [new Date(2012, 10, 30, 06, 16, 00, 00), 9.20],
                [new Date(2012, 10, 30, 12, 16, 00, 00), 1.58],
                [new Date(2012, 10, 30, 18, 33, 00, 00), 9.21],
                [new Date(2012, 10, 31, 00, 29, 00, 00), 1.54],
                [new Date(2012, 10, 31, 06, 46, 00, 00), 9.21],
                [new Date(2012, 10, 31, 12, 45, 00, 00), 1.60],
                [new Date(2012, 10, 31, 19, 04, 00, 00), 9.12],
                [new Date(2012, 11, 01, 00, 58, 00, 00), 1.59]
            //  new Date( YYYY, MM, DD, HH, MM, SS, MS), height]
                        ];
            data.addRows(tideTimes);

            var options = {
                title: 'Tide Times',
                smoothLine: true,
                width: 984,
                height: 600
            };

            var chart = new google.visualization.LineChart(document.getElementById('tide_chart_week'));
            chart.draw(data, options);
          }

        </script>
      </head>
      <body>
    <div id="tide_chart_week" stye="float:left; height:800px; background:blue;"></div>
      </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Month must be a integer b/w 0-11.

    Check the Date() constructor docs [0]

    month Integer value representing the month, beginning with 0 for
    January to 11 for December.

    Just change your tideTimes variable accordingly

     var tideTimes = [
            [new Date(2012, 9, 29, 05, 44, 00, 00), 9.12],   // october
            //.....
            [new Date(2012, 10, 01, 00, 58, 00, 00), 1.59]   // november
 ];

    Also, you might want to change your chart’s horizontal axis format to show friendlier dates 

     var options = {
     /*.. current options ..*/
     hAxis:  {format:'MMM d, y'}
 };

    Example

    Here’s an example: http://jsfiddle.net/jaimem/F4Gzr/1/

    [0] https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date

    • 0