Google Chart Slider and Filter - javascript

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/

Related

Removing the gap between the datapoints

Graph: Number of Persons v DateTime
2004-12-23 15:25:01,8
2004-12-23 15:26:01,5
2004-12-23 15:27:01,5
2004-12-23 15:28:01,4
2004-12-23 15:29:01,4
2004-12-24 10:30:01,13
2004-12-24 10:31:01,12
2004-12-24 10:32:01,12
2004-12-24 10:33:01,13
2004-12-24 10:34:01,13
2004-12-24 10:35:01,13
As we can see there is no data between 2004-12-23 15:29:01 and 2004-12-24 10:30:01 but still the Google Chart shows me a gap and connects the two datapoints when using LineChart. Also I avoid making the dates string as then I would get no yaxis markings, because of the huge date-time.
I am new to using Google Charts, can this be avoided?
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date-Time');
data.addColumn('number', ‘Available);
data.addRows(dataPoints);
console.log(data);
var options = {
title: ‘Availability',
legend: {position: 'bottom' },
hAxis: {
title: 'Time',
/*
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}*/
},
vAxis: {
title: 'Number of people available’
}
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
if you use string values, rather than date values, no gap will be displayed...
var dataPoints = [
['2004-12-23 15:25:01', 8],
['2004-12-23 15:26:01', 5],
['2004-12-23 15:27:01', 5],
...
also, here, needed to add more room at the bottom of the chart for the labels,
as well as increase the default height...
chartArea: {
bottom: 128
},
height: 400
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(drawBasic);
function drawBasic() {
var dataPoints = [
['2004-12-23 15:25:01', 8],
['2004-12-23 15:26:01', 5],
['2004-12-23 15:27:01', 5],
['2004-12-23 15:28:01', 4],
['2004-12-23 15:29:01', 4],
['2004-12-24 10:30:01', 13],
['2004-12-24 10:31:01', 12],
['2004-12-24 10:32:01', 12],
['2004-12-24 10:33:01', 13],
['2004-12-24 10:34:01', 13],
['2004-12-24 10:35:01', 13]
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date-Time');
data.addColumn('number', 'Available');
data.addRows(dataPoints);
var options = {
title: 'Availability',
legend: {position: 'bottom'},
hAxis: {
title: 'Time',
},
vAxis: {
title: 'Number of people available'
},
chartArea: {
bottom: 128
},
height: 400
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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

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>

Chart Range Filter for Google Charts LineChart

I am using Google Charts Line Charts, I am having some trouble binding it to a Chart Range Filter.
Here is what I have tried:
The containers:
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="control_div" style="width: 100%; height: 100%"></div>
<div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div>
</div>
The JS part:
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'daily_container_count_lineChart',
options: {
theme: 'maximized'
}
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0
}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind([control], [chart]);
dashboard.draw(data);
I get the following error in place of the dashboard in the webpage. No error in the console.
One or more participants failed to draw()
You called the draw() method with the wrong type of data rather than a DataTable or DataView
You called the draw() method with the wrong type of data rather than a DataTable or DataView
If I try to just draw a line graph without the chart Range filter like below, it works just fine with out any errors:
Drawing just a line graph without ChartRangeFilter:
var dailyContainerChart = new google.charts.Line(document.getElementById('daily_container_count_lineChart'));
dailyContainerChart.draw(data, {allowHtml: true, width: '100%', height: '100%'});
Loading the data:
var getDailyContainerLineData = function (sourceData)
{
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'VIC - STH CRT');
data.addColumn('number', 'NSW - MINTO');
data.addColumn('number', 'QLD - PINKENBA');
data.addColumn('number', 'WA - HAZELMERE');
for(k =1;k< sourceData.getNumberOfColumns();k++)
{
var rowData = new Array();
var rowStart = sourceData.getColumnLabel(k);
rowData.push(new Date(rowStart));
for(l =0;l<sourceData.getNumberOfRows()-1;l++) // we don't want the 'total' row from the daily container table
{
var test = sourceData.getValue(l, k);
if(typeof test === 'string')
{
var date = Date.parse(test);
rowData.push(date);
}
else
{
rowData.push(test);
}
}
data.addRow(rowData);
}
return data;
}
The data that is returned from above is used to draw the dashboard and and the LineGraph.
My questions is:
Why am I getting a wrong data type error when I try to draw the line graph with the ChartRangeFilter, but not when I draw only the line graph
Can I get the ChartRangeFiler to filter 2 graphs(a table and line graph) with different data sources at the same time ?
Cheers.
A dashboard accepts the same data format as a regular chart.
Building a DataTable from the sample data provided seems to draw just fine.
Didn't see the load statement, check to see that all the necessary packages are being loaded when drawing the dashboard.
As for second question...
Although you cannot bind a single control to more than one data source, you can use the 'statechange' event to control other sources.
See following example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'VIC - STH CRT');
data.addColumn('number', 'NSW - MINTO');
data.addColumn('number', 'QLD - PINKENBA');
data.addColumn('number', 'WA - HAZELMERE');
data.addRow([new Date('04/01/2001'), 3, 4, 7, 6]);
data.addRow([new Date('04/02/2001'), 0, 9, 8, 7]);
data.addRow([new Date('04/03/2001'), 9, 9, 0, 7]);
data.addRow([new Date('04/04/2001'), 5, 5, 5, 2]);
data.addRow([new Date('04/05/2001'), 6, 7, 1, 1]);
data.addRow([new Date('04/06/2001'), 4, 4, 1, 9]);
data.addRow([new Date('04/07/2001'), 4, 5, 9, 0]);
var dataOther = new google.visualization.DataTable();
dataOther.addColumn('date', 'Date');
dataOther.addColumn('number', 'HLS - FLORENCE');
dataOther.addColumn('number', 'FGT - GAY');
dataOther.addColumn('number', 'KNX - FULTON');
dataOther.addColumn('number', 'TN - VOLS');
dataOther.addRow([new Date('04/01/2001'), 1, 8, 5, 2]);
dataOther.addRow([new Date('04/02/2001'), 2, 9, 6, 3]);
dataOther.addRow([new Date('04/03/2001'), 3, 0, 7, 4]);
dataOther.addRow([new Date('04/04/2001'), 4, 1, 8, 5]);
dataOther.addRow([new Date('04/05/2001'), 5, 2, 9, 6]);
dataOther.addRow([new Date('04/06/2001'), 6, 3, 0, 7]);
dataOther.addRow([new Date('04/07/2001'), 7, 4, 1, 8]);
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'daily_container_count_lineChart',
options: {
theme: 'maximized'
}
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
dataTable: dataOther,
options: {
sortColumn: 1
}
});
google.visualization.events.addListener(control, 'statechange', function () {
var state = control.getState();
var view = new google.visualization.DataView(dataOther);
view.setRows(view.getFilteredRows([{column: 0, minValue: state.range.start, maxValue: state.range.end}]));
table.setDataTable(view);
table.draw();
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind([control], [chart]);
dashboard.draw(data);
table.draw();
},
packages: ['controls', 'corechart', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="control_div" style="width: 100%; height: 100%"></div>
<div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div>
</div>
<div id="table_div"></div>

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).

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.

Categories