Image Charts (Deprecated)

Scatter Charts

   

This document describes how to create scatter charts using the Chart API.

Table of Contents

Chart-Specific Features

  1. Overview
  2. Chart Types (cht)
  3. Series Colors (chco)

Standard Features

  1. Chart Title (chtt, chts)
  2. Chart Legend Text and Style (chdl, chdlp, chdls)
  3. Chart Margins (chma)
  4. Axis Styles and Labels
    1. Visible Axes (chxt)
    2. Axis Range (chxr)
    3. Custom Axis Labels (chxl)
    4. Axis Label Positions (chxp)
    5. Axis Label Styles (chxs)
    6. Axis Tick Marks (chxtc)
  5. Background Fills (chf)
    1. Solid Fills (chf)
    2. Gradient Fills (chf)
    3. Striped fills (chf)
  6. Grid Lines (chg)
  7. Dynamic Markers (chem)
  8. Shape Markers (chm)
  9. Text and Data Value Markers (chm)
  10. Range Markers (chm=r|R)
  11. Line Markers (chm=D)
  12. Data functions (chfd)

Introduction

A scatter chart (or scatter plot) is a set of individual dots on a two-dimensional chart. You can optionally specify the size of the individual dots. A scatter plot can accept only one data series. Scatter charts are good for detecting groupings or patterns in many data points that have two variables (if you have only one variable, consider a line chart).

You must supply at least two data series: the first data series specifies x-coordinates, and the second data series specifies y-coordinates.

You can optionally supply a third series to specify individual point sizes. Without this series, all points will default to 10 pixels across.

Note that if you use chm to alter the shape or color of data points, points are scaled relative to the size provided in chm.

Chart Types (cht)

Specify a scatter chart with this syntax:

Syntax

cht=s
chd=<x_values>|<y_values>[|<optional_point_sizes>]
Description Example

The default marker for data points is a blue circle. To use a different color or shape, specify the shape markers by using the chm parameter as described in the rest of this section.

This chart varies the point size by including a third data series.

Scatter plot with default blue circle data points in different sizes as defined by a third data set
cht=s
chd=t:
  12,87,75,41,23,96,68,71,34,9|
  98,60,27,34,56,79,58,74,18,76|
  84,23,69,81,47,94,60,93,64,54

If you want to simulate multiple series through the use of colors, use the chco parameter to specify individual dot colors, and color your points appropriately to simulate two or more distinct series.

This chart has three data series: the first is the x-values, the second is the corresponding y-values, and the third is the corresponding point size.

The chco value specifies the color of points. When you use a pipe delimiter and have fewer colors than points, every nth point is given the corresponding nth color. Here, the first, third, fifth, etc points are red (FF0000) and the second, fourth, sixth, etc points are blue (0000FF).

The legend is assigned using the chdl parameter; legend entries are assigned to each color in turn.

Scatter plot with two series
chd=t:
  12,87,75,41,23,96,68,71,34,9|
  98,60,27,34,56,79,58,74,18,76|
  84,23,69,81,47,94,60,93,64,54
chco=
  FF0000|0000FF
chdl=
  Cats|Dogs

To vary the shape of the points, use shape markers. Shape markers behave slightly differently in scatter charts than in other charts, depending on their order in the chm parameter:

  • First position after chm - This is the default shape for all points. The only values respected in the first chm entry are size, color, and shape; all other values are ignored. For example, if you specify chm=d,FF0000,0,3,15 it will be applied to all points, although you specified only point 15.
  • Second and later positions after chm - Markers specified in the second and later postion behave the same as markers for all other chart types.

More tips on using shape markers:

  • If the first chm marker is not a data value (chm=N) or shape marker, the chart will use the built-in default shape described above.
  • The default marker type is applied to all markers first; next, all markers that apply to a point are applied in the order specified or the z-order specified (if any). Therefore, either list your markers in increasing size, so that later ones mask earlier ones, or else add an initial default marker with a size 0 to clear all visible default marker properties. If a lower marker is larger or has more corners than higher markers, you might see it peeking out behind your other markers.
  • When you use shape markers, the marker color overrides the chco parameter for the points; but the legend colors still use the chco parameter.
  • If you specify both a shape marker and a third data set, the specified marker size is scaled by the data value range. So, for example:
    chd=t:10,10,10|10,20,30|10,50,100
    chm=d,676767,0,4,30
    Here, the data scale is 0—100 (simple text format scale) and the marker size is specified as 30 (the last value in the chm parameter), so a data value of 100 means a 30-pixel marker, a size value of 50 means a 15-pixel marker, and so on.
Scatter plot with default blue circle data points in different sizes as defined by a third data set
chm=d,FF0000,0,-1,15
Set the default shape to diamond (d)

chm=
  d,676767,0,3,10|
  s,000000,0,15:,8

Default is diamond (d), marker index 15 and later are squares (s) overlaid on the diamonds.

chd=t:
  12,75,23,68,34,87,41,96,71,9|
  98,27,56,58,18,60,34,79,74,76
chco=FF0000|0000FF
chdl=Cats|Dogs
chm=
  o,FFFFFF,0,4,0|
  o,FF0000,0,0:4,8|
  d,0000FF,0,5:9,10

You can also add a line marker (chm=D) to connect some or all of the points in a scatter chart:

  • The first chm=N*x* marker displays the x-axis value of each data point.
  • The second and third chm=o and chm=s markers create the circles and squares
  • The fourth chm=D marker draws the line connecting the green squares. It specifies the color, series (0), points (3—8), line width (1), and z-order of the line.

chd=t:
  20,80,60,90,40,90,10,20|
  90,40,20,60,50,90,50,20
chm=
  N*x*,000000,0,,10|
  o,FF0000,0,0:2,10,-1|
  s,00FF00,0,3:8,10,-1|
  D,00000066,0,3:8,1,0

Here is how to create a trace line through your points without relying on visible points:

  • Specify your scatter points in your data:
    chd=t:
      12,16,16,24,26,28,41,51,66,68|
      16,14,22,34,22,31,31,48,71,64
  • Add the points that will describe your trace line to the end of your data (the last three points shown below):
    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
  • Add a masking marker to hide all your scatter points: chm=o,0000FF,0,-1,0 (point size zero makes all points invisible).
  • Add a marker to show all the scatter points except the trace line points (the last three data points): o,FF0000,0,0:9:,5
  • Finally, add a line marker, and attach it to the last three points in your data: D,000000,1,10:,1,-1 This is a black line 1 pixel wide, attached to data points 10 and beyond. We gave it -1 z-index to put it behind the scatter points.

Scatter charts can't be used as compound charts, so you can't add an extra series to describe your line.

You cannot specify a dashed line using this method, but you can specify line color and thickness.

Trace line with hidden points:

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

Back to top

 

Series Colors chco

Specify the color of the dots using the chco parameter. You can specify a single color for all points, a gradient, or colors for individual points.

Syntax

chco=<single_color>
  or
chco=<point_1_color>|...|<point_n_color>
  or
chco=<gradient_start>,...,<gradient_end> (only with third data series)
<color>
Color of the points, in RRGGBB hexadecimal format. There are a few different formats:
  • Specify a single color to apply to all points.
  • To apply individual colors to individual points, specify one color per dot, with a pipe delimiter.
  • If you specify individual dot colors but have fewer colors than dots, every nth point is given the corresponding nth color. This is the way to create a multiple series scatterchart.
  • To apply a color gradient, you must include a third data series (which determines point sizes). Include two or more colors separated by commas to apply a color gradient to points depending on the size of the dot.

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.