Image Charts (Deprecated)

Compound Charts

  

Overview

You can combine several chart types with line or candlestick markers to highlight data trends or show variance. When you add line or candlestick markers onto bar, scatter, or other chart types, the resulting chart is called a compound chart. Some compound charts look like a combination of two chart types—for instance, a bar chart with a tracking line:

Bar chart with tracking line

while others look like completely new chart types—for instance, a box chart:

box chart.

Creating a Compound Chart

All compound charts consist of one or more base chart types (line, scatter, bar, or radar) combined with one or more sets of markers. These markers require data to place them on the chart. Sometimes you can use the same data series as used to draw the bars or points on your chart, but typically you want the markers to have their own independent data sets. If you want your chart to have different data series for the base chart and for markers, you must hide the marker data from the base chart (so that it doesn't try to draw more bars or lines with that data). Here's how to do that:

  1. Add your marker data series to the end of your chd parameter. For example, if your bar chart had data chd=t:30,10,20, you could add new data for a line marker like this: chd=t:30,10,20|60,40,50.
  2. Hide your extra marker data from the base chart. If you simply add an extra data series to a bar chart for your tracking line, the chart would show that as a new series of bars. To prevent this, you must hide this extra series. To hide a series, include a single digit after the chd format descriptor: for example, chd=t1:30,10,20|60,40,50. This digit tells the Chart API how many data series to use to draw elements for that base chart type as defined by the cht parameter (bars for bar charts, data points for line charts, and so on). Any additional data series will be ignored by that chart type when drawing the chart. Note that this is a 1-based number, not 0-based. So t1 means "use only the first data series for bars," t2 means "use only the first two series for bars," etc.
    1. Notes:
      1. Scatter charts - Scatter charts hide data in a different way; see the documentation for more details.
      2. lxy line charts - Specify an even number of series to display (t0, t2, t4, etc). This is because each line in an lxy chart is described by two data series: one for x-values, and one for y-values.
  3. Use the hidden data series to draw candlestick markers, line markers, or other markers. How to draw markers is covered in the linked sections. Reference the hidden data series as the source for your markers. You can include as many additional hidden data series as you like, and use them for additional chart markers.

Here's the chart we just described:

Bar chart with line marker
cht=bvg
chd=t1:30,10,20|60,40,50
chm=D,0033FF,1,0,5,1

 

Chart Types

Here is a list of marker types, and the chart types that they can be used with:

Marker Type Base Chart Types That Support It
Line Line, Scatter, Bar, Radar
Candlestick Line, Bar
All others Line, Scatter, Bar, Radar

Here are some examples of the types of compound charts that you can create:

Chart Type Description Example
Line marker charts Line markers can be used to show trends in many other chart types. Bar chart with line markerBar chart with line marker
Candlestick charts Candlestick charts are often used to show financial data. Line chart with one orange line and four financial markers.
Box charts

Box charts are used to show data grouped into range quartiles.

Line chart with one orange line and four financial markers.
Embedded charts You can embed a chart within another chart. Embedded chart
Other markers You can hide marker data in any of the acceptable base chart types and use it with any other kinds of markers that you like.
chd=t1:
  10,20,30,40,50,60,70,80
  5,10,15,20,25,30,35,40,45,50
chm=o,000000,1,-1,5

Back to top

 

Line Marker Charts

You can add lines to line, scatter, bar, or radar charts to highlight trends.

Base Type + Marker Type Description Example
Bar + Line

Here is a bar chart with a trace line. The first two data series are used for the stacked bars, and the remaining series is used for the line. chd=s2 indicates that the chart should use only the first two series for bars. The line uses the third series for its data.

  • chd=s2:1XQbnf4,EWoQMUB,9halxp9 - Simple encoding, where the first two series are used to draw the bars, and the last series is used for the line.
  • chm=D,0033FF,2,0,5,1 - Trace line (D), blue, data from series index 2, all points (0), line is 5 pixels wide, and has a z-order of 1.
Bar chart with line marker
chm=
  D,0033FF,2,0,5,1
chd=s2:
  1XQbnf4,
  EWoQMUB,
  9halxp9
Scatter + Line You can add a line to a scatter chart to show averages. Note that scatter charts hide marker data in a different way; see Scatter Charts for more details.
chd=t:
  12,16,16,24,26,28,41,51,66,68,13,45,81|
  16,14,22,34,22,31,31,48,71,64,15,38,84
chm=
  o,0000FF,0,-1,0|
  o,FF0000,0,0:9:,5|
  D,000000,1,10:,1,-1
Bar + Line

Here is another stacked bar chart with an independent line drawn over it.

Bar chart with line marker
cht=bvs
chd=t2:
  0,10,20,30,20,70,80|
  0,20,10,5,20,30,10|
  10,0,20,15,60,40,30
chm=D,76A4FB,2,0,3
Bar + Circles Same as the previous chart, but with circle markers instead of a line marker. We've specified every 0.5 data value, which adds calculated intermediary points in the dotted line. Bar chart with line marker
cht=bvs
chd=t2:
  0,10,20,30,20,70,80|
  0,20,10,5,20,30,10|
  10,0,20,15,60,40,30
chm=o,76A4FB,2,-.5,10

Back to top

 

Candlestick Charts

Candlestick charts require at least four data series to draw the candlesticks, plus additional series for any other chart elements. Candlestick charts can show only a set of candlestick markers, or can be a combination of candlestick markers plus bar or line charts, as shown here:

Base Type + Marker Type Description Example
Line (hidden) + Candlestick

This example shows a chart showing only candlestick markers.

  • chd=t0 - The 0 means that all data series are hidden from the basic chart type (here, a line chart), so only the candlesticks are drawn. The first and last values in each series are -1 to indicate missing values to avoid drawing the first or last candlestick, which would overlap the axis or chart margin and be cut off.
  • chm=F,0000FF,0,-1,20 - The F indicates candlestick markers (originally "financial markers"); 0000FF means that the markers are blue when the value is decreasing; the 0 indicates that the candlestick data starts at series 0; -1 indicates markers on all points (we could have also specified 0:4 here to hide the first and last candlestick instead of using -1 data values); 20 is the width of the candlesticks.
Basic candlestick chart
cht=lc
chd=t0:
  -1,5,10,7,12,-1|
  -1,25,45,47,24,-1|
  -1,40,30,27,39,-1|
  -1,55,63,59,80,-1
chm=F,0000FF,0,-1,20
Line + Candlestick

Here's an example of a line chart with candlestick markers.

Five data series are provided; the first is used for the chart type (line), and the remaining "hidden" data series are used for the candlestick markers. The chd=t1 parameter specifies that only the first series is used for that chart type (line chart).

We omitted the first and last candlestick markers using 1:4 in the <which_points> value, because first and last candlesticks are cropped by the chart area borders.

The chm parameter specifies the candlestick markers, with the syntax F,<declining_color>,<data_series_index>,<which_points>,<width>,<order>

Line chart with one orange line and four financial markers.
cht=lc
chd=t1:
  20,10,15,25,17,30|
  0,5,10,7,12,6|
  35,25,45,47,24,46|
  15,40,30,27,39,54|
  70,55,63,59,80,6
chm=
  F,,1,1:4,20

Line + Candlestick

Another example of a candlestick chart, but with custom fill colors.

Bar chart with line marker
chd=t1:
t1:
  90,80,70,50,40,30,20,10|
  0,5,10,0,5,10,0|2,15,20,5,15,40,0|
  5,35,20,2,35,20,0|
  15,40,30,15,40,50,0
chm=
  F,000000,1,1:-2,20
Bar + Candlestick

Here is an example of a bar chart with candlestick markers.

We show the first and last candlestick markers here, because the bars add enough spacing to prevent them from being cropped by the chart boundaries.

Line chart with one orange line and four financial markers.
cht=bvg
chd=t1:
  20,10,15,25,17,30|
  0,5,10,7,12,6|
  35,25,45,47,24,46|
  15,40,30,27,39,54|
  70,55,63,59,80,6
chm=
  F,,1,1:4,20

Back to top

 

Box Charts

Box charts, also called box plots or box and whisker charts, are a type of chart that shows the grouping of one or more series into quartiles (quartiles are groups that span 25% of the range of values, with the possible exception of outliers). Box charts are similar to candlestick charts, but with added markers for the bottom and top of the candlestick, plus a 50th percentile marker.

A box chart is made up completely of markers, as shown here:

Candlestick marker
chm=
  F,0000FF,0,1,10
Candlestick marker
chm=
  H,0000FF,0,1,1:10|
  H,0000FF,3,1,1:10|
  H,0000FF,4,1,1:10
Candlestick marker
chm=
  o,FF0000,5,,5|
  o,FF0000,6,,5
Candlestick marker
One set of candlestick markers (chm=F), for the body of the boxes: One set of adjustable-length horizontal line shape markers (chm=H) for the minimum, 50th, and 100th percentile lines: Optionally some circle shape markers (chm=o) to show outliers in the data set. Put them all together, and you have a box chart!

The base chart type for box charts is any of the bar chart types (bhs, bvs, bhg, bvg) or line chart types (lc, ls, lxy). But if you are hiding the base chart type by adding a zero in the data format parameter (for example: chd=t0: or chd=s0:), it doesn't matter which chart type you choose.

A box chart must have at least five data series: four for the boxes and the maximum and minimum markers; one for the 50% marker; plus any additional data series for any additional markers that you might want, such as outlier markers. Here is the recommended series order. Note that if the value in series 1 is more than the corresponding value in series 2, the box will be filled with the chm=F marker color; if the value in series 1 is less than the value in series 2, the box will be unfilled. See Candlestick Markers for more information.

Series order for an unfilled box:

  1. Minimum value
  2. 25% marker (75% for a filled box)
  3. 75% marker (25% for a filled box)
  4. Maximum value
  5. 50% marker
  6. Series six and beyond are for any additional marker data, such as outliers.

You can actually put the additional marker series before or after the candlestick marker data, but it is simpler to put them all last.

You can make different styles of box charts by specifying different markers, different base chart types, or ordering the data differently

Description Example

This is a standard box chart, but with different colors assigned to the different chart elements to highlight which marker is being used to create each chart element.

  • cht=bvs - The base chart type is bvs, but no bars from this base chart are actually shown. We could have specified any compound chart type here.
  • chd=t0: - The t0 hides all lines in this line chart. All data will be used only for markers. In the data, the first and last values are -1 to avoid having markers that overlap the left and right edges of the chart. All values in the second series are lower than the corresponding values in the third series, so all boxes are unfilled.
    • -1,5,10,7,12,-1 - Minimum value: bottom point of lower orange sticks; also the height of the horizontal green lines.
    • -1,25,30,27,24,-1 - 25% value: bottom horizontal edge of orange boxes.
    • -1,40,45,47,39,-1 - 75% value: top horizontal edge of orange boxes.
    • -1,55,63,59,80,-1 - Maximum value: top point of upper orange sticks; also the height of the horizontal blue lines.
    • -1,30,40,35,30,-1 - Black horizontal "Median" lines inside the candlesticks.
    • -1,-1,5,70,90,-1 - Outlier data (red circles)
    • -1,-1,-1,80,5,-1 - More outliers data (red circles). The outliers data is broken into two sets because you cannot have two markers, one above the other, specified in the same series without using offsets or other complicated tricks.
  • chm= - Marker data, as described below:
    • F,FF9900,0,1:4,40 - Orange candlestick markers (F) using four data series starting at the first series (0), on points 1—4, size 40.
    • H,0CBF0B,0,1:4,1:20 - Green horizontal line markers showing the min value. These come from the first series.
    • H,0000FF,3,1:4,1:20 - Blue horizontal line markers showing the max value. These come from series 3.
    • H,000000,4,1:4,1:40 - Black horizontal line markers showing the 50% value. These come from series 4.
    • o,FF0000,5,-1,7 - Red circles assigned to the sixth data series for outliers. Markers are assigned to all elements in this series, which uses -1 for boxes without an outlier.
    • o,FF0000,6,-1,7 - More outliers. Another data series is required when you want to stack outliers on top of each other around the same box.

Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue

cht=bvs
chd=t0:
  -1,5,10,7,12,-1|
  -1,25,30,27,24,-1|
  -1,40,45,47,39,-1|
  -1,55,63,59,80,-1|
  -1,30,40,35,30,-1|
  -1,-1,5,70,90,-1|
  -1,-1,-1,80,5,-1
chm=
  F,FF9900,0,1:4,40|
  H,0CBF0B,0,1:4,1:20|
  H,000000,4,1:4,1:40|
  H,0000FF,3,1:4,1:20|
  o,FF0000,5,-1,7|
  o,FF0000,6,-1,7

The lc chart type will always show axis lines. To create a chart without axis lines, specify a chart type of ls.
Chart type lc shows borders
  cht=lc
Chart type ls doesn't show borders
   cht=ls
To create a filled box, make the point in the second series greater than the corresponding point in the third series. The larger value is marked in red in the code shown on the right. Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue
chd=t0:
  -1,5,10,7,12,-1
  -1,40,30,27,24,-1
  -1,25,45,47,39,-1
  -1,55,63,59,80,-1

Back to top

 

Embedded Charts

Pie chart embedded in a line chart

You can embed any chart type inside a bar, line, radar, or scatter chart using dynamic icons. See the Embedded Charts section of the Dynamic Icons (chem) marker documentation.

Back to top

 

Standard Features

The rest of the features on this page are standard chart features.

Chart Feature List

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.