Google Charts

Our Google Chart shortcodes let you embed interactive charts for displaying data from the Google Charts API.

Area Charts

[chart type=”area” width=”480″ height=”280″ extras = “vAxis: { textStyle: {color: ‘#000000’}}, hAxis: { textStyle: {color: ‘#000000’}}, legend:{ textStyle: {color: ‘black’}}, backgroundColor: ‘transparent'”]

var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Year’);
data.addColumn(‘number’, ‘Column1’);
data.addColumn(‘number’, ‘Column2’);
data.addRows([
[‘2004’, 1000, 400],
[‘2005’, 1170, 460],
[‘2006’, 660, 1120],
[‘2007’, 1030, 540] ]);

[/chart]

Bar Charts

[chart type=”bar” width=”480″ height=”280″ extras = “vAxis: { textStyle: {color: ‘#000000’}}, hAxis: { textStyle: {color: ‘#000000’}}, legend:{ textStyle: {color: ‘black’}}, backgroundColor: ‘transparent'”]

var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Year’);
data.addColumn(‘number’, ‘Column1’);
data.addColumn(‘number’, ‘Column2’);
data.addRows([
[‘2004’, 1000, 400],
[‘2005’, 1170, 460],
[‘2006’, 660, 1120],
[‘2007’, 1030, 540] ]);

[/chart]

Candlestick Charts

[chart type=”candlestick” width=”480″ height=”280″ extras = “vAxis: { textStyle: {color: ‘#000000’}}, hAxis: { textStyle: {color: ‘#000000′}}, legend:’none’, backgroundColor: ‘transparent'”]

var data = google.visualization.arrayToDataTable([
[‘Mon’, 20, 28, 38, 45],
[‘Tues’, 31, 38, 55, 66],
[‘Wed’, 50, 55, 77, 80],
[‘Thurs’, 50, 77, 66, 77],
[‘Fri’, 15, 66, 22, 68] ], true);

[/chart]

Column Charts

[chart type=”column” width=”480″ height=”280″ extras = “vAxis: { textStyle: {color: ‘#000000’}}, hAxis: { textStyle: {color: ‘#000000’}}, legend:{ textStyle: {color: ‘black’}}, backgroundColor: ‘transparent'”]

var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Year’);
data.addColumn(‘number’, ‘Column1’);
data.addColumn(‘number’, ‘Column2’);
data.addRows([
[‘2004’, 1000, 400],
[‘2005’, 1170, 460],
[‘2006’, 660, 1120],
[‘2007’, 1030, 540] ]);

[/chart]

Combo Charts

[chart type=”combo” width=”480″ height=”280″ extras = “vAxis: { textStyle: {color: ‘#000000’}}, hAxis: { textStyle: {color: ‘#000000’}}, legend:{ textStyle: {color: ‘black’}}, backgroundColor: ‘transparent'”]

var data = google.visualization.arrayToDataTable([
[‘Month’, ‘1’, ‘2’, ‘3’, ‘4’,’5′, ‘6’],
[‘2004/05’, 165, 938, 522, 998, 450, 614.6],
[‘2005/06’, 135, 1120, 599, 1268, 288, 682],
[‘2006/07’, 157, 1167, 587, 807, 397, 623],
[‘2007/08’, 139, 1110, 615, 968, 215, 609.4],
[‘2008/09’, 136, 691, 629, 1026, 366, 569.6] ]);

[/chart]

Line Charts

[chart type=”line” width=”480″ height=”280″ extras = “vAxis: { textStyle: {color: ‘#000000’}}, hAxis: { textStyle: {color: ‘#000000’}}, legend:{ textStyle: {color: ‘black’}}, backgroundColor: ‘transparent'”]

var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Year’);
data.addColumn(‘number’, ‘Column1’);
data.addColumn(‘number’, ‘Column2’);
data.addRows([
[‘2004’, 1000, 400],
[‘2005’, 1170, 460],
[‘2006’, 860, 580],
[‘2007’, 1030, 540] ]);

[/chart]

Pie Charts

[chart type=”pie” width=”480″ height=”280″ extras = “vAxis: { textStyle: {color: ‘#000000’}}, hAxis: { textStyle: {color: ‘#000000’}}, legend:{ textStyle: {color: ‘black’}}, backgroundColor: ‘transparent'”]

var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Task’);
data.addColumn(‘number’, ‘Hours per Day’);
data.addRows([
[‘Work’, 11],
[‘Eat’, 2],
[‘Commute’, 2],
[‘Watch TV’, 2],
[‘Sleep’, 7] ]);

[/chart]