Pie Chart
Code:
{
xtype: 'googlevisualizationcomponent',
visualizationType: 'PieChart',
visualizationConfig: {
width: 400,
height: 240,
is3D: true,
title: 'MyDailyActivities'
},
columns: [
['string', 'Task'],
['number', 'Hours per day']
],
data: [
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]
}
Intensity Map
Code:
{
xtype: 'googlevisualizationcomponent',
visualizationType: 'IntensityMap',
visualizationConfig: {
},
columns: [
['string', '', 'Country'],
['number', 'Population (mil)', 'a'],
['number', 'Area (km2)', 'b']
],
data: [
['CN', 1324, 9640821],
['IN', 1133, 3287263],
['US', 304, 9629091],
['ID', 232, 1904569],
['BR', 187, 8514877]
]
}
Gauge
Code:
{
xtype: 'googlevisualizationcomponent',
visualizationType: 'Gauge',
visualizationConfig: {
width: 400,
height: 120,
redFrom: 90,
redTo: 100,
yellowFrom: 75,
yellowTo: 90,
minorTicks: 5
},
columns: [
['string', 'Label'],
['number', 'Value']
],
data: [
['Memory', 80],
['CPU', 55],
['Network', 68]
]
}
MotionChart
Code:
{
xtype: 'googlevisualizationcomponent',
visualizationType: 'MotionChart',
visualizationConfig: {
width: 600,
height: 300
},
columns: [
['string', 'Department'],
['number', 'Year'],
['number', 'Sales'],
['number', 'Expenses']
],
data: [
['Dogs', 1995, 1000, 300],
['Cats', 1995, 950, 200],
['Dogs', 1996, 1200, 400],
['Cats', 1996, 900, 150],
['Dogs', 1997, 1250, 800],
['Cats', 1997, 200, 660]
]
}
Organization Chart
Code:
{
xtype: 'googlevisualizationcomponent',
visualizationType: 'OrgChart',
visualizationConfig: {
},
columns: [
['string', 'Name'],
['string', 'Manager']
],
data: [
['Mike'],
['Jim', 'Mike'],
['Alice', 'Mike'],
['Bob', 'Jim'],
['Carol', 'Bob']
]
}