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
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:
|
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:
|
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.