Line Charts

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

Chart Types

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

Syntax

cht=<chart_type>

Where is one of the following types:

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.

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.

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:

cht=lxy
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.

cht=lxy
chd=t:
  10,20,40,80,90,95,99|
  20,30,40,50,60,70,80|
  -1|
  5,10,22,35,85

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.

600 pixel wide chart with 40 data points (15 pixels per data point):

300 data points (2 pixel per data point):

600 data points (1 pixel per data point):

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

Series Colors

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[AA] hexadecimal format 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.

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.

chco=fdb45c,27c9c2,1869b7

The following 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 (orange).

chco=fdb45c,27c9c2

Line Styles

You can specify line thickness and solid/dashed style with the chls parameter. This parameter can only be used to style lines in line or radar charts; you cannot use it to style the line in a compound chart lines, unless the base type of the compound chart is a line chart.

Syntax

Separate multiple line styles by the pipe character (|); the first style applies to the first line, the second to the next, and so on. If you have fewer styles than lines, the default style is applied to all the unspecified lines.

chls=
  <line_1_thickness>,<opt_dash_length>,<opt_space_length>
    |...|
  <line_n_thickness>,<opt_dash_length>,<opt_space_length>

<line_1_thickness> Thickness of the line, in pixels.
<opt_dash_length>, <opt_space_length> [Optional] Used to define dashed grid lines. The first parameter is the length of each line dash, in pixels. The second parameter is the spacing between dashes, in pixels. For a solid line, specify neither value. If you only specify <opt_dash_length>, then <opt_space_length> will be set to <opt_dash_length>. Default is 1,0 (a solid line).

Examples

Here the dashed line is specified by 3,6,3 and the thicker, solid line is specified by 5:

chls=3,6,3|5

Now let's use various line thickness:

chls=4|2

Line Fills

You can fill the area below a data line with a solid color.

You can combine line fills with any other chm parameters using a pipe character ( | ) to separate the chm parameters.

Syntax

chm=
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>
    |...|
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>

<b_or_B> Whether to fill to the bottom of the chart, or just to the next lower line.
- B - Fill from <start_line_index> to the bottom of the chart. ~~<end_line_index> supports a special syntax to let you fill a segment of the chart. This is easiest if you have a chart with a single line that you want to fill.~~
- b - Fill between two lines in a multi-line chart. Start and end lines are indicated by <start_line_index> and <end_line_index>.
<color> An RRGGBB format hexadecimal number of the fill color
<start_line_index> The index of the line at which the fill starts. The first data series specified in chd has an index of zero (0), the second data series has an index of 1, and so on.
<end_line_index>
- Fill type 'b' - The line at which to stop the fill. This line must be below the current line.
- Fill type 'B' - One of the following choices:
  - any value - Any single number in this parameter is ignored, and the fill will go from the specified line to the base of the chart
  - start:end - To fill a vertical slice below the chart, specify start:end, where these are data point indices describing where to start and stop the fill. Both values are optional, and default to first_point:last_point. (See example below.)
<0> Reserved — must be zero.

Examples

The following example fills the entire area under the line.

chm=B,76A4FB,0,0,0

The following example has 3 series, 3 lines and 2 fills. First serie (0,1) has an orange color fill (#fdb45c), second serie (1,2) has a red color fill (#ff6e6e):

chd=s:cefhjkqwrlgYcfgc,QSSVXXdkfZUMRTUQ,HJJMOOUbVPKDHKLH
chm=b,fdb45c,0,1,0|b,ff6e6e,1,2,0

The following example fills 2 datasets with yellow (consumed) and grey (prevision) colors.

chd=a:1,2,3,4,5,6,7|1,2,3,4,5,6,7,8,9,10,11,12,13
chm=B,ffc107,0,0,0|B,cccccc,1,0,0