CODEWITHSUNDEEP
google-visualization
user1126515
user1126515

Reputation: 1163

options to create google charts Line Chart with annotations

Here is my data:

dataToDisplay=[[156,"2013-12-01","note one"],
               [206,"2013-12-02","note two"],
               [280,"2013-12-03","note three"],
               [320,"2013-12-04","note four"],
               [0,"2013-12-05",""]]

Here is the code to make a line chart:

chartData = new google.visualization.DataTable();
chartData.addColumn('number', 'Miles');
chartData.addColumn('string', 'Date');
chartData.addColumn({type:'string', role:'annotationText'});
chartData.addRows(dataToDisplay);

graphTitle = 'Mileage'           
var options = {
      title: graphTitle,
      height:600
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(chartData, options);

and the error:

"Data column(s) for axis #0 cannot be of type string"

I'm at a loss as to what's going on. Which column is axis #0?

Also, is there a way to build a line graph with annotations using something like:

var chartData = google.visualization.arrayToDataTable(dataArray);

If so, how would dataArray have to be constructed?

Upvotes: 0

Views: 4711

Answers (1)

asgallant
asgallant

Reputation: 26340

LineChart's accept strings only as annotation columns or domain columns. The first column is the domain column, and annotation columns have to be specified as such. In your case, the "date" column is causing the problem, as it is the second column, and therefore is expected to be either a data ("number" type) column or an annotation column. You did not specify it as an annotation column, which is why you get the error.

Is your intent to have the dates be annotations or values? if they are intended to be values, you must put them in the first column:

chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Date');
chartData.addColumn('number', 'Miles');
chartData.addColumn({type:'string', role:'annotation'});

In order to use the "annotationText" data role, the preceeding column must be an "annotation" role column. The "annotation" role creates a text label on the chart at the associated data point, and the "annotationText" role creates a tooltip to show when the user hovers over the label.

Upvotes: 1

Related Questions