ChartRangeFilter control to change the date range (X-axis) of multiple LineCharts with different data?
1,106 views
Skip to first unread message
steven winner
Jan 24, 2014, 4:04:01 PM1/24/14
to google-visua...@googlegroups.com
I am trying to setup a dashboard that will have multiple LineCharts that will represent different data, but will have the same X axis of Date objects. What I would like to do, is control all these different LineCharts with one ControlWrapper ChartRangeFilter, but I don’t see how you can tie the ControlWrapper to graphs with different data, since you pass the DataTable object that represents the LineChart’s data, to the draw() method of the dashboard, and not to the actual “dataTable” property of the ChartWrapper that represents each LineChart.
Is there a way to have a ControlWrapper interact with different LineCharts with different data sets, but still having the X axis (date range) in common?
Here is what I have so far, but can’t figure out how to get the second graph to be controlled by the ChartRangeFilter…
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript">
// data is in form of [year-dayOfYear, value]
// so ["2014-8", 1094] is January 8th, 2014 and has a value of 1094
var chart1_test_data = [
// ["Date", "registrations"],
["2014-8",1094],
["2014-9",86251],
["2014-10",76579],
["2014-11",75670],
["2014-12",68921],
["2014-13",60597],
["2014-14",65470],
["2014-15",65873],
["2014-16",71606],
["2014-17",83908],
["2014-18",68889],
["2014-19",72622],
["2014-20",66980],
["2014-21",60075],
["2014-22",73745]
];
var chart2_test_data = [
// ["Date", "registrations"],
["2014-8",2094],
["2014-9",36251],
["2014-10",66579],
["2014-11",35670],
["2014-12",18921],
["2014-13",50597],
["2014-14",45470],
["2014-15",35873],
["2014-16",41606],
["2014-17",23908],
["2014-18",58889],
["2014-19",42622],
["2014-20",36980],
["2014-21",20075],
["2014-22",63745]
];
</script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages : ['corechart', 'controls'] } );
google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
// need to massage chart1_test_data coming from php, so we can have a Date obj, instead of string date
var chart1_data = new google.visualization.DataTable();
chart1_data.addColumn('date', 'Date');
chart1_data.addColumn('number', 'registrations');
for (var i = 0; i < chart1_test_data.length; i++) {
var tmpArray = chart1_test_data[i][0].split("-");
var date = new Date(parseInt(tmpArray[0]), 0); // initialize a date in `year-01-01`
var dateData = new Date(date.setDate(parseInt(tmpArray[1]))); // add the number of days
chart1_data.addRow([ dateData, parseInt(chart1_test_data[i][1]) ]);
}
// need to massage chart2_test_data coming from php, so we can have a Date obj, instead of string date
var chart2_data = new google.visualization.DataTable();
chart2_data.addColumn('date', 'Date');
chart2_data.addColumn('number', 'registrations');
for (var i = 0; i < chart2_test_data.length; i++) {
var tmpArray = chart2_test_data[i][0].split("-");
var date = new Date(parseInt(tmpArray[0]), 0); // initialize a date in `year-01-01`
var dateData = new Date(date.setDate(parseInt(tmpArray[1]))); // add the number of days
chart2_data.addRow([ dateData, parseInt(chart2_test_data[i][1]) ]);
}
// Create a dashboard.
var myDashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
// Create a date range slider
var myDateSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_div',
'options': {
// Filter by the date axis.
'filterColumnLabel': 'Date',
'ui': {
'chartOptions': {
'height' : 60,
},
}
},
'state': {
'range': {
'start': new Date(2014, 0, 10),
'end' : new Date(2014, 0, 20)
}
}
});
// Line chart 1 that is hooked up to ChartRangeFilter control
var lineChart1 = new google.visualization.ChartWrapper({
'chartType' : 'LineChart',
'containerId' : 'line_chart1',
// 'dataTable' : chart1_data // this doesn't go here when using the dashboard apparently
});
// Line chart 2 that I would like to also hook up to ChartRangeFilter control
var lineChart2 = new google.visualization.ChartWrapper({
'chartType' : 'LineChart',
'containerId' : 'line_chart2',
'dataTable' : chart2_data // only putting this here so the chart has data
});
// Bind lineChart1 to the dashboard, and to the controls
myDashboard.bind(myDateSlider, lineChart1 ).draw(chart1_data);
// just drawing second chart so it shows up
lineChart2.draw();
/* would really like to be able to set the dataTable property for each graph and do something like this:
myDashboard.bind( myDateSlider, lineChart1 );
myDashboard.bind( myDateSlider, lineChart2 );
myDashboard.draw();
*/
}
</script>
</head>
<body>
<div id="dashboard_div">
<div id="control_div"></div>
<div id="line_chart1"></div>
<div id="line_chart2"></div>
</div>
</body>
</html>
asgallant
Jan 24, 2014, 5:03:44 PM1/24/14
to google-visua...@googlegroups.com
Combine your data into a single DataTable, with one column for your dates and two for your data series. Then in the ChartWrappers, use the "view" parameter to restrict the columns of data used by each. See an example based on your code here: http://jsfiddle.net/asgallant/F9Xu5/
steven winner
Jan 24, 2014, 5:08:35 PM1/24/14
to google-visua...@googlegroups.com
Thank you! That actually makes perfect sense. I finally found an example that had a hidden control and was setting the state of the hidden control via the statechange event, but it definitely seemed like a hack and was hoping that wasn't the only way to do it.
I really appreciate the quick response.
Reply all
Reply to author
Forward
0 new messages