I created a google chart dashboard with different data for each donut chart but only data_2 returns, instead of data_1 for the first chart <div> and data_2 for the second chart <div>. Source document for multi chart w/ different data requires separate functions, but is there a way to use two datasets in the first function drawStuff_1?
I ultimately want one dashboard, one ControlWrapper (one-to-many), multiple data sets (carlos, josh, etc.) and multiple donut charts (<div> for carlos, <div> for josh, whoever else).
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawStuff_1);
google.charts.setOnLoadCallback(drawStuff_2);
function drawStuff_1() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
programmaticFilter_1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'programmatic_control_div_1',
'options': {
'filterColumnLabel': 'Status',
'ui': {'labelStacking': 'vertical'}
}
});
// First dataset
var data_1 = new google.visualization.arrayToDataTable([
['Status', 'Count'],
['Dual Approved' , 5],
['Approved', 7],
['Review', 3],
['Draft', 2],
['Not In', 6],
['Edit Rerun', 1],
]);
programmaticChart_1 = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'programmatic_chart_div_1',
'options': {
'width': 290,
'height': 220,
'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
'pieSliceText': 'value', //percentage' 'value' 'label''none'
'pieHole': 0.4,
'legend': {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }},
'pieSliceBorderColor': 'Black',
'title': 'Josh',
}
});
dashboard.bind(programmaticFilter_1, programmaticChart_1);
dashboard.draw(data_1);
}
function drawStuff_2() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
// second dataset
var data_2 = new google.visualization.arrayToDataTable([
['Status', 'Count'],
['Dual Approved' , 1],
['Approved', 10],
['Review', 2],
['Draft', 9],
['Not In', 10],
['Edit Rerun', 4],
]);
programmaticChart_2 = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'programmatic_chart_div_2',
'options': {
'width': 250,
'height': 220,
'legend': 'none',
'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
'pieSliceText': 'value', //percentage' 'value' 'label''none'
'pieHole': 0.4,
'pieSliceBorderColor': 'Black',
'title': 'Carlos',
}
});
dashboard.bind(programmaticFilter_1, programmaticChart_2);
dashboard.draw(data_2);
}
</script>
<body>
<div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
<td>
<div id="programmatic_control_div_1" style="padding-left: 2em; min-width: 250px"></div>
</td>
<table class="columns">
<tr>
<td>
<div id="programmatic_chart_div_1"></div>
</td>
<td>
<div id="programmatic_chart_div_2"></div>
</td>
</tr>
</table>
</div>
</body>first, setOnLoadCallback should only be used once per page
but it's an easy work around, and you can include the callback directly in the load statement
google.charts.load('current', {
callback: drawStuff,
packages:['corechart', 'controls']
});
next, you can only have one dataset per Dashboard
however, you can use the view property on the ChartWrapper
to control which columns, or rows, apply to the chart
the view property is also available on the ControlWrapper
see following working snippet, which includes one dashboard, one control,
and two charts (one for each Carlos and Josh)
google.charts.load('current', {
callback: drawStuff,
packages:['corechart', 'controls']
});
function drawStuff() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div')
);
// Combined dataset
var data = new google.visualization.arrayToDataTable([
['Status', 'Carlos', 'Josh'],
['Dual Approved', 5, 1],
['Approved', 7, 10],
['Review', 3, 2],
['Draft', 2, 9],
['Not In', 6, 10],
['Edit Rerun', 1, 3]
]);
var programmaticFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control_div',
options: {
filterColumnLabel: 'Status',
ui: {
labelStacking: 'vertical'
}
}
});
var programmaticChart_Carlos = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart_div_Carlos',
options: {
width: 290,
height: 220,
chartArea: {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
pieSliceText: 'value',
pieHole: 0.4,
legend: {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }},
pieSliceBorderColor: 'Black'
},
view: {
columns: [0, 1]
}
});
programmaticChart_Carlos.setOption('title', 'Carlos');
var programmaticChart_Josh = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart_div_Josh',
options: {
width: 290,
height: 220,
chartArea: {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
pieSliceText: 'value',
pieHole: 0.4,
legend: {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }},
pieSliceBorderColor: 'Black'
},
view: {
columns: [0, 2]
}
});
programmaticChart_Josh.setOption('title', 'Josh');
dashboard.bind(
programmaticFilter,
[programmaticChart_Carlos, programmaticChart_Josh]
);
dashboard.draw(data);
}.ggl-dashboard {
border: 1px solid #ccc;
}
.ggl-control (
min-width: 250px;
padding-left: 2em;
)
.ggl-chart (
display: inline-block;
)<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="ggl-dashboard" id="dashboard_div">
<div class="ggl-control" id="control_div"></div>
<div class="ggl-chart" id="chart_div_Carlos"></div>
<div class="ggl-chart" id="chart_div_Josh"></div>
</div>