Visualization: Line Chart (Old Version)

Deprecated

This visualization has been replaced with a new version; please use that instead. For easy migration, please refer to the release notes page.

Overview
Example
Loading
Data Format
Configuration Options
Methods
Events
Data Policy

Overview

A line chart that is rendered within the browser using SVG or VML. Displays tips when clicking on points. Animates lines when clicking on legend entries.

By: Google

Example

Code it yourself on the Visualization Playground

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["linechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Loading

The google.load package name is "linechart"

  google.load("visualization", "1", {packages: ["linechart"]});

The visualization's class name is google.visualization.LineChart

  var visualization = new google.visualization.LineChart(container);

Data Format

The first column should be a string, and contain the category label. Any number of columns can follow, all must be numeric. Each column is displayed as a separate line.

Configuration Options

Name	Type	Default	Description
axisColor	string or Object	default color	The color of the axis. Possible values are as those of the backgroundColor configuration option.
axisBackgroundColor	string or Object	default color	The border around axis background. Possible values are as those of the backgroundColor configuration option.
axisFontSize	number	automatic	Font size of the chart axis text, in pixels.
backgroundColor	string or Object	default color	The background color for the main area of the chart. May be one of the following options: A string with color supported by HTML, for example 'red' or '#00cc00' An object with properties `stroke` `fill` and `strokeSize`. `stroke` and `fill` should be a string with a color. strokeSize is a number. For example: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`. To use just fill, without a stroke, use `stroke:null, strokeSize: 0`.
borderColor	string or Object	default color	The border around chart elements. Possible values are as those of the backgroundColor configuration option.
colors	Array of strings	Default colors	The colors to use for the chart elements. An array of strings. Each element is a string that is a color supported by HTML, for example 'red' or '#00cc00'.
enableTooltip	boolean	true	If set to true, tooltips are shown when the user clicks on a data point.
focusBorderColor	string or Object	default color	The border around chart elements that are in focus (pointed by the mouse). Possible values are as those of the backgroundColor configuration option.
height	number	Container's height	Height of the chart in pixels.
legend	string	'right'	Position and type of legend. Can be one of the following: 'right' - To the right of the chart. 'left' - To the left of the chart. 'top' - Above the chart. 'bottom' - Below the chart. 'none' - No legend is displayed.
legendBackgroundColor	string or Object	default color	The background color for the legend area of the chart. Possible values are as those of the backgroundColor configuration option.
legendFontSize	number	automatic	The size of the legend font, in pixels.
legendTextColor	string or Object	default color	The legend text color. Possible values are as those of the backgroundColor configuration option.
lineSize	number	2	Line width in pixels. Use zero to hide all lines and show only the points.
logScale	boolean	false	If true, the main axis should be scaled logarithmically.
max	number	automatic	Specifies the highest Y axis grid line. The actual grid line will be the greater of two values: the max option value, or the highest data value, rounded up to the next higher grid mark.
min	number	automatic	Specifies the lowest Y axis grid line. The actual grid line will be the lower of two values: the min option value, or the lowest data value, rounded down to the next lower grid mark.
pointSize	number	3	Size of displayed points in pixels. Use zero to hide all points.
reverseAxis	boolean	false	If set to true, will draw categories from right to left. The default is to draw left-to-right.
showCategories	boolean	true	If true, will show category labels. If false, will not.
smoothLine	boolean	false	If set to true, line angles will be smoothed.
title	string	no title	Text to display above the chart.
titleX	string	no title	Text to display below the horizontal axis.
titleY	string	no title	Text to display by the vertical axis.
titleColor	string or Object	default color	The color for the chart's title. Possible values are as those of the backgroundColor configuration option.
titleFontSize	number	automatic	The font size for the chart title, in pixels.
tooltipFontSize	number	11	The font size of the tooltip text. This might be reduced, if the tooltip is too small to hold the text in the specified font.
tooltipHeight	number	60	The height of the tooltip, in pixels. The tooltip height is fixed; it will never grow or shrink to fit the length or font size of the text. But anything greater than 1/3 the chart height will be cropped.
tooltipWidth	number	120	The width of the tooltip, in pixels. The tooltip width is fixed; it will never grow or shrink to fit the length or font size of the text. But anything greater than the chart width will be cropped.
width	number	Container's width	Width of the chart in pixels.

Methods

Method	Return Type	Description
`draw(data, options)`	none	Draws the chart.
`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
`onmouseover`	Fired when the user mouses over a point, and passes in the row and column indexes of the corresponding cell.	row, column
`onmouseout`	Fired when the user mouses away from a point, and passes in the row and column indexes of the corresponding cell.	row, column
`ready`	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	None
`select`	Fired when the user clicks a point or legend. When a point 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

Data Policy

All code and data are processed and rendered in the browser. No data is sent to any server.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.

Last updated October 11, 2013.

Google Charts