Our Google Chart shortcodes let you embed interactive charts for displaying data from the Google Charts API.
[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', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
[/chart]
[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', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
[/chart]
[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]
[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', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
[/chart]
[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', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea','Rwanda', 'Average'],
['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]
[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', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', 1030, 540]
]);
[/chart]
[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]
[chart type="scatter" 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('number', 'Age');
data.addColumn('number', 'Weight');
data.addRows([
[8, 12],
[4, 5.5],
[11, 14],
[4, 4.5],
[3, 3.5],
[6.5, 7]
]);
[/chart]
