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!
Related
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>
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>
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
}
});
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.
I'm trying to make a bar chart using Google Charts with dependent controls. The problem I am having concerns inputting the data in a format that is usable for my task.
Here is an example of the data I want to use:
'Option1heading', 'Option2heading', 'Option3heading', 'val1', 'val2', 'val3', 'val4', 'val5', 'val6'
'Row1val1', 'Row1val2', 'Row1val3', 1336060, 1538156, 1576579, 1600652, 1968113, 123345
'Row2val1', 'Row2val2', 'Row2val3', 400361, 366849, 440514, 434552, 393032, 234374
'Row3val1', 'Row3val2', 'Row3val3', 1001582, 1119450, 993360, 1004163, 979198, 578236
'Row4val1', 'Row4val2', 'Row4val3', 997974, 941795, 930593, 897127, 108087, 4893
The first row in this example contains the options that I want to filter on 'Option1heading', 'Option2heading' and 'Option3heading'. In reality these might be something like 'country', 'region', 'state'. The second row onwards then contains the data, 'Row1val1', 'Row1val2', 'Row1val3' being the filter information (e.g. 'France', 'North', 'Paris').
Following that, the 6 numeric values would be individual bars of data for that row. In the legend for this example these would equal 'val1' - 'val6' (as per the first row). In reality these might be things like 'population', 'Male', 'female', '0-10 years' etc.
Here is the code as it currently stands. It 'kind of' works but is not working correctly. Is this even possible and can anyone point me in the right direction in order to do it?
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.dump.js"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.load('visualization', '1.1', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
var data = new google.visualization.DataTable();
var raw_data = [['Option1', 'Option2', 'option3', 'val 1', 'val 2', 'val 3', 'val 4', 'val 5', 'val 6'],
['Ford', 's', 'm', 1336060, 1538156, 1576579, 1600652, 1968113, 123345],
['Citroen', 's', 'm', 400361, 366849, 440514, 434552, 393032, 234374],
['BMW', 's', 'm', 1001582, 1119450, 993360, 1004163, 979198, 578236],
['Toyota', 's', 'm', 997974, 941795, 930593, 897127, 108087, 4893]];
var my_rows = ['Row1', 'Row2', 'Row3', 'Row4', 'Row5', 'Row6'];
data.addColumn('string', 'Year');
for (var i = 0; i < raw_data.length; ++i) {
data.addColumn('number', raw_data[i][0]);
}
data.addRows(my_rows.length);
for (var j = 0; j < my_rows.length; ++j) {
data.setValue(j, 0, my_rows[j].toString());
}
for (var i = 1; i < raw_data.length; ++i) {
for (var j = 3; j < raw_data[i].length; ++j) {
data.setValue(j-3, i+1, raw_data[i][j]);
}
}
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var controlPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Ford',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
var controlPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Citroen',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
var controlPicker3 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'BMW',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart_div',
'options': {
'width': '100%',
'height': '100%',
'vAxis': {title: "Year"},
'hAxis': {title: "Cups"},
'fontSize': 14,
'chartArea': {top: 0, right: 0, bottom: 0, height:'100%', width:'70%'}
},
// Configure the barchart to use columns 2 (City) and 3 (Population)
});
google.visualization.events.addListener(dashboard, 'ready', function() {
// Dashboard redraw, have a look at how many rows the barChart is displaying
var numRows = barChart.getDataTable().getNumberOfRows();
var expectedHeight = (numRows * 60)+50;
if (parseInt(barChart.getOption('height'), 10) != expectedHeight) {
// Update the chart options and redraw just it
Div("chart_div", expectedHeight);
barChart.setOption('height', expectedHeight);
barChart.draw();
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(controlPicker1, controlPicker2);
dashboard.bind(controlPicker2, controlPicker3);
dashboard.bind(controlPicker3, barChart);
// Draw the dashboard.
dashboard.draw(data);
}
function Div(id,h) {
var div=document.getElementById(id);
h = (h) + "px";
var w=parseInt(div.style.width);
if($(this).width() >= 1200){
w = 1200 + "px";
}else{
w = ($(this).width()-30) + "px";
}
$(div).height(h);
$(div).width(w);
}
</script>
</head>
<style>
#chart_div { width: 1200px; height: 30000px; }
</style>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and visualization-->
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
<div id="chart_div"></div>
</div>
</body>
</html>
Many thanks in advance for any help you can provide.
The JSON data structure should be something like this:
{
"cols": [ {"id":"Col1", "label":"", "type":"date"} ],
"rows":
[
{ "c": [ {"v":"a"}, {"v":"Date(2010,10,6)"} ] },
{ "c": [ {"v":"b"}, {"v":"Date(2010,10,7)"} ] }
]
}
There's more info in the google.visualization.DataTable reference docs.