CODEWITHSUNDEEP
javascriptapigoogle-visualization
Jason
Jason

Reputation:

Google Visualization API, making a line graph

I am trying to make a line chart by using the Google Visualization API, here is my column data definition:

var dataTable = new google.visualization.DataTable();

dataTable.addColumn('date', 'Date');
dataTable.addColumn('number', 'Uptime');
dataTable.addColumn('string', 'Channel');

I want to group my rows by channels and these grouped channels make a line where X axis is the date and the Y axis is the uptime. I am pretty lost at the API and would be greatful of any help.

Thanks

Upvotes: 0

Views: 2416

Answers (2)

Pierre-Antoine LaFayette
Pierre-Antoine LaFayette

Reputation: 24402

First you create the data then you add it to the chart:


var data = new google.visualization.DataTable();
// 3 columns
dataTable.addColumn('date', 'Date');
dataTable.addColumn('number', 'Uptime');
dataTable.addColumn('string', 'Channel');

// Add 2 rows
data.addRows(2);
// setValue(row, col, value)
data.setValue(0,0, '2009-09-06');
data.setValue(0,1, 1000);
data.setValue(0,2, 'Channel1');
data.setValue(1,0, '2009-09-05');
data.setValue(1,1, 100);
data.setValue(1,2, 'Channel2');

var chart = new google.visualization.LineChart('chartDiv');
chart.draw(data, {
  width: width,
  height: height,
  is3D: true,
  title: title,
  colors: colors,
  enableTooltip: false,
  legend: 'bottom' });

Something like that.

Upvotes: 3

yonkeltron
yonkeltron

Reputation: 643

Are you sure you don't want google.visualization.LineChart(blah) instead of google.visualization.DataTable()? I mean, you said you wanted a line chart and the documentation says that it's LineChart which you want. Also, tinkering on the playground might be informative.

Upvotes: 0

Related Questions