Charts

Shortcode Generator

Instead of typing out your shortcode you can also use our shortcode generator.   Learn More

Charts

The Google Charts API is pretty complex. It gives you the option of embedding interactive charts into your page which can be very useful in displaying various types of data for your readers.

Syntax:

[chart type="area" title="Our first area chart" width="390" height="280"]
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
[/chart]

Options:

type        // the type of chart you wish to use, available options:
            // area, bar, candlestick, column, combo, line, pie, scatter
title       // the title for your chart
height      // height of your chart
width       // width of your chart
extras      // various other options for your chart such as fonts and colors

Examples

As said before the Google charts are complex so you will need to do a bit of research on how to build your data. As you can see in the following image you specify your options in the beginning of the shortcode and your data goes in the middle.

// Here is the beginning of the shortcode where you would configure your options
// As you can see we are adding a label "Year" along the vertical axis of our area chart
[chart type="area" title="Our first area chart" width="390" height="280"
extras = "vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}"]]

// Here is your data to display inside the chart
// Your data will be different depending on what type of chart your using
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);

[/chart]

The data is going to look different depending on which type of chart your using. You can build your data and check to see how it displays with this tool, http://code.google.com/apis/ajax/playground/?type=visualization.

You can read more on the various chart types and how to use them on the Google docs,

Area: http://code.google.com/apis/chart/interactive/docs/gallery/areachart.html
Bar: http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html
Candlestick: http://code.google.com/apis/chart/interactive/docs/gallery/candlestickchart.html
Column: http://code.google.com/apis/chart/interactive/docs/gallery/columnchart.html
Combo: http://code.google.com/apis/chart/interactive/docs/gallery/combochart.html
Line: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html
Pie: http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html
Scatter: http://code.google.com/apis/chart/interactive/docs/gallery/scatterchart.html