What I have done?
I am building a dashboard with multiple data. The data are in form of arrays.
What i need to implement?
I have implemented the dashboard with the help of the tutorial but I am not able to implement another data source.
Here is my code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var data1 = google.visualization.arrayToDataTable([
['Name', 'Type', 'Precheck Alarms', 'Postcheck Alarms'],
['Michael' , 'Type1', 12, 5],
['Elisa', 'Type2', 20, 7],
['Robert', 'Type1', 7, 3],
['John', 'Type1', 54, 2],
['Jessica', 'Type2', 22, 6],
['Aaron', 'Type1', 3, 1],
['Margareth', 'Type2', 42, 8],
['Miranda', 'Type2', 33, 6]
]);
var data2 = google.visualization.arrayToDataTable([
['Name', 'Type', 'Precheck Alarms', 'Postcheck Alarms'],
['Michael' , 'Type1', 12, 5],
['Elisa', 'Type2', 20, 7],
['Robert', 'Type1', 7, 3],
['John', 'Type1', 54, 2],
['Jessica', 'Type2', 22, 6],
['Aaron', 'Type1', 3, 1],
['Margareth', 'Type2', 42, 8],
['Miranda', 'Type2', 33, 6]
]);
// Define a category picker control for the Type column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Type',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a Pie chart
var columns_alarms = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart1',
'options': {
'width': 600,
'height': 600,
'legend': 'none',
'title': 'Alarms',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
//'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
'view': {'columns': [0, 2,3]}
});
// Define a table
var table_alarms = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
var columns_kpi = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart4',
'options': {
'width': 600,
'height': 600,
'legend': 'none',
'title': 'Alarms',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
//'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
'view': {'columns': [0, 2,3]}
});
// Define a table
var table_kpi = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart5',
'options': {
'width': '300px'
}
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard_alarms')).
new google.visualization.Dashboard(document.getElementById('dashboard_kpi')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([categoryPicker], [columns_kpi, table_kpi,columns_alarms, table_alarms]).
// Draw the entire dashboard.
draw(data1);
draw(data2);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
<div style="float: left;" id="chart3"></div>
<div style="float: left;" id="chart4"></div>
<div style="float: left;" id="chart5"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
The above code renders WSD.
There are few mistakes in your code.
should be
(the “.” should be a “;” at the end of the first line)
Also in the same two lines you refer to elements with id
dashboard_alarmsanddashboard_kpibut you don’t have those elements in your html. You should add the tagsto your html.
You can use firebug to debug javascript code if you’re using Firefox. Goole chrome might have a javascrpt debugger as well. With a javascript debugger you can diagnose the reason for such problems.
A working example of the code is available at jsfiddle.