We Keep Coding

Google Charts - Sum of displayed columns with slider

I have produced a dashboard with a date slider that changes what is shown by the graph. I couldn't find a way to sum the total of the columns shown.
https://jsfiddle.net/2uktvcut/
google.charts.load('current', {
'packages': ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Date", "Total"],
[new Date("1/1/17"), 13],
[new Date("1/2/17"), 15],
[new Date("1/3/17"), 15],
[new Date("1/4/17"), 23],
[new Date("1/5/17"), 51],
[new Date("1/6/17"), 17],
[new Date("1/7/17"), 11],
[new Date("1/8/17"), 18],
[new Date("1/9/17"), 8],
[new Date("1/10/17"), 34],
[new Date("1/11/17"), 13],
[new Date("1/12/17"), 21]
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('marketingChartHolder'));
var dateSlider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'marketingChartControl',
'options': {
'filterColumnLabel': 'Date',
}
});
var stockChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'marketingChart',
options: {
theme: 'material',
legend: {
position: 'bottom',
},
focusTarget: 'category',
chartArea: {
width: '95%',
height: '90%',
},
width: $(document).width() * 0.98,
height: $(document).height() * .70,
vAxis: {
viewWindow: {
min: 0,
},
},
}
});
google.visualization.events.addListener(stockChart, 'ready', function() {
document.getElementById('png').innerHTML = '<button><a target="_blank" href="' + stockChart.getChart().getImageURI() + '">Get Image</a></button>';
var dt = stockChart.getDataTable();
console.log(dt);
});
dashboard.bind(dateSlider, stockChart);
dashboard.draw(data);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="marketingChartHolder">
<div id="marketingChartControl" style="width: 100%"></div>
<div id="marketingChart"></div>
<div id='png'></div>
<div id="totalHolder">
<p>
Placeholder
</p>
</div>
</div>
I think that I've made a start with stockChart.getDataTable() however I am unsure how to proceed.
After I get the value I plan to use jquery to change the value of the <p>.

you can use the group() method to aggregate the data
see the following working snippet...
google.charts.load('current', {
'packages': ['corechart', 'controls', 'table']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Date", "Total"],
[new Date("1/1/17"), 13],
[new Date("1/2/17"), 15],
[new Date("1/3/17"), 15],
[new Date("1/4/17"), 23],
[new Date("1/5/17"), 51],
[new Date("1/6/17"), 17],
[new Date("1/7/17"), 11],
[new Date("1/8/17"), 18],
[new Date("1/9/17"), 8],
[new Date("1/10/17"), 34],
[new Date("1/11/17"), 13],
[new Date("1/12/17"), 21]
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('marketingChartHolder'));
var dateSlider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'marketingChartControl',
'options': {
'filterColumnLabel': 'Date',
}
});
var stockChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'marketingChart',
options: {
theme: 'material',
legend: {
position: 'bottom',
},
focusTarget: 'category',
chartArea: {
width: '95%',
height: '90%',
},
width: $(document).width() * 0.98,
height: $(document).height() * .70,
vAxis: {
viewWindow: {
min: 0,
},
},
}
});
google.visualization.events.addListener(dateSlider, 'statechange', calcTotal);
google.visualization.events.addListener(stockChart, 'ready', function () {
document.getElementById('png').innerHTML = '<button><a target="_blank" href="' + stockChart.getChart().getImageURI() + '">Get Image</a></button>';
calcTotal();
});
function calcTotal() {
var dataTotal = google.visualization.data.group(
stockChart.getDataTable(),
[{column: 0, type: 'string', modifier: function () {return 'Total';}}],
[
{
aggregation: google.visualization.data.sum,
column: 1,
label: 'Total',
type: 'number'
}
]
);
var container = document.getElementById('totalHolder');
var table = new google.visualization.Table(container);
table.draw(dataTotal);
}
dashboard.bind(dateSlider, stockChart);
dashboard.draw(data);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="marketingChartHolder">
<div id="marketingChartControl" style="width: 100%"></div>
<div id="marketingChart"></div>
<div id='png'></div>
<div id="totalHolder"></div>
</div>

Google bubble charts: how to use explorer + animation

i'm trying to add an animation to my bubble chart, but if I add it the explorer function stops working.
javascript:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Score', 'Doc Count', 'Classification', 'Rules Matched'],
['foo', 0.29380098, 1, 1, 6],
['bar', 0.29226518, 1, 1, 6],
['poo', 0.24833801, 0, 0, 5]
]);
var options = {
hAxis: {title: 'Score'},
explorer: {
},
vAxis: {title: 'Document Count'},
bubble: {opacity: 0.5, textStyle: {color: 'transparent'}},
colors: ['green', 'red'],
colorAxis: {legend: {position: 'none'}},
fontSize: 12,
fontName: 'Source Sans Pro',
animation: {startup: true, duration: 2000}
};
var chart = new google.visualization.BubbleChart(document.getElementById('bubbles'));
chart.draw(data, options);
}
</script>
html:
<div id="bubbles" style="max-height: 450px; height: 450px; margin: auto;">
</div>
What am I doing wrong?
you can see the fiddle here: https://jsbin.com/tafiyafofu/edit?html,output

I'm not sure if are doing anything wrong, the documentation didn't mention that there is a conflict when you use both options.
But the exporer is marked as "experimental", so anything may happen.
Possible workaround: redraw the chart(without animation) when the animation has been finished:
var chart = new google.visualization.BubbleChart(document.getElementById('bubbles'));
google.visualization.events.addOneTimeListener(chart,'animationfinish',function(){
delete options.animation;
chart.draw(data, options);
});
chart.draw(data, options);

Google visualisation chart control - stringFilter

Here I have a very powerful google table with control: http://jsbin.com/IhEmetI/1/edit
and 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="//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]
]);
// 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
}
}
});
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'Name',
'ui': {'labelStacking': 'vertical'}
}
});
// 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], [stringFilter, table]).
// Draw the entire dashboard.
draw(data);
}
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>
<div id="control4"></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>
</td>
</tr>
</table>
</div>
</body>
</html>
​
but I can't show stringFilter, so to search column by Name ... what is problem with this code:
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'Name',
'ui': {'labelStacking': 'vertical'}
}
});
and HTML:
<div id="control3"></div>
So there is basic google visualisation table and control chart usage, and I need to filter column by name, but dont work. What is exactly problem?

Your call to Dashboard#bind is not formatted correctly. If you want to bind the control to both the PieChart and the Table, you need to specify it like this:
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// bind the NumberRangeFilter, CategoryFilter, and StringFilter to the PieChart and Table
bind([slider, categoryPicker, stringFilter], [pie, table]).
// Draw the entire dashboard.
draw(data);
If you want the StringFilter to control only the table, you need to specify it like this:
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// bind the NumberRangeFilter and CategoryFilter to the PieChart and Table
bind([slider, categoryPicker], [pie, table]).
// bind the StringFilter to the Table
bind([stringFilter], [table]).
// Draw the entire dashboard.
draw(data);
[Edit - code to properly set the cssClassNames option]
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart2',
options: {
cssClassNames: cssClassNames,
allowHtml: true
}
});

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.