Combo Chart: Annotated Timline and Bar/Column Chart

SherCoder

unread,

Jul 16, 2012, 1:41:45 PM7/16/12

to google-visua...@googlegroups.com

Is it possible to combine annotated timeline and bar/column chart into one chart but separate axis? Any help would be great.

asgallant

unread,

Jul 16, 2012, 4:06:55 PM7/16/12

to google-visua...@googlegroups.com

You can have them both on the same page, but you cannot combine them into one chart. The neither bar nor annotatedTimeline charts can be combined into a single chart with any other chart types (column charts can, though, if that is what you were thinking of).

Pardeep Singh

unread,

Jul 16, 2012, 4:28:29 PM7/16/12

to google-visua...@googlegroups.com

yeah I was thinking if I could make a combo chart using annotated timeline chart and column chart.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/gnx1prwUPLAJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

asgallant

unread,

Jul 16, 2012, 5:13:24 PM7/16/12

to google-visua...@googlegroups.com

In that case, you can make a combo of line and column charts (see ComboCharts, column series are called "bars" here for some reason). When combined with DataTable columns with the "annotation" and "annotationText" data roles and a ChartRangeFilter control, you get 95% of the functionality of an annotatedTimeline chart added in.

On Monday, July 16, 2012 4:28:29 PM UTC-4, SherCoder wrote:

yeah I was thinking if I could make a combo chart using annotated timeline chart and column chart.

On Mon, Jul 16, 2012 at 1:06 PM, asgallant <drew_g...@abtassoc.com> wrote:

You can have them both on the same page, but you cannot combine them into one chart. The neither bar nor annotatedTimeline charts can be combined into a single chart with any other chart types (column charts can, though, if that is what you were thinking of).

On Monday, July 16, 2012 1:41:45 PM UTC-4, SherCoder wrote:
Is it possible to combine annotated timeline and bar/column chart into one chart but separate axis? Any help would be great.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/gnx1prwUPLAJ.

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

Pardeep Singh

unread,

Jul 17, 2012, 2:04:25 PM7/17/12

to google-visua...@googlegroups.com

I am struggling how I can combine line chart and column chart. I tried to follow the example on playground but I failed. I am pretty sure that my ChartWrapper constructor is wrong. (note) for testing purposes I am just going to use same data for line chart and column chart. This is what I have so far (made slight changes but a lot of this is copy paste from the playground)

HTML:

SCRIPT:

google.load('visualization', '1', { 'packages': ['controls'] });

google.setOnLoadCallback(drawChart);

function drawChart() {

$('div#test_chart').html("<div class='spinner'><img src='/content/images/loadingicon.gif' alt='loading...' /></div>");

$.post('/metrics/UpChartData', {},

function (data) {

var dashboard = new google.visualization.Dashboard(document.getElementById('test_chart'));

var controlOptions = {

'filterColumnIndex': 0,

'ui': {

'chartType': 'ComboChart',

'chartOptions': {

'hAxis': { 'baselineColor': 'none' }

},

'chartView': { 'columns': [0, 3] },

'minRangeSize': 86400000

}

};

var control = new google.visualization.ControlWrapper({

'controlTyp': 'ChartRangeFilter',

'containerId': 'control',

'chartOptions': controlOptions

});

var chart = new google.visualization.ChartWrapper({

'chartType': 'ColumnChart',

'containerId': 'chart',

'options': {

// Use the same chart area width as the control for axis alignment.

'chartArea': { 'height': '80%', 'width': '90%' },

'hAxis': { 'slantedText': false },

'vAxis': { 'viewWindow': { 'min': 0, 'max': 2000} },

'legend': { 'position': 'none' }

},

// Convert the first column from 'date' to 'string'.

'view': {

'columns': [

{

'calc': function (dataTable, rowIndex) {

return dataTable.getFormattedValue(rowIndex, 0);

},

'type': 'string'

}, 1, 2, 3, 4]

}

});

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

tdata.addColumn('date', 'Date');

tdata.addColumn('number', 'Up Time %');

for (var i = 0; i < data.length; i++) {

var date = new Date(parseInt(data[i].Date.substr(6)));

var up_time = (data[i].SiteUptime / (data[i].SiteDowntime + data[i].SiteUptime) * 100);

tdata.addRow([date, up_time]);

}

dashboard.bind(control, chart);

dashboard.draw(tdata);

});

}

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/WGZKOVgtB-IJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

Pardeep Singh

unread,

Jul 17, 2012, 2:29:30 PM7/17/12

to google-visua...@googlegroups.com

I edited a little bit more but still no luck. It says One or more participants failed to draw()

HTML:

</div>

SCRIPT:

google.load('visualization', '1', { 'packages': ['controls'] });

google.setOnLoadCallback(drawChart);

function drawChart() {

$('div#test_chart').html("<div class='spinner'><img src='/content/images/loadingicon.gif' alt='loading...' /></div>");

$.post('/metrics/UpChartData', {},

function (data) {

var dashboard = new google.visualization.Dashboard(document.getElementById('test_chart'));

var controlOptions = {

'filterColumnIndex': 0,

'ui': {

'chartType': 'ComboChart',

'chartOptions': {

'chartArea': { 'width': '90%' },

'hAxis': { 'baselineColor': 'none' }

},

'chartView': { 'columns': [0, 2] },

'minRangeSize': 86400000

},

'state': { 'range': { 'start': new Date(2012, 1, 9), 'end': new Date(2012, 2, 20)} }

};

var control = new google.visualization.ControlWrapper({

'controlTyp': 'ChartRangeFilter',

'containerId': 'control',

'chartOptions': controlOptions

});

var chart = new google.visualization.ChartWrapper({

'chartType': 'ColumnChart',

'containerId': 'chart',

'options': {

// Use the same chart area width as the control for axis alignment.

'chartArea': { 'height': '80%', 'width': '90%' },

'hAxis': { 'slantedText': false },

'vAxis': { 'viewWindow': { 'min': 0, 'max': 2000} },

'legend': { 'position': 'none' },

'seriesType': "bars",

'series': { 2: { type: "line"} }

},

// Convert the first column from 'date' to 'string'.

'view': {

'columns': [

{

'calc': function (dataTable, rowIndex) {

return dataTable.getFormattedValue(rowIndex, 0);

},

'type': 'string'

}, 1, 2, 3, 4]

}

});

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

tdata.addColumn('date', 'Date');

tdata.addColumn('number', 'Up Time %');

tdata.addColumn('number', 'UpTime');

for (var i = 0; i < data.length; i++) {

var date = new Date(parseInt(data[i].Date.substr(6)));

var up_time = (data[i].SiteUptime / (data[i].SiteDowntime + data[i].SiteUptime) * 100);

tdata.addRow([date, up_time, up_time]);

}

dashboard.bind(control, chart);

dashboard.draw(tdata);

});

}

</script>

asgallant

unread,

Jul 17, 2012, 3:41:55 PM7/17/12

to google-visua...@googlegroups.com

You have a few things that need fixing:

1) get rid of the "chartView" and "view" options in the filter and chart, respectively. Since you want both the filter and chart to use the exact data as presented in the DataTable, there is no need to filter the data using a view (plus, the view specified in the chart options requires 5 columns in the DataTable).

2) if you want the filter to use a ComboChart inside it (as indicated by the ui.chartType option), you need to assign the series.[seriesIndex].type options.

3) if you want the main chart to be a ComboChart, you need to set the "chartType" option to "ComboChart"

4) data series are zero-indexed, so if you want the second series to be type line, you need to use series: {1: {type: 'line'}}.

The code would look something like this:

google.load('visualization', '1', {'packages': ['controls']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  $('div#test_chart').html("<div class='spinner'><img src='/content/images/loadingicon.gif' alt='loading...' /></div>");

  $.post('/metrics/UpChartData', {}, function(data) {
  var dashboard = new google.visualization.Dashboard(document.getElementById('test_chart'));

  var controlOptions = {

  filterColumnIndex: 0, // filter on the date column
  ui: {
  chartType: 'ComboChart', // this makes the chart in the filter a combo chart
  chartOptions: {
  // Use the same chart area width as the chart for axis alignment.

  chartArea: {
  width: '90%'
  },
  hAxis: {
  baselineColor: 'none'
  },

  series: {,
  0: {
  type: 'bars'
  }
  1: {
  type: 'line'

  }
  }
  },
  minRangeSize: 86400000
  }
  };

  var control = new google.visualization.ControlWrapper({
  controlTyp: 'ChartRangeFilter',
  containerId: 'control',
  chartOptions: controlOptions
  });

  var chart = new google.visualization.ChartWrapper({

chartType: 'ComboChart', // make the main chart into a ComboChart

  containerId: 'chart',
  options: {
  // Use the same chart area width as the control for axis alignment.
  chartArea: {
  height: '80%',
  width: '90%'
  },
  hAxis: {
  slantedText: false
  },
  vAxis: {
  viewWindow: {
  min: 0,
  max: 2000
  }
  },
  legend: {
  position: 'none'
  },

  series: {
  0: {  // set the options for the first series (columns)
  type: 'bars'
  },
  1: {  // set the options for the second series (line)
  type: 'line'

  }
  }
  }
  });

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

  tdata.addColumn('date', 'Date');
  tdata.addColumn('number', 'Up Time %');
  tdata.addColumn('number', 'UpTime');

  for (var i = 0; i < data.length; i++) {
  var date = new Date(parseInt(data[i].Date.substr(6)));
  var up_time = (data[i].SiteUptime / (data[i].SiteDowntime + data[i].SiteUptime) * 100);
  tdata.addRow([date, up_time, up_time]);
  }

  dashboard.bind(control, chart);
  dashboard.draw(tdata);
  });
}

}

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

Pardeep Singh

unread,

Jul 17, 2012, 4:10:44 PM7/17/12

to google-visua...@googlegroups.com

I have changed my code line by line to match what you have provided except there was an extra comma and there was a comma missing in controlOptions. However I still get the 'One or more participants failed to draw()' error. I know I am getting the data correctly and I can see my data in firebug.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/pveeXyd8Y4wJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

asgallant

unread,

Jul 17, 2012, 4:46:07 PM7/17/12

to google-visua...@googlegroups.com

Yeah, after testing I realized I had a bunch of mistakes 'cause I wasn't really paying attention to what the code was saying >;o)

Anyway, I made up a test version that uses random data instead of a data pull from a server. Copy the chart code into the AJAX function that you use and change the dataTable population to use your code: http://jsfiddle.net/asgallant/9LRhX/1/

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/pveeXyd8Y4wJ.

Pardeep Singh

unread,

Jul 17, 2012, 5:15:35 PM7/17/12

to google-visua...@googlegroups.com

Awesome, that works great. Thank so much. If you don't mind answering another question, is it possible to give separate y-axis if i have two separate data points (unlike this example where i am using same data)

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/VQDXJ-X6KigJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

Pardeep Singh

unread,

Jul 17, 2012, 5:26:47 PM7/17/12

to google-visua...@googlegroups.com

I think I might have created confusion in the last question. What I meant is that I want a separate axis for bar chart and line chart. Thanks

Pardeep Singh

unread,

Jul 17, 2012, 5:46:55 PM7/17/12

to google-visua...@googlegroups.com

So I found a option that gives me two y-axes but they're both the same values even though I am providing two separate data points to it. am I missing something?

var chart = new google.visualization.ChartWrapper({

chartType: 'ComboChart', // make the main chart into a ComboChart

containerId: 'chart',

options: {

// Use the same chart area width as the control for axis alignment.

chartArea: {

height: '80%',

width: '90%'

},

hAxis: {

slantedText: false

},

vAxis: {

viewWindow: {

min: 0,

max: 100

}

},

legend: {

position: 'none'

},

series: {

0: { // set the options for the first series (columns)

type: 'bars',

targetAxisIndex: 0

},

1: { // set the options for the second series (line)

type: 'line',

targetAxisIndex: 1

}

});

asgallant

unread,

Jul 17, 2012, 5:54:37 PM7/17/12

to google-visua...@googlegroups.com

Yes, you can. Set the series.[seriesIndex].targetAxisIndex to either 0 (left axis) or 1 (right axis) to assign a series to an axis. Then use vAxes.[axisIndex] to set options for each axis (these take the same options available to vAxis). Updated example: http://jsfiddle.net/asgallant/9LRhX/2/

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/VQDXJ-X6KigJ.

Pardeep Singh

unread,

Jul 17, 2012, 7:47:22 PM7/17/12

to google-visua...@googlegroups.com

Awesome thanks asgallant :)

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/kcD7LusahcoJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

Reply all

Reply to author

Forward