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
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 /
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./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/t26yu0w8/
Share Improve this question asked Feb 18, 2015 at 13:51 ConnrConnr 4086 silver badges10 bronze badges3 Answers
Reset to default 2I'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.
I modified your script.
<html>
<head>
<script type='text/javascript' src='http://www.google./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./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>
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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745478497a4629456.html
评论列表（0条）