Visualization: Combo Chart

(1)

Home Docs FAQ Forum Terms

Google Chart Tools

Overview Example Loading Data Format Configuration Options Methods Events Data Policy

A chart that lets you render each series as a different marker type from the following list: columns, lines, and area lines. To assign a default marker type for series, specify the seriesType property. Use the series property to specify properties of each series individually.

By: Google

Overview

(2)

Code it yourself on the Visualization Playground

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html

xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv= "content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript"

src="https://www.google.com/jsapi"></script> <script

type="text/javascript"> google.load('visualization', '1', {packages: ['corechart']}); </script> <script

type="text/javascript"> function drawVisualization() { // Some raw data (not necessarily accurate) var data =

google.visualization.arrayToDataTable

([ ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea','Rwanda',

'Average'], ['2004/05', 165, 938, 522, 998, 450,

614.6], ['2005/06', 135, 1120, 599, 1268, 288,

682], ['2006/07', 157, 1167, 587, 807, 397, 623], ['2007/08',

139, 1110, 615, 968, 215, 609.4], ['2008/09', 136, 691, 629, 1026, 366,

569.6] ]); // Create and draw the visualization. var

comboChart = new google.visualization.ComboChart(document.getElementById

('chart_div')); comboChart.draw(data, { title : 'Monthly Coffee Production by Country', vAxis: {title: "Cups"}, hAxis:

{title: "Month"}, seriesType: "bars", series: {5: {type: "line"}} }); } google.setOnLoadCallback

(drawVisualization); </script> </head> <body style="font-family:

Arial;border: 0 none;"> <div id="chart_div" style="width: 700px; height:

(3)

The google.load package name is "corechart"

google.load("visualization", "1", {packages: ["corechart"]});

The visualization's class name is google.visualization.ComboChart

var visualization = new google.visualization.ComboChart(container);

Warning: You cannot load both corechart and the barchart, linechart, mapchart, areachart, piechart, or scatterchart packages at the same time on the same page.

The top row represents x-axis labels, the first column represents series labels, and each column after that represents a data point. Each row after the first represents a single series. The top left cell will always be ignored.

Here's an example of the table above, with five x-axis points and five series.

'' 'Bolivia' 'Ecuador' 'Madagascar' 'Papua New Guinea' 'Rwanda'

'2004/05' 165 938 522 998 450

'2005/06' 135 1120 599 1268 288

'2006/07' 157 1167 587 807 397

'2007/08' 139 1110 615 968 215

'2008/09' 136 691 629 1026 366

Name Type Default Description

areaOpacity number,

0.0–1.0

0.3 The default opacity of the colored area under an area chart series, opacity for an individual series, set the areaOpacity value in the axisTitlesPosition string 'out' Where to place the axis titles, compared to the chart area. Supported

in - Draw the axis titles inside the the chart area. out - Draw the axis titles outside the chart area.

none - Omit the axis titles.

backgroundColor string or object

'white' The background color for the main area of the chart. Can be either a an object with the following properties.

backgroundColor.stroke string '#666' The color of the chart border, as an HTML color string.

Loading

Data Format

(4)

backgroundColor.strokeWidth number 0 The border width, in pixels.

backgroundColor.fill string 'white' The chart fill color, as an HTML color string.

chartArea Object null An object with members to configure the placement and size of the

legends). Two formats are supported: a number, or a number followed by %. A simple % is a percentage. Example: chartArea

chartArea.left number or string

auto How far to draw the chart from the left border.

chartArea.top number

or string

auto How far to draw the chart from the top border.

chartArea.width number or string

auto Chart area width.

chartArea.height number or string

auto Chart area height.

colors Array of

strings

default colors The colors to use for the chart elements. An array of strings, where

['red','#004411'].

curveType string 'none' Controls the curve of the lines when the line width is not zero. Can

'none' - Straight lines without curve.

'function' - The angles of the line will be smoothed.

enableInteractivity boolean true Whether the chart throws user-based events or reacts to user based events (but will throw ready or error events),

fontSize number automatic The default font size, in pixels, of all text in the chart. You can fontName string 'Arial' The default font face for all text in the chart. You can override this hAxis Object null An object with members to configure various horizontal axis elements.

notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

hAxis.direction 1 or -1 1 The direction in which the values along the horizontal axis grow. hAxis.textPosition string 'out' Position of the horizontal axis text, relative to the chart area. hAxis.textStyle Object {color: 'black',

fontName: <global-font-name>, fontSize: <global-font-size>}

An object that specifies the horizontal axis text style. The object has

{color: <string>, fontName: <string>, fontSize: <number>}

The color can be any HTML color string, for example: hAxis.title string null hAxis property that specifies the title of the horizontal hAxis.titleTextStyle Object {color: 'black',

An object that specifies the horizontal axis title text style. The

(5)

hAxis.slantedText boolean automatic If true, draw the horizontal axis text at an angle, to help fit more behavior is to slant text if it cannot all fit when drawn upright. Notice

hAxis.textPosition is set to 'out' (which is the hAxis.slantedTextAngle number,

1—90

30 The angle of the horizontal axis text, if it's drawn slanted. Ignored chart decided to draw the text horizontally.

hAxis.maxAlternation number 2 Maximum number of levels of horizontal axis text. If axis text labels down in order to fit labels closer together. This value specifies the most can fit without overlapping.

hAxis.showTextEvery number automatic How many horizontal axis labels to show, where 1 means show every to show as many labels as possible without overlapping.

height number height of the containing element

Height of the chart, in pixels.

interpolateNulls boolean false Whether to guess the value of missing points. If true, it will guess will leave a break in the line at the unknown point.

legend string 'right' Position of the legend. Can be one of the following:

'right' - To the right of the chart.

'top' - Above the chart. 'bottom' - Below the chart.

'in' - Inside the chart, by the top left corner.

'none' - No legend is displayed.

legendTextStyle Object {color: 'black', fontName:

<global-font-name>, fontSize: <global-font-size>}

An object that specifies the legend text style. The object has this

The color can be any HTML color string, for example:

lineWidth number 2 Data line width in pixels. Use zero to hide all lines and show only

series property.

pointSize number 0 Diameter of displayed points in pixels. Use zero to hide all points. property.

reverseCategories boolean false If set to true, will draw series from right to left. The default is to

series Array of objects, or object with nested objects

{} An array of objects, each describing the format of the corresponding empty object {}. If a series or a value is not specified, the global value will

type - The type of marker for this series. Valid values

(columns). The default value is specified by the chart's

color - The color to use for this series. Specify a

targetAxisIndex - Which axis to assign this series to,

0; set to 1 to define a chart where different series are rendered default axis. You can define a different scale for different axes.

pointSize - Overrides the global pointSize lineWidth - Overrides the global lineWidth areaOpacity - Overrides the global

curveType - Overrides the global curveType

visibleInLegend - A boolean value, where true means should not. Default is true.

(6)

You can specify either an array of objects, each of which applies to each child has a numeric key indicating which series it applies to. For the first series as black and absent from the legend, and the fourth as red

series: [{color: 'black', visi series: {0:{color: 'black', vi

seriesType string 'line' The default line type for any series not specified in the

title string no title Text to display above the chart.

titlePosition string 'out' Where to place the chart title, compared to the chart area. Supported

in - Draw the title inside the chart area. out - Draw the title outside the chart area.

none - Omit the title.

titleTextStyle Object {color: 'black', fontName:

<global-font-name>, fontSize: <global-font-size>}

An object that specifies the title text style. The object has this

The color can be any HTML color string, for example: tooltipTextStyle Object {color: 'black',

An object that specifies the tooltip text style. The object has this

The color can be any HTML color string, for example:

vAxes Array of object, or object with child objects

null Specifies properties for individual vertical axes, if the chart has contain all the properties supported by vAxis

To specify a chart with multiple vertical axes, first define a new axis using vAxes. The following example assigns series 2 to the right

series:{2:{targetAxisIndex:1}},

This property can be either an object or an array: the object is a that it defines--this is the format shown above; the array is an array of notation is identical to the vAxis object shown above:

vAxes:[

{}, // Nothing specified for axis 0

{title:'Losses',textStyle:{color: 'red'}} // Axis 1 ]

vAxis Object null An object with members to configure various vertical axis elements. To notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

vAxis.baseline number automatic vAxis property that specifies the baseline for the lowest grid line, it will be rounded to the closest

(7)

vAxis.baselineColor number 'black' Specifies the color of the baseline for the vertical axis. Can be any vAxis.direction 1 or -1 1 The direction in which the values along the vertical axis grow. vAxis.format string auto A format string for numeric axis labels. This is a subset of the

"1,000%", "750%", and "50%" for values 10, 7.5, and 0.5. vAxis.gridlineColor string '#CCC' The color of the vertical gridlines inside the chart area. Specify a vAxis.logScale boolean false If true, makes the vertical axis a logarithmic scale Note: All values vAxis.textPosition string 'out' Position of the vertical axis text, relative to the chart area. vAxis.textStyle Object {color: 'black',

An object that specifies the vertical axis text style. The object has

The color can be any HTML color string, for example: vAxis.title string no title vAxis property that specifies a title for the vertical vAxis.titleTextStyle Object {color: 'black',

An object that specifies the vertical axis title text style. The object

The color can be any HTML color string, for example: vAxis.maxValue number automatic vAxis property that specifies the highest vertical axis

option value, or the highest data value, rounded up vAxis.minValue number automatic vAxis property that specifies the lowest vertical axis

option value, or the lowest data value, rounded down vAxis.viewWindowMode string 'pretty' if

vAxis.viewWindow

is null, 'explicit' otherwise

Specifies how to scale the vertical axis to render the values within

'pretty' - Scale the vertical values so that the maximum and minimum

the chart area.

'maximized' - Scale the vertical values so that the maximum and

'explicit' - Specify the top and bottom scale values of the chart

specify a vAxis.viewWindow object describing the maximum and vAxis.viewWindow Object null Specifies the maximum and minimum data values to show on the vertical

vAxis.viewWindowMode='explicit'

vAxis.viewWindow.max number 0 The maximum vertical data value to render. vAxis.viewWindow.min number 0 The minimum vertical data value to render. width number width of the containing

element

Width of the chart, in pixels.

Method Return Type Description

draw(data, none Draws the chart.

(8)

Google Code offered in: English - Español - 日本語 - 한국어 - Português - Pусский - 中文(简体) - 中文(繁體)

All code and data are processed and rendered in the browser. No data is sent to any server.

options)

getSelection() Array of selection elements

Standard getSelection() implementation. Selected elements are column and cell elements. Only one column or cell can be selected at a time by the user.

setSelection() none Standard setSelection() implementation, but supports selection of only one element. Treats every selection entry as a column or cell selection. Note that the label column cannot be selected.

Name Description Properties

error Fired when an error occurs when attempting to render the chart. id, message

onmouseover Fired when the user mouses over a bar, and passes in the row and column indexes of the corresponding cell.

row, column

onmouseout Fired when the user mouses away from a bar, and passes in the row and column indexes of the corresponding cell.

row, column

ready The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the draw method, and call them only after the event was fired

None

select Fired when the user clicks a series or legend. When a bar is selected, the corresponding cell in the data table is selected; when a legend is selected, the corresponding column in the data table is selected. To learn what has been selected, call getSelection().

None