Visualization: Line Chart (Image)

Important: The Image Charts portion of Google Chart Tools has been officially deprecated as of April 20, 2012. It will continue to work as per our deprecation policy.

Overview
Example
Loading
Data Format
Configuration Options
Methods
Events
Data Policy

Overview

A line chart that is rendered as an image using the Google Charts API.

Example

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagelinechart"]});
      google.charts.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.ImageLineChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Loading

The google.charts.load package name is "imagelinechart".

  google.charts.load('current', {packages: ['imagelinechart']});

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

  var visualization = new google.visualization.ImageLineChart(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
backgroundColor	string	'#FFFFFF' (white)	The background color for the chart in the Chart API color format.
colors	Array<string>	Auto	Use this to assign specific colors to each data series. Colors are specified in the Chart API color format. Color i is used for data column i, wrapping around to the beginning if there are more data columns than colors. If variations of a single color is acceptable for all series, use the `color` option instead.
enableEvents	boolean	false	Causes charts to throw user-triggered events such as click or mouse over. Supported only for specific chart types. See Events below.
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.
max	number	automatic	The maximal value to show in the Y axis.
min	number	automatic	The minimal value to show in the Y axis.
showAxisLines	boolean	true	If set to false, removes axis lines and labels.
showCategoryLabels	boolean	same as showAxisLines	If set to false, removes the labels of the categories (the X axis labels).
showValueLabels	boolean	same as showAxisLines	If set to false, removes the labels of the values (the Y axis labels).
title	string	no title	Text to display above the chart.
valueLabelsInterval	number	Auto	The interval at which to show value axis labels. For example, if `min` is 0, `max` is 100, and `valueLabelsInterval` is 20, the chart will show axis labels at (0, 20, 40, 60, 80 100).
width	number	Container's width	Width of the chart in pixels.

Methods

Method	Return Type	Description
`draw(data, options)`	none	Draws the chart.

Events

You can register to hear the events described on the Generic Image Chart page.

Data Policy

Please refer to the Chart API logging policy.