Sum column in google viz DataTable dashboard - javascript

Here I have an simple demo: http://jsfiddle.net/36yve/
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
}
}
});
// 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(data);
}
​all works fine.
What I want to know?
How I can add row at the end of table to sum column [Age and Donuts eaten] and also to work when I use filters-controls ?
is there any solution for that problem?


You need to take the Table out of the Dashboard and create a "ready" event handler for the PieChart that grabs the data used by the chart, aggregates it to get the totals, builds a new DataTable including the totals, and draws the Table using the new data:
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
}
}
});
// 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'
}
});
google.visualization.events.addListener(pie, 'ready', function () {
var dt = pie.getDataTable().toDataTable();
var totals = google.visualization.data.group(dt, [{
type: 'number',
column: 0,
// make all values the same
modifier: function () {return 0;}
}], [{
type: 'number',
column: 2,
aggregation: google.visualization.data.sum
}, {
type: 'number',
column: 3,
aggregation: google.visualization.data.sum
}]);
dt.addRow(['Total', null, totals.getValue(0, 1), totals.getValue(0, 2)]);
table.setDataTable(dt);
table.draw();
});
// 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]).
// Draw the entire dashboard.
draw(data);
}
see example here: http://jsfiddle.net/asgallant/x8f7J/

Related

Google Chart - stacked chart one data two filters

Location Company GR1 GR2 GR3 GR4 GR5
1 NYC CUSTOMERS 0 0 13 5 19
2 CALI ORG 270 210 0 32 51
3 CALI CUSTOMERS 35.942 39 0 50 126
4 WDC CUSTOMERS 0 0 35 52 88
5 WDC CUSTOMERS 44.507 0 25 18 88
6 NJ ORG 0 0 54 22 28
7 TXS CUSTOMERS 0 0 0 10 11
Filter Location :
[NYC, CALI, WDC, NJ, TXS, UT, GA]
Filter Company :
[CUSTOMERS, ORG]
IN ColumnChart-STACKED for CALI and WDC it shows two columns. there i want to show as a single column of a cumulated value of both CUSTOMERS and ORG. but for table it s ok to show two CALI and WDC.
My Code
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart', 'table', 'gauge', 'controls']
}).then(function () {
drawMainDashboard();
});
function drawMainDashboard() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_division1'));
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div',
'options': {
'filterColumnIndex': 1,
'ui': {
'labelStacking': 'vertical',
'label': 'Company Selection:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div1',
'options': {
'filterColumnIndex': 0,
'ui': {
'labelStacking': 'vertical',
'label': 'Location Selection:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var columnchrt = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
title: "Locations charts today",
width: 850,
height: 500,
legend: { position: 'top', maxLines: 2 },
bar: { groupWidth: '70%' },
isStacked: true,
explorer: {keepInBounds: true, maxZoomIn: 10.0}
},
'view': {'columns': [0,2,3,4,5,7]}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
showRowNumber: true,
width: '100%',
height: '100%',
allowHtml: true
},
'view': {'columns': [0,1,2,3,4,5,6]}
});
var data = google.visualization.arrayToDataTable([
['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total', { role: 'annotation' } ],
<c:forEach items="${GrsByCompanyList}" var="entry">
[ '${entry.key}', '${entry.value7}', ${entry.value1}, ${entry.value2}, ${entry.value3}, ${entry.value4}, ${entry.value5}, ${entry.value6} ],
</c:forEach>
]);
dashboard.bind([categoryPicker,categoryPicker1], [columnchrt, table]);
dashboard.draw(data);
}
<div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;">
<div class="float_left panel" style="float:left; width:60%; padding:0px;">
<div id="chart_div"></div>
</div>
<div class="float_left panel" style="width:38%; padding:0px;">
<div class="table_bbar" style="background-color:#27ae60;" >
<h4>by Locations as on Today</h4>
<div id="categoryPicker_div" style="right:15px; position:absolute;"></div>
<div id="categoryPicker_div1" ></div>
</div>
<div id="table_div"></div>
</div>
</div>

the reason there are two columns for CALI and WDC,
is because there are two rows in the data table.
in order to have one column, you need to aggregate the data table on location.
this could be performed by removing the chart from the dashboard,
then draw it separately when the table chart's 'ready' event fires.
to do this, you need to remove the view from the column chart.
when the ready event fires, aggregate the data table.
you will also need to build a data view over the aggregated data table,
in order to add back the total annotation.
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'table', 'gauge', 'controls']
}).then(function () {
drawMainDashboard();
});
function drawMainDashboard() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_division1'));
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div',
'options': {
'filterColumnIndex': 1,
'ui': {
'labelStacking': 'vertical',
'label': 'Company Selection:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div1',
'options': {
'filterColumnIndex': 0,
'ui': {
'labelStacking': 'vertical',
'label': 'Location Selection:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var columnchrt = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
title: "Locations charts today",
width: 850,
height: 500,
legend: { position: 'top', maxLines: 2 },
bar: { groupWidth: '70%' },
isStacked: true,
explorer: {keepInBounds: true, maxZoomIn: 10.0}
}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
showRowNumber: true,
width: '100%',
height: '100%',
allowHtml: true
},
'view': {'columns': [0,1,2,3,4,5,6]}
});
google.visualization.events.addListener(table, 'ready', function () {
// get filtered data table from table chart
var dt = table.getDataTable();
// build aggregation and view columns
var aggColumns = [];
var viewColumns = [0];
for (var i = 2; i < dt.getNumberOfColumns(); i++) {
if (i !== dt.getNumberOfColumns() - 2) {
if (dt.getColumnType(i) === 'number') {
if (dt.getColumnRole(i) === 'annotation') {
addAnnColumn(i);
} else {
addAggColumn(i);
viewColumns.push(i - 1);
}
}
}
}
function addAggColumn(index) {
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index,
label: dt.getColumnLabel(index),
type: dt.getColumnType(index)
});
}
function addAnnColumn(index) {
viewColumns.push({
calc: 'stringify',
role: 'annotation',
sourceColumn: aggColumns.length,
type: 'string'
});
}
// aggregate data table
var agg = google.visualization.data.group(
dt,
[0],
aggColumns
);
// create agg data view to add annotation
var view = new google.visualization.DataView(agg);
view.setColumns(viewColumns);
// draw chart
columnchrt.setDataTable(view);
columnchrt.draw();
});
var data = google.visualization.arrayToDataTable([
['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total', { role: 'annotation' } ],
['NYC', 'CUSTOMERS', 0, 0, 13, 5, 19, 19],
['CALI', 'ORG', 270, 210, 0, 32, 51, 51],
['CALI', 'CUSTOMERS', 35.942, 39, 0, 50, 126, 126],
['WDC', 'CUSTOMERS', 0, 0, 35, 52, 88, 88],
['WDC', 'CUSTOMERS', 44.507, 0, 25, 18, 88, 88],
['NJ', 'ORG', 0, 0, 54, 22, 28, 28],
['TXS', 'CUSTOMERS', 0, 0, 0, 10, 11, 11]
]);
dashboard.bind([categoryPicker,categoryPicker1], [table]);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;">
<div class="float_left panel" style="float:left; width:60%; padding:0px;">
<div id="chart_div"></div>
</div>
<div class="float_left panel" style="width:38%; padding:0px;">
<div class="table_bbar" style="background-color:#27ae60;" >
<h4>by Locations as on Today</h4>
<div id="categoryPicker_div" style="right:15px; position:absolute;"></div>
<div id="categoryPicker_div1" ></div>
</div>
<div id="table_div"></div>
</div>
</div>
EDIT
in the annotation columns, we'll need to manually calculate the total...
viewColumns.push({
calc: function (dt, row) {
var total = 0;
for (var c = 1; c < dt.getNumberOfColumns(); c++) {
total += dt.getValue(row, c);
}
return total.toFixed(0);
},
role: 'annotation',
type: 'string'
});
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'table', 'gauge', 'controls']
}).then(function () {
drawMainDashboard();
});
function drawMainDashboard() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_division1'));
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div',
'options': {
'filterColumnIndex': 1,
'ui': {
'labelStacking': 'vertical',
'label': 'Company Selection:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div1',
'options': {
'filterColumnIndex': 0,
'ui': {
'labelStacking': 'vertical',
'label': 'Location Selection:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var columnchrt = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
title: "Locations charts today",
width: 850,
height: 500,
legend: { position: 'top', maxLines: 2 },
bar: { groupWidth: '70%' },
isStacked: true,
explorer: {keepInBounds: true, maxZoomIn: 10.0}
}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
showRowNumber: true,
width: '100%',
height: '100%',
allowHtml: true
},
'view': {'columns': [0,1,2,3,4,5,6]}
});
google.visualization.events.addListener(table, 'ready', function () {
// get filtered data table from table chart
var dt = table.getDataTable();
// build aggregation and view columns
var aggColumns = [];
var viewColumns = [0];
for (var i = 2; i < dt.getNumberOfColumns(); i++) {
if (i !== dt.getNumberOfColumns() - 2) {
if (dt.getColumnType(i) === 'number') {
if (dt.getColumnRole(i) !== 'annotation') {
addAggColumn(i);
viewColumns.push(i - 1);
}
}
}
}
function addAggColumn(index) {
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index,
label: dt.getColumnLabel(index),
type: dt.getColumnType(index)
});
}
// aggregate data table
var agg = google.visualization.data.group(
dt,
[0],
aggColumns
);
viewColumns.push({
calc: function (dt, row) {
var total = 0;
for (var c = 1; c < dt.getNumberOfColumns(); c++) {
total += dt.getValue(row, c);
}
return total.toFixed(0);
},
role: 'annotation',
type: 'string'
});
// create agg data view to add annotation
var view = new google.visualization.DataView(agg);
view.setColumns(viewColumns);
// draw chart
columnchrt.setDataTable(view);
columnchrt.draw();
});
var data = google.visualization.arrayToDataTable([
['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total', { role: 'annotation' } ],
['NYC', 'CUSTOMERS', 0, 0, 13, 5, 19, 19],
['CALI', 'ORG', 270, 210, 0, 32, 51, 51],
['CALI', 'CUSTOMERS', 35.942, 39, 0, 50, 126, 126],
['WDC', 'CUSTOMERS', 0, 0, 35, 52, 88, 88],
['WDC', 'CUSTOMERS', 44.507, 0, 25, 18, 88, 88],
['NJ', 'ORG', 0, 0, 54, 22, 28, 28],
['TXS', 'CUSTOMERS', 0, 0, 0, 10, 11, 11]
]);
dashboard.bind([categoryPicker,categoryPicker1], [table]);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;">
<div class="float_left panel" style="float:left; width:60%; padding:0px;">
<div id="chart_div"></div>
</div>
<div class="float_left panel" style="width:38%; padding:0px;">
<div class="table_bbar" style="background-color:#27ae60;" >
<h4>by Locations as on Today</h4>
<div id="categoryPicker_div" style="right:15px; position:absolute;"></div>
<div id="categoryPicker_div1" ></div>
</div>
<div id="table_div"></div>
</div>
</div>

How can I filter two charts with different ways to get data with the same string filter?

here's my code:
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'ID');
data.addColumn('string', 'Customer_Name');
data.addColumn('number', 'Credits');
data.addColumn('string', 'Date');
data.addColumn('string', 'Seller');
data.addColumn('string', 'Branch');
data.addRows([
[123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
[321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch2'],
[123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
[321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch4'],
[213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
]);
var groupedBranch = google.visualization.data.group(data, [5], [{
column: 0,
type: 'number',
label: data.getColumnLabel(0),
aggregation: google.visualization.data.count
}]);
var branchFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'div_filter1',
'options': {
'filterColumnLabel': 'Branch',
'matchType': ('any'),
'ui': {label: 'Branch filter', labelSeparator:':', labelStacking:'vertical'}
}
});
var branchChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'div_chart1',
'options': {
'animation':{duration:666, easing:'inAndOut', startup:true},
'backgroundColor': {fill:'transparent' },
'title': 'Branches',
'hAxis': {title: 'Branch', titleTextStyle: {color: '#999'}, textStyle : {fontSize: 12}},
'vAxis': {minValue: 0},
'colors': ['#f39c12'],
'legend': 'none'
}
});
var tableChart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'div_chart3',
'options': {
'animation':{duration:666, easing:'inAndOut', startup:true},
'backgroundColor': {fill:'transparent' },
'title': 'a',
'hAxis': {title: 'Loja', titleTextStyle: {color: '#999'}, slantedText:true, slantedTextAngle:74, textStyle : {fontSize: 12}},
'vAxis': {minValue: 0},
'colors': ['#f39c12'],
'legend': 'none'
}
});
And then below, the way that my dashboard is drawing (my problem).
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(branchFilter, [branchChart, tableChart]);
dashboard.draw(groupedBranch);
}
here is my point.
I want to draw the Column Chart based on my var groupedBranch data and the Table based on my var data,
both using the same branchFilter
Image exemples:
The way my dashboard is now
The table now
The table I need

dashboards will only work with one data table
in this case, draw each chart independently, on the filter's 'statechange' event
google.visualization.events.addListener(branchFilter, 'statechange', drawCharts);
when the event fires, use data table method getFilteredRows to build a view for each chart
you will have to manually account for the filter's matchType
var filterValue = branchFilter.getState().value;
viewBranch.rows = groupedBranch.getFilteredRows([{
column: 0,
test: function (value) {
// same as matchType: 'any'
return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
}
}]);
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'ID');
data.addColumn('string', 'Customer_Name');
data.addColumn('number', 'Credits');
data.addColumn('string', 'Date');
data.addColumn('string', 'Seller');
data.addColumn('string', 'Branch');
data.addRows([
[123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
[321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch2'],
[123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
[321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch4'],
[213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
]);
var groupedBranch = google.visualization.data.group(data, [5], [{
column: 0,
type: 'number',
label: data.getColumnLabel(0),
aggregation: google.visualization.data.count
}]);
var branchFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'div_filter1',
dataTable: groupedBranch,
options: {
filterColumnLabel: 'Branch',
matchType: 'any',
ui: {label: 'Branch filter', labelSeparator:':', labelStacking:'vertical'}
}
});
google.visualization.events.addListener(branchFilter, 'ready', drawCharts);
google.visualization.events.addListener(branchFilter, 'statechange', drawCharts);
var branchChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'div_chart1',
dataTable: groupedBranch,
options: {
animation: {duration: 666, easing: 'inAndOut', startup: true},
backgroundColor: {fill:'transparent' },
title: 'Branches',
hAxis: {title: 'Branch', titleTextStyle: {color: '#999'}, textStyle: {fontSize: 12}},
vAxis: {minValue: 0},
colors: ['#f39c12'],
legend: 'none'
}
});
var tableChart = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'div_chart3',
dataTable: data
});
branchFilter.draw();
function drawCharts() {
var filterValue = branchFilter.getState().value;
var viewBranch = {};
var viewTable = {};
if (filterValue !== '') {
viewBranch.rows = groupedBranch.getFilteredRows([{
column: 0,
test: function (value) {
return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
}
}]);
viewTable.rows = data.getFilteredRows([{
column: 5,
test: function (value) {
return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
}
}]);
}
branchChart.setView(viewBranch);
branchChart.draw();
tableChart.setView(viewTable);
tableChart.draw();
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_filter1"></div>
<div id="div_chart1"></div>
<div id="div_chart3"></div>

Google Charts Dashboard - "View" property on ChartWrapper not working

I'm trying to create a Google Charts dashboard with multiple charts all based on the same dataset. Different charts require different columns of the data, though, and every time I try to limit the columns in the ChartWrapper view, I get an error. Here's my code:
google.charts.load('current', {packages: ['corechart', 'bar', 'controls']});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
['Institution', 'Ineligible', 'Active', 'Closed With Outcome', 'Closed Outside Process', 'Closed Without Outcome',
'Eligibile'],
['CAC', 144, 35, 38, 4, 175, 115 ],
['SPF', 62, 2, 12, 1, 93, 4 ],
['CM', 69, 18, 10, 7, 64, 32 ],
['IP', 36, 4, 28, 24, 38, 62 ],
['EVM', 77, 7, 8, 2, 78, 19 ],
['RMC', 63, 5, 9, 1, 62, 18 ],
['MRI', 17, 5, 1, 5, 8, 3 ],
['IRM', 8, 0, 2, 1, 10, 5 ],
]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
var iamFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'iam_filter',
'options': {
'filterColumnLabel': 'IAM',
'ui': {
'caption': "Choose mechanisms",
'label': '',
'labelStacking': 'vertical',
'selectedValuesLayout': 'belowWrapping',
'cssClass': 'ChartControl',
}
},
});
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'id_outcomes',
'options': {
colors: ['#1b5869', '#42bb9a', '#bec3c7', '#9953b5', '#4c96da'],
animation: {
"startup": true,
duration: 1000,
easing: 'out',
},
legend: { position: 'right'},
bar: { groupWidth: '75%' },
isStacked: true,
},
'view': {'columns': [0,2,3]},
});
dashboard.bind(iamFilter, columnChart);
dashboard.draw(data);
}
In the above example, the error I get is:
Invalid column index 3. Should be an integer in the range [0-2].
But if I change it to 'view': {'columns': [0,2]}, the error I get is:
Invalid column index 2. Should be an integer in the range [0-1].
The view property works fine on the ControlWrapper, but I need it to work on the ChartWrapper, since a single ControlWrapper needs to filter data for multiple charts.
Any advice is much appreciated!

View property not working in Google Dashboard

Graph Code (Generated via C#)
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
['Group', 'Month', 'Count'],
['A', 1, 9],
['B', 1, 1],
['C', 1, 7],
['A', 2, 25],
['B', 2, 1],
['C', 2, 3]
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var slider = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Month',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'allowNone': false
}
}
});
var ColumnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
'legend': 'right',
// Relevant bit start //
'view': {
'columns': [0,2]
},
// Relevant bit END //
width: '100%',
height: '250',
vAxis: {
minValue: 0
}
}
});
// Rest of the code which executes comes after this
}
In my option property I've set view to use only Group and Count
'view': {
'columns': [0,2]
},
0 = first value in array i.e Group
2 = third value in array i.e Count
in this
['Group', 'Month', 'Count']
But in my graph it is counting month as a value too. I just want to use Month as a filter. I do not want to show month as a value in the graph.
I don't want the blue column there. Only red should be there.
Google Control Doc Reference here

view should be defined at the same level and separate from options
not within / as part of options
as such...
var ColumnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
'legend': 'right',
'width': '100%',
'height': 250,
'vAxis': {
'minValue': 0
}
},
'view': {
'columns': [0,2]
}
});
see following working snippet...
google.charts.load('current', {
'callback': function () {
var data = google.visualization.arrayToDataTable([
['Group', 'Month', 'Count'],
['A', 1, 9],
['B', 1, 1],
['C', 1, 7],
['A', 2, 25],
['B', 2, 1],
['C', 2, 3]
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var slider = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Month',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'allowNone': false
}
}
});
var ColumnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
'legend': 'right',
'width': '100%',
'height': 250,
'vAxis': {
'minValue': 0
}
},
'view': {
'columns': [0,2]
}
});
dashboard.bind(slider, ColumnChart);
dashboard.draw(data);
},
'packages': ['corechart', 'controls']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter_div"></div>
<div id="chart_div"></div>

Having trouble with getFilteredRows using Google Chart API dashboard

I'm putting together a dashboard and trying to do something that should be straight-forward. There will be Control Filters to operate at the dashboard level, but I also need to specify some additional filters (static, not through a control) to just a single table. The method for getFilteredRows seems to be the answer but it is not working.
I've mocked up the example that Google has in the Code Playground to try to get this to work. In this case, I'm trying to have the Pie chart only show those that are 20 years or older.
(link to Google Code Playground: http://code.google.com/apis/ajax/playground/?type=visualization#full_dashboard)
Code I'm trying:
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
}
}
});
// 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],
'rows': [
{
'calc': function(data) {
return data.getFilteredRows({column: 2, minValue: 20});
},
'type': 'number'
}]
}
});
// 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(data);
}
The only thing I've changed from the original example is adding to the 'view' section of the Pie Chart.
Anyone have any thoughts?

Couple of small changes:
* No need for 'calc' as it is used for creating new calculated columns.
* the format of the function requires array even for a single value.
'view': {'columns': [0, 3],
'rows' : data.getFilteredRows([{column: 2, minValue: 20}])}

Categories

Resources