Home/ Questions/Q 3663068
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T01:29:17+00:00

I am trying to implement an Annotated Time Line Chart via Google Charts API.

  • 0

I am trying to implement an Annotated Time Line Chart via Google Charts API. I successfully got it work, using an AJAX call to load data from a database, however I noticed that although the annotations appear on the right, they would not appear above the points on the graph ( like tool-tips). However they worked great otherwise, I could click on them and even include the Annotation filter properly.

After an hour or so of not seeing any errors, I decided to go back to the drawing board and took an exact copy of the chart example code from the Google API and test it out. It turns out I am having the same issue.

The link to the tutorial is here (notice how A and B show up on the graph itself), I also pasted the code below.

Is there some setting I’m missing or something that would be blocking this? I tested in Chrome and Firefox and neither worked. Also it works for me on the tutorial page so I’m at a loss.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Google Charts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <script type='text/javascript'>
              google.load('visualization', '1', {'packages':['annotatedtimeline']});
              google.setOnLoadCallback(drawChart);


      function drawChart() {
        var data = new google.visualization.DataTable();

        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sold Pencils');
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        data.addColumn('number', 'Sold Pens');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');

        data.addRows([
          [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
          [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
          [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
          [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true});
      }
        </script>
    </head> 
    <body>

    <div id='chart_div' style='width: 80%; height: 50%;'></div>

        </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    My guess is that you are using https://www.google.com/jsapi instead of http://... but your page is not in https.

    And a comment… You are using a mix of quotes and double quotes, that’s not very clean.
    Try to stick to a simple rule like: Keep the double quotes for HTML like id="chart_div" and the single quote for Javascript data.addColumn('date', 'Date');.

    • 0