Page 1 of 8 Google Chart Tools Home Docs FAQ Forum Terms Visualization: Combo Chart Overview Example Loading Data Format Configuration Options Methods Events Data Policy Overview 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 Example
Page 2 of 8 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="contenttype" 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: 400px;"></div> </body> </html>
Page 3 of 8 Loading 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. Data Format 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 Configuration Options Name Type Default Description areaopacity number, 0.0 1.0 0.3 The default opacity of the colored area under an area cha opacity for an individual series, set the areaopacity value axistitlesposition string 'out' Where to place the axis titles, compared to the chart area 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 an object with the following properties. backgroundcolor.stroke string '#666' The color of the chart border, as an HTML color string.
Page 4 of 8 backgroundcolor.strokewidth number 0 The border width, in pixels. backgroundcolor.fill string 'white' The chart fill color, as an HTML color string. legends). Two formats are supported: a number, or a num chartarea Object null An object with members to configure the placement and % 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 strin ['red','#004411']. curvetype string 'none' Controls the curve of the lines when the line width is not '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 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 fontname string 'Arial' The default font face for all text in the chart. You can ove haxis Object null An object with members to configure various horizontal a notation, as shown here: {title: 'Hello', titletextstyle: {colo haxis.direction 1 or -1 1 The direction in which the values along the horizontal axi haxis.textposition string 'out' Position of the horizontal axis text, relative to the chart ar haxis.textstyle Object {color: 'black', An object that specifies the horizontal axis text style. The {color: <string>, <string>, f 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. {color: <string>, <string>, f
Page 5 of 8 behavior is to slant text if it cannot all fit when drawn upri haxis.slantedtext boolean automatic If true, draw the horizontal axis text at an angle, to help fi 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. chart decided to draw the text horizontally. down in order to fit labels closer together. This value spe haxis.maxalternation number 2 Maximum number of levels of horizontal axis text. If axis can fit without overlapping. haxis.showtextevery number automatic How many horizontal axis labels to show, where 1 means 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 w 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', An object that specifies the legend text style. The object {color: <string>, <string>, f linewidth number 2 Data line width in pixels. Use zero to hide all lines and sh series property. pointsize number 0 Diameter of displayed points in pixels. Use zero to hide a property. reversecategories boolean false If set to true, will draw series from right to left. The defaul series Array of objects, or object with nested objects {} An array of objects, each describing the format of the cor empty object {}. If a series or a value is not specified, the type - The type of marker for this series. Valid va (columns). The default value is specified by the ch color - The color to use for this series. Specify a targetaxisindex - Which axis to assign this s 0; set to 1 to define a chart where different series a default axis. You can define a different scale for dif pointsize - Overrides the global pointsize linewidth - Overrides the global linewidth areaopacity - Overrides the global curvetype - Overrides the global curvetype visibleinlegend - A boolean value, where tr should not. Default is true.
Page 6 of 8 You can specify either an array of objects, each of which each child has a numeric key indicating which series it ap the first series as black and absent from the legend, and 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 in - Draw the title inside the chart area. out - Draw the title outside the chart area. none - Omit the title. titletextstyle Object {color: 'black', tooltiptextstyle Object {color: 'black', An object that specifies the title text style. The object has {color: <string>, <string>, f An object that specifies the tooltip text style. The object h {color: <string>, <string>, f vaxes Array of object, or object with child objects null Specifies properties for individual vertical axes, if the cha contain all the properties supported by vaxis To specify a chart with multiple vertical axes, first define using vaxes. The following example assigns series 2 to series:{2:{targetaxisindex:1}}, This property can be either an object or an array: the obje that it defines--this is the format shown above; the array i notation is identical to the vaxis object shown above: vaxes:[ {}, // Nothing specified for axis 0 {title:'losses',textstyle:{color: 'red'} ] vaxis Object null An object with members to configure various vertical axis notation, as shown here: {title: 'Hello', titletextstyle: {color vaxis.baseline number automatic vaxis property that specifies the baseline for the lowest grid line, it will be rounded to the closest
Page 7 of 8 vaxis.baselinecolor number 'black' Specifies the color of the baseline for the vertical axis. Ca vaxis.direction 1 or -1 1 The direction in which the values along the vertical axis g vaxis.format string auto A format string for numeric axis labels. This is a subset o "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. S vaxis.logscale boolean false If true, makes the vertical axis a logarithmic scale Note: A 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 ob {color: <string>, <string>, f 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. Th {color: <string>, <string>, f 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 valu 'pretty' - Scale the vertical values so that the maxim the chart area. 'maximized' - Scale the vertical values so that the m 'explicit' - Specify the top and bottom scale values specify a vaxis.viewwindow object describing vaxis.viewwindow Object null Specifies the maximum and minimum data values to sho 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. Methods Method Return Type Description draw(data, none Draws the chart.
Page 8 of 8 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. Events Name Description Properties error Fired when an error occurs when attempting to render the chart. id, message onmouseover onmouseout ready Fired when the user mouses over a bar, and passes in the row and column indexes of the corresponding cell. Fired when the user mouses away from a bar, and passes in the row and column indexes of the corresponding cell. 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 row, column row, column None select 日 中 All code and data are processed and rendered in the browser. No data is sent to any server. 2011 Google - Code Home - Site Terms of Service - Privacy Policy - Site Directory Google Code offered in: English - Español - - Português - Pусский - Data Policy 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 體 )