Google Charts - Google Visualization arraytoDataTable not recognizing a numeric value unless "treated"

Google Charts - Google Visualization arraytoDataTable not recognizing a numeric value unless "treated" - javascript

have a look at this JsFiddle.
I am trying to import a value from a form field, assign it to a variable and then pass it to google.visualization.arrayToDataTable.
But in both cases, even forcing the type: 'number' assignment as in this answer I always get some kind of error:
Case 1:
<form name="myForm">
<input type="number" name="tot_btc" id="tot_btc" value="250">
var points = document.forms.myForm.tot_btc.value;
var data = google.visualization.arrayToDataTable([
['Name', {label: 'Donuts eaten', type: 'number'}],
//['Name', 'Donuts eaten'],
['Michael' , points],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
I get this kind of error:
as you can see the value is acknowledged but the chart is not drawn: it's blank.
Case 2:
<form name="myForm">
<input type="number" name="tot_btc" id="tot_btc" value="250">
var data = google.visualization.arrayToDataTable([
//['Name', {label: 'Donuts eaten', type: 'number'}],
['Name', 'Donuts eaten'],
['Michael' , points],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
I remove the type: 'number' assignment and the number is not even recognised as such.
Case 3:
Now, have a look at this:
BUT if I take the number from the variable and perform any simple math operation, voila! The number is recognized AND the chart is drawn .. even without forcing the type: 'number' recognition:
Can someone explain this?
Thanks

although you have set the <input> as type number,
the value property will always return a string, here...
var points = document.forms.myForm.tot_btc.value;
from MDN - HTMLInputElement - Properties, you can see the property type = string...
value string: Returns / Sets the current value of the control.
it must be converted to an actual number,
before providing the value to arrayToDataTable
which is why performing math on the variable causes it to work.
to correct, parse the value to a number,
using either parseInt or parseFloat...
var points = parseFloat(document.forms.myForm.tot_btc.value);
see following working snippet...
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
// We omit "var" so that programmaticSlider is visible to changeRange.
var programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Donuts eaten',
'ui': {'labelStacking': 'vertical'}
}
});
// var points = document.forms["myForm"]["points"].value;
var points = parseFloat(document.forms.myForm.tot_btc.value);
var cazzo = 81;
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'programmatic_chart_div',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'value'
}
});
var data = google.visualization.arrayToDataTable([
// ['Name', {label: 'Donuts eaten', type: 'number'}],
['Name', 'Donuts eaten'],
['Michael' , points],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);
changeRange = function() {
programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
programmaticSlider.draw();
};
changeOptions = function() {
programmaticChart.setOption('is3D', true);
programmaticChart.draw();
};
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
<table class="columns">
<tr>
<td>
<div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
<form name="myForm">
<input type="number" name="tot_btc" id="tot_btc" value="2">
<input type="range" onmousedown="return showInput()" onmouseup="return showInput()" name="points" min="0" max="10">
</form>
<div>
<button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
Select range [2, 5]
</button><br />
<button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
Make the pie chart 3D
</button>
</div>
<script type="text/javascript">
function changeRange() {
programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
programmaticSlider.draw();
}
function changeOptions() {
programmaticChart.setOption('is3D', true);
programmaticChart.draw();
}
</script>
</td>
<td>
<div id="programmatic_chart_div"></div>
</td>
</tr>
</table>
</div>

Related

Google Visualization - On event table sort, keep specific row as first visible record?

When a user clicks the header to sort I want the row labeled "Grand Total" to stay as the first row visible.
I can catch the table sort event as follows:
google.visualization.events.addListener(table.getChart(), 'sort', function() {
console.log('User clicked to sort.');
};
But I don't know what to do in order to move the total row back to the first record.
How can I achieve this? I appreciate your hints.
Working Example: (starter code)
google.charts.load('current', {
'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
});
$(document).ready(function() {
renderChart_onPageLoad();
});
function renderChart_onPageLoad() {
google.charts.setOnLoadCallback(function() {
drawDashboard();
});
}
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
['Name', 'RoolNumber', 'Gender', 'Age', 'Donuts eaten'],
['Michael', 1, 'Male', 12, 5],
['Elisa', 2, 'Female', 20, 7],
['Robert', 3, 'Male', 7, 3],
['John', 4, 'Male', 54, 2],
['Jessica', 5, 'Female', 22, 6],
['Aaron', 6, 'Male', 3, 1],
['Margareth', 7, 'Female', 42, 8],
['Miranda', 8, 'Female', 33, 6]
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var categoryPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'categoryPicker',
options: {
filterColumnLabel: 'Gender',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false
}
}
});
var proxyTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'proxyTable',
options: {
width: '500px'
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table',
options: {
width: '500px'
}
});
dashboard.bind([categoryPicker], [proxyTable]);
dashboard.draw(data);
google.visualization.events.addListener(dashboard, 'ready', function() {
redrawChart();
});
function redrawChart() {
var sourceData = proxyTable.getDataTable();
var dataResults = sourceData.toDataTable().clone();
var group = google.visualization.data.group(sourceData, [{
// we need a key column to group on, but since we want all rows grouped into 1,
// then it needs a constant value
column: 0,
type: 'number',
modifier: function() {
return 1;
}
}], [{
column: 1,
id: 'SumRool',
label: 'SumRool',
type: 'number',
aggregation: google.visualization.data.sum
}, {
column: 3,
id: 'SumAge',
label: 'SumAge',
type: 'number',
aggregation: google.visualization.data.sum
}, {
// get the average age
column: 4,
id: 'SumEaten',
label: 'SumEaten',
type: 'number',
aggregation: google.visualization.data.sum
}]);
dataResults.insertRows(0, [
['Grand Total', group.getValue(0, 1), null, group.getValue(0, 2), group.getValue(0, 3)],
]);
//Set dataTable
table.setDataTable(dataResults);
table.draw();
// table sort event
google.visualization.events.addListener(table.getChart(), 'sort', function() {
console.log('User clicked header to sort.');
//When a user clicks the header and resorts the table I want the row labeled "Grand Total" to stay as the first row visible.
});
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="categoryPicker"></div><br />
<div id="proxyTable" style='display:none;'></div>
<div id="table"></div><br /><br />
</div>

in order to accomplish, we will need to manually control the sort order.
first, set the sort option on the table chart.
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table',
options: {
sort: 'event', // <-- set sort to 'event'
width: '500px'
}
});
next, we need to assign event listeners before the chart is drawn.
first, we must wait for the wrapper to be ready,
then assign the sort event to the chart.
but we only want to do this one time, hence --> addOneTimeListener
google.visualization.events.addOneTimeListener(table, 'ready', function() {
google.visualization.events.addListener(table.getChart(), 'sort', function(sender) {
the sort event receives properties for which column and direction the sort occurred. (sender)
we'll use these properties to get the sorted rows from the data table.
afterwards, we find the index of the grand total row, remove it from the sort order,
then add it back as the first index.
// table sort event
google.visualization.events.addOneTimeListener(table, 'ready', function() {
google.visualization.events.addListener(table.getChart(), 'sort', function(sender) {
// sort data table according to sort properties
var tableData = table.getDataTable();
var sortIndexes = tableData.getSortedRows({column: sender.column, desc: !sender.ascending});
// find grand total row
var grandTotal = tableData.getFilteredRows([{
column: 0,
value: 'Grand Total'
}]);
if (grandTotal.length > 0) {
// find grand total in sort
var grandTotalSort = sortIndexes.indexOf(grandTotal[0]);
// remove grand total from sort
sortIndexes.splice(grandTotalSort, 1);
// add grand total as first index
sortIndexes.unshift(grandTotal[0]);
// set table sort arrow
table.setOption('sortAscending', sender.ascending);
table.setOption('sortColumn', sender.column);
// set table view
table.setView({rows: sortIndexes});
// re-draw table
table.draw();
}
});
});
see following working snippet...
google.charts.load('current', {
'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
});
$(document).ready(function() {
renderChart_onPageLoad();
});
function renderChart_onPageLoad() {
google.charts.setOnLoadCallback(function() {
drawDashboard();
});
}
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
['Name', 'RoolNumber', 'Gender', 'Age', 'Donuts eaten'],
['Michael', 1, 'Male', 12, 5],
['Elisa', 2, 'Female', 20, 7],
['Robert', 3, 'Male', 7, 3],
['John', 4, 'Male', 54, 2],
['Jessica', 5, 'Female', 22, 6],
['Aaron', 6, 'Male', 3, 1],
['Margareth', 7, 'Female', 42, 8],
['Miranda', 8, 'Female', 33, 6]
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var categoryPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'categoryPicker',
options: {
filterColumnLabel: 'Gender',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false
}
}
});
var proxyTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'proxyTable',
options: {
width: '500px'
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table',
options: {
sort: 'event',
width: '500px'
}
});
// table sort event
// Moved this listener to main drawDashboard() because having this in redrawChart() was adding a new listener every time someone filtered categoryPicker.
google.visualization.events.addOneTimeListener(table, 'ready', function() {
google.visualization.events.addListener(table.getChart(), 'sort', function(sender) {
// sort data table according to sort properties
var tableData = table.getDataTable();
var sortIndexes = tableData.getSortedRows({column: sender.column, desc: !sender.ascending});
// find grand total row
var grandTotal = tableData.getFilteredRows([{
column: 0,
value: 'Grand Total'
}]);
if (grandTotal.length > 0) {
// find grand total in sort
var grandTotalSort = sortIndexes.indexOf(grandTotal[0]);
// remove grand total from sort
sortIndexes.splice(grandTotalSort, 1);
// add grand total as first index
sortIndexes.unshift(grandTotal[0]);
// set table sort arrow
table.setOption('sortAscending', sender.ascending);
table.setOption('sortColumn', sender.column);
// set table view
table.setView({rows: sortIndexes});
// re-draw table
table.draw();
}
});
});
dashboard.bind([categoryPicker], [proxyTable]);
dashboard.draw(data);
google.visualization.events.addListener(dashboard, 'ready', function() {
redrawChart();
});
function redrawChart() {
var sourceData = proxyTable.getDataTable();
var dataResults = sourceData.toDataTable().clone();
var group = google.visualization.data.group(sourceData, [{
// we need a key column to group on, but since we want all rows grouped into 1,
// then it needs a constant value
column: 0,
type: 'number',
modifier: function() {
return 1;
}
}], [{
column: 1,
id: 'SumRool',
label: 'SumRool',
type: 'number',
aggregation: google.visualization.data.sum
}, {
column: 3,
id: 'SumAge',
label: 'SumAge',
type: 'number',
aggregation: google.visualization.data.sum
}, {
// get the average age
column: 4,
id: 'SumEaten',
label: 'SumEaten',
type: 'number',
aggregation: google.visualization.data.sum
}]);
dataResults.insertRows(0, [
['Grand Total', group.getValue(0, 1), null, group.getValue(0, 2), group.getValue(0, 3)],
]);
//Reset view to clear any user sorting initiated by event listener table.getChart(), 'sort'
table.setView(null);
//Set dataTable
table.setDataTable(dataResults);
table.draw();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="categoryPicker"></div><br />
<div id="proxyTable" style='display:none;'></div>
<div id="table"></div><br /><br />
</div>

Google Chart Slider and Filter

I have a data table, like this:
Department, Range, Value
One, 1, 6
One, 2, 7
Three, 3, 4
Two, 4, 3
Two, 5, 7
One, 6, 9
Three, 7, 2
where Department has values of (One,Two,Three) and Range starts 1,2,3,4,5,6,7... and Value is Random Value between 0,10 and so on...
How do I plot a google line graph X-Axis: Range | Y-Axis: Value, with Two Controls (Category Filter: Department, Range Filter: Range)
Here is my attempt so far: http://jsfiddle.net/x7pyk55q/2/
But looks X-Axis isn't the Range(1,2,3,4,5,6....)
and how Y-Axis has two values Department and the Value (I only want Value as Y-Axis)
html:
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<div id="dashboard_div">
<div id="filter_div"><!-- Controls renders here --></div>
<div id="control_div"><!-- Controls renders here --></div>
<div id="line_div"><!-- Line chart renders here --></div>
<div id="table_div"><!-- Table renders here --></div>
</div>
javascript:
google.load('visualization', '1', { packages : ['controls'] } );
google.setOnLoadCallback(createTable);
function createTable() {
// Create the dataset (DataTable)
var myData = new google.visualization.DataTable();
myData.addColumn('string', 'Department');
myData.addColumn('number', 'Pick Sequence');
myData.addColumn('number', 'Weight');
myData.addRows([
['Three', 1, 9],
['Three',2, 6],
['One',3, 8],
['Two',4, 4],
['Two',5, 3],
['Two',6, 9],
['Two',7, 6],
['One',8, 8],
['Two',9, 4],
['Three',10, 3],
['One',11, 9],
['Three',12, 6],
['Three',13, 8],
['Two',14, 4],
['One',15, 3],
['Two',16, 8],
['One',17, 4],
['One',18, 3],
['Three',19, 9],
['Two',20, 6]
]);
var dash_container = document.getElementById('dashboard_div'),
myDashboard = new google.visualization.Dashboard(dash_container);
var myDateSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_div',
'options': {
'filterColumnLabel': 'Pick Sequence'
}
});
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnIndex': 0,
'ui': {
'label': 'Department:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var myTable = new google.visualization.ChartWrapper({
'chartType' : 'Table',
'containerId' : 'table_div'
});
myDashboard.bind([myDateSlider, categoryPicker], myTable);
var myLine = new google.visualization.ChartWrapper({
'chartType' : 'LineChart',
'containerId' : 'line_div',
});
myDashboard.bind([myDateSlider, categoryPicker], myLine);
myDashboard.draw(myData);
}

Nevermind, I solved it myself.
add 'chartView': { 'columns': [1, 2] } to var myDateSlider
and add 'view': {'columns': [1, 2]} to var myLine
enter code here
http://jsfiddle.net/x7pyk55q/4/

Google visualisation ColumnChart data

Here i create an dashboard http://jsbin.com/OJAnaji/27/edit (googl visualisation ) based on this data:
data = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael' , 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
]);
and all works fine except ColumnChart becouse there I get error:
All series on a given axis must be of the same data type×
ColumnChart code:
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart3'
});
and draw function:
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker, stringFilter], [pie, table, wrapper]).
// Draw the entire dashboard.
draw(data, {'allowHtml':true, 'cssClassNames': 'cssClassNames'});
}
google.load('visualization', '1', {packages:['controls'], callback: drawVisualization});
and HTML:
<div class="col-md-4" style="float: left;" id="chart3"></div>
Is there any way for me to show (filter data) etc. column 'Name' on Y axis and 'Age' on X axis or column 'Name' on Y axis and 'Donuts eaten' on X axis ???
UPDATE: I was try this:
'view': {'columns': [0,3]}
but nothing happend

Did you specify the view in the wrapper?
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart3',
view: {
columns: [0,3]
}
});
Incidentally, passing a second parameter to the Dashboad#draw call won't do anything - it doesn't accept any options:
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker, stringFilter], [pie, table, wrapper]).
// Draw the entire dashboard.
draw(data);
Those should instead be passed as the options parameter in the appropriate ChartWrapper (likely a wrapper for a Table, given the specified options).

Google Charts API - Dashboard: use calculated columns in a table

I have a simple display panel shows Google and I want to add a calculated column in my DataView using SetColumn as shown in this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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 data = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael' , 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3,1,{
calc: mas,
type: 'number',
label: 'x10',
}])
function mas(view2,row) {
var a = view2.getValue(row,2)*10;
return a;
}
// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Age',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Gender',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'title': 'Donuts eaten per person',
'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, 3]}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker], [pie, table]).
// Draw the entire dashboard.
draw(view);
}
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>
</td>
</tr>
</table>
</div>
</body>
</html>
this code is based on another's in "Google Code Playground" and can be tested on the spot.
I am stucked with a problem, when I put setColumn(0,1,2,3,1, "the Calculated column") to allow the table show me these columns, the calculated column is not shown in the table, neither can be used in the PieChart to declare which columns are relevant for the chart.
How I can show a calculated column and use it in a dashboard?
Thanks in advance!

Multiple data sources as array in google charts dashboard api

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.
new google.visualization.Dashboard(document.getElementById('dashboard_alarms')).
new google.visualization.Dashboard(document.getElementById('dashboard_kpi')).
should be
new google.visualization.Dashboard(document.getElementById('dashboard_alarms'));
new google.visualization.Dashboard(document.getElementById('dashboard_kpi')).
(the "." should be a ";" at the end of the first line)
Also in the same two lines you refer to elements with id dashboard_alarms and dashboard_kpi but you don't have those elements in your html. You should add the tags
<div id="dashboard_alarms"/>
<div id="dashboard_kpi"/>
to 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.

I got the answer to my own question. needed to have to separate controls bound to each dashboard.
One can't share a control with two datasources for two dashboards.
just have a separate control and it all works.

We Keep Coding

JavaScript is the programming language of the Web.

Google Charts - Google Visualization arraytoDataTable not recognizing a numeric value unless "treated" - javascript

Related

Google Visualization - On event table sort, keep specific row as first visible record?

Google Chart Slider and Filter

Google visualisation ColumnChart data

Google Charts API - Dashboard: use calculated columns in a table

Multiple data sources as array in google charts dashboard api

Categories

Resources