Image Charts (Deprecated)

Image Charts (Deprecated)

Line Charts

   

This document describes the various types of line charts that you can create using the Chart API.

Table of Contents

Chart-Specific Features

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

Standard Features

  1. Compound Charts
  2. Chart Title (chtt, chts)
  3. Chart Legend Text and Style (chdl, chdlp, chdls)
  4. Chart Margins (chma)
  5. 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)
  6. Background Fills (chf)
    1. Solid Fills (chf)
    2. Gradient Fills (chf)
    3. Striped Fills (chf)
  7. Grid Lines (chg)
  8. Line Styles (chls)
  9. Dynamic Markers (chem)
  10. Line Fills (chm)
  11. Shape Markers (chm)
  12. Text and Data Value Markers (chm)
  13. Range Markers (chm=r|R)
  14. Candlestick Markers (chm=F)
  15. Line Markers (chm=D)
  16. Data functions (chfd)

Chart Types (cht)

There are a variety of line charts that you can create. Specify a line chart with the following syntax:

Syntax

cht=<chart_type>

Where <chart_type> is one of the the following types:

Parameter Description Example

lc

A line chart where data points are spaced evenly along the x-axis. Axis lines are shown by default. To show values on the axis lines, you must specify chxt.

Chart with line in yellow
cht=lc
chd=t:40,60,60,45,47,75,70,72

ls

Similar to lc charts, but by default does not display axis lines. These are also known as sparklines.

Sparkline chart in blue
cht=ls
chd=t:27,25,60,31,25,39,25,
31,26,28,80,28,27,31,27,
29,26,35,70,25

lxy

Lets you specify both x- and y-coordinates for each point, rather just the y values.

To specify data points for lxy charts, you must specify series in multiples of two. The first series in each pair is the x coordinates for that line, and the second series is the corresponding y coordinates for that line. For example: 

chd=t:<line_1_x1>,<line_1_x2>,...|<line_1_y1>,<line_1_y2>,...|
      <line_2_x1>,<line_2_x2>,...|<line_2_y1>,<line_2_y2>,...

To space the data points evenly along the x-axis only, provide a single undefined value for the x set for that series. In this example, the red "Unicorns" line spaces the data points evenly along the x-axis. For more information about undefined values, see Data formats.

In this example, the "Ponies" line specifies exact x- and y-values for all points, and the "Unicorns" line spaces the values evenly along the x-axis.

Note: If you are creating a compound lxy chart, don't forget that you must show your data in multiples of two in the chd parameter. For example: chd=t0:to hide all lines, chd=t2: to draw one line, chd=t4: to draw two lines, and so on. If you specify chd=t1:, no lines will be drawn; if you specify chd=t3:, only one line will be drawn.

 Line chart with unevenly spaced data points and lines in red, green and dashed blue
cht=lxy
chd=t:
  10,20,40,80,90,95,99|
  20,30,40,50,60,70,80|
  -1|
  5,10,22,35,85

Back to top

Data Granularity

Take care not to overestimate the number of data points required for your line chart. For example, to show how popular chocolate ice cream was over the last ten years, aggregating search queries for each day would result in more than 3,600 values. It would not make any sense to plot a graph at this granularity. On a chart 1024 pixels wide, one data point would be about a quarter of a pixel. (Additionally, this would be too much data to pass in a URL). The following examples illustrate this point.

200 pixel wide chart with 40 data points (5 pixels per data point):

Yellow line chart: less easy to read as data points are less spread along the x-axis

80 data points (only 2.5 pixels per data point):

Yellow line chart: difficult to read as data points are very squashed along the x-axis

150 data points (only 1.3 pixels per data point):

Yellow line chart: very difficult to read as data points are very squashed along the x-axis

300 data points (less than 1 pixel per data point):

Yellow line chart: very difficult to read as data points are very squashed along the x-axis

Back to top

Series Colors chco

You can specify the colors of a specific series, or all series, using the chco parameter.

Syntax

chco=
<color_1>, ... <color_n>
<color>
An RRGGBB format hexadecimal number. Specify a single value to apply the same color to all series. Specify different colors for different series by adding color values separated by a comma. If you have fewer colors than you have series, the unspecified series will cycle through the specified colors from the beginning.

 

Examples

Description Example

When you specify a single color for each series, each series gets the color assigned. This example has three data series and three colors specified.

Line chart with one red, one blue, and one green line

chco=FF0000,00FF00,0000FF

This example also has three data series, but only two colors are specified. Because the color for the third series is unspecified, the third line is drawn using the first color (red).

Line chart with two red lines and one blue line

chco=FF0000,0000FF

Back to top

Compound Charts

You can add lines, candlesticks, and shape markers to a line chart to make a compound chart. See Compound Charts for more details.

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.