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

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.

Send feedback about...