Visualization: Sparkline (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

Single or multiple sparklines that are rendered with images using the Google Charts API. The images are contained in a HTML table.

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:["imagesparkline"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

        var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div'));

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

Loading

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

  google.charts.load("current", {packages: ["imagesparkline"]});

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

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

Data Format

Any number of columns. All columns should be numbers. Each column is displayed as a single sparkline.

Configuration Options

Name	Type	Default	Description
color	string		Specifies a color to use for all charts. A string in the format #rrggbb. For example: '#00cc00'. Used only if the `colors` option isn't specified.
colors	Array of strings	Default colors	The colors to use for the data columns. An array of strings where each element is a string in the format #rrggbb. For example: '#00cc00'. Color i is used for data column i. If the number of colors is smaller than the number of columns, then color selection will wrap around.
fill	boolean	false	If true, will fill the area below the line in color.
height	number	Container's height	Height of the images, in pixels.
labelPosition	string	none	The position of the labels. Supported values are 'none', 'left', 'right'.
max	Array of numbers	The maximum data value of each sparkline	The highest value for the data value range of each sparkline. The index in the array must match the column index in the DataTable. If all values are null, this will be the maximum value in the series.
min	Array of numbers	The minimum data value of each sparkline	The lowest value for the data value range of each sparkline. The index in the array must match the column index in the DataTable. If all values are null, this will be minimum value in the series.
showAxisLines	boolean	true	If true, axis lines are shown. If false, they are not, and the default for showValueLabels is false.
showValueLabels	boolean	true, except when showAxisLines is false.	If true, value axis labels are shown.
title	Array of strings	No titles are displayed	Titles to use for each sparkline.
width	number	Container's width	Width of the charts, in pixels.
layout	string	'v'	Vertical or horizontal layout: 'v' for vertical, 'h' for horizontal.

Methods

Method	Return Type	Description
`draw(data, options)`	none	Draws the chart.
`getSelection()`	Array of selection elements	Returns the indexes of the selected charts as an array of objects. Each object has a column property containing the column number of a selected sparkline. Can return more than one selected column.
`setSelection(selection)`	none	Selects the specified sparklines, and unselects any sparkline which is not specified. selection is an array of objects, each with a numeric `column` property, which is the index of the selected sparkline. see `setSelection()` for more information.

Events

Name	Description	Properties
select	Standard select event.	None

Data Policy

Please refer to the Chart API logging policy.