CODEWITHSUNDEEP
javascriptgoogle-visualization
Connr
Connr

Reputation: 408

Google charts timeline with numbers

I am trying to use a timeline from the Google charts library with numbers instead of dates. When I change the basic example provided to use numbers instead of dates I get the following output on the page with no error in the console. Cannot read property 'v' of undefined

Here is the basic example that I am modifying https://developers.google.com/chart/interactive/docs/gallery/timeline#SimpleExample

Simply changing the start and end types from date to number and then changing the start and end value for each row into a number does not seem to work.

Here is a jsfiddle showing the issue http://jsfiddle.net/t26yu0w8/

Upvotes: 3

Views: 5069

Answers (3)

timiscoding
timiscoding

Reputation: 329

I'd like to point out that the current answers are for annotatedtimeline which is different to timeline which the OP was asking about. Time line requires data in a different format to annotated time line.

The Start and End columns in number type actually refers to a date in unix time. E.g. new Date(2016,0,1).getTime()

Here's the OP's jsfiddle that works.

Upvotes: 2

ivan98
ivan98

Reputation: 69

By using numbers as column type, instead of date, Google assumes, correctly or incorrectly, you are using milliseconds.

If you update your data as follows:
[new Date(2015, 1 ,1), 5000, 9000,'Washington' ],
[new Date(2015, 1 ,1),10000,12000,'Adams' ],
[new Date(2015, 1 ,1), 1000, 7000,'Jefferson' ]]);

It will show something.

Upvotes: 1

Hann
Hann

Reputation: 713

I modified your script.

<html>
  <head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {'packages':['annotatedtimeline']});
      google.setOnLoadCallback(drawChart);
function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('date', 'Date');
        dataTable.addColumn( 'number', 'Start' );
        dataTable.addColumn( 'number', 'End' );
        dataTable.addColumn( 'string', 'President' );
        dataTable.addRows([
          [new Date(2015, 1 ,1), 5 , 9,'Washington' ],
          [new Date(2015, 1 ,1),      10,  12,  'Adams' ],
          [new Date(2015, 1 ,1),  1,  7, 'Jefferson' ]]);




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

  <body>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>

  </body>
</html>

if you use this chart The first data must be a Date.

I can give an example for you.

<html>
  <head>
    <script type='text/javascript' src='http://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>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>

  </body>
</html>

Upvotes: 1

Related Questions