passing chartrangefilter to another chart
268 views
Skip to first unread message
Mashandburn
May 31, 2012, 6:11:38 AM5/31/12
to Google Visualization API
I am a newbie to the visualization API, so appologies if this has been
covered. I couldn't find a thread exactly about what I am trying to
do. I am trying to use the chartrangefilter to use it to manipulate
multiple graphs. I have taken the ChartRangFilter Control Example,
and added a scatter plot of open and close stock prices. I had hoped
that using the slider would also change the scatter plot to show only
the points (high vs. low) during the selected date range. Any help is
appreciated.
<!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: ['corechart',
'controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'}
},
// Display a single series that shows the closing value
of the stock.
// Thus, this view has two columns: the date (axis) and
the stock value (line series).
'chartView': {
'columns': [0, 3]
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 =
86,400,000
'minRangeSize': 86400000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
'state': {'range': {'start': new Date(2012, 1, 9), 'end':
new Date(2012, 2, 20)}}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'CandlestickChart',
'containerId': 'chart',
'options': {
// Use the same chart area width as the control for axis
alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'hAxis': {'slantedText': false},
'vAxis': {'viewWindow': {'min': 0, 'max': 2000}},
'legend': {'position': 'none'}
},
});
//data table for time-dependent range selector
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Stock low');
data.addColumn('number', 'Stock open');
data.addColumn('number', 'Stock close');
data.addColumn('number', 'Stock high');
//data table for high vs low scatter plot
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'Stock open');
data2.addColumn('number', 'Stock close');
// Create random stock values, just like it works in reality.
var open, close = 300;
var low, high;
for (var day = 1; day < 121; ++day) {
var change = (Math.sin(day / 2.5 + Math.PI) +
Math.sin(day / 3) - Math.cos(day * 0.7)) * 150;
change = change >= 0 ? change + 10 : change - 10;
open = close;
close = Math.max(50, open + change);
low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) *
15;
low = Math.max(0, low);
high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) *
15;
var date = new Date(2012, 0 ,day);
data.addRow([date, Math.round(low), Math.round(open),
Math.round(close), Math.round(high)]);
data2.addRow([Math.round(open), Math.round(close)]);
}
// Create and draw the visualization for Open vs Close
stock price
var ac = new
google.visualization.ScatterChart(document.getElementById('visualization'));
ac.draw(data2, {
title : 'Open vs Close',
isStacked: true,
width: 915,
height: 400,
vAxis: {title: "Open"},
hAxis: {title: "Close"}
});
dashboard.bind(control, chart);
dashboard.draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 915px; height: 400px;"></
div>
<div id="dashboard">
<div id="chart" style='width: 915px; height: 300px;'></div>
<div id="control" style='width: 915px; height: 50px;'></div>
</div>
</body>
</html>
covered. I couldn't find a thread exactly about what I am trying to
do. I am trying to use the chartrangefilter to use it to manipulate
multiple graphs. I have taken the ChartRangFilter Control Example,
and added a scatter plot of open and close stock prices. I had hoped
that using the slider would also change the scatter plot to show only
the points (high vs. low) during the selected date range. Any help is
appreciated.
<!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: ['corechart',
'controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'}
},
// Display a single series that shows the closing value
of the stock.
// Thus, this view has two columns: the date (axis) and
the stock value (line series).
'chartView': {
'columns': [0, 3]
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 =
86,400,000
'minRangeSize': 86400000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
'state': {'range': {'start': new Date(2012, 1, 9), 'end':
new Date(2012, 2, 20)}}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'CandlestickChart',
'containerId': 'chart',
'options': {
// Use the same chart area width as the control for axis
alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'hAxis': {'slantedText': false},
'vAxis': {'viewWindow': {'min': 0, 'max': 2000}},
'legend': {'position': 'none'}
},
});
//data table for time-dependent range selector
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Stock low');
data.addColumn('number', 'Stock open');
data.addColumn('number', 'Stock close');
data.addColumn('number', 'Stock high');
//data table for high vs low scatter plot
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'Stock open');
data2.addColumn('number', 'Stock close');
// Create random stock values, just like it works in reality.
var open, close = 300;
var low, high;
for (var day = 1; day < 121; ++day) {
var change = (Math.sin(day / 2.5 + Math.PI) +
Math.sin(day / 3) - Math.cos(day * 0.7)) * 150;
change = change >= 0 ? change + 10 : change - 10;
open = close;
close = Math.max(50, open + change);
low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) *
15;
low = Math.max(0, low);
high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) *
15;
var date = new Date(2012, 0 ,day);
data.addRow([date, Math.round(low), Math.round(open),
Math.round(close), Math.round(high)]);
data2.addRow([Math.round(open), Math.round(close)]);
}
// Create and draw the visualization for Open vs Close
stock price
var ac = new
google.visualization.ScatterChart(document.getElementById('visualization'));
ac.draw(data2, {
title : 'Open vs Close',
isStacked: true,
width: 915,
height: 400,
vAxis: {title: "Open"},
hAxis: {title: "Close"}
});
dashboard.bind(control, chart);
dashboard.draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 915px; height: 400px;"></
div>
<div id="dashboard">
<div id="chart" style='width: 915px; height: 300px;'></div>
<div id="control" style='width: 915px; height: 50px;'></div>
</div>
</body>
</html>
asgallant
May 31, 2012, 9:45:57 AM5/31/12
to google-visua...@googlegroups.com
You need to do a few things:
1) throw away the second DataTable (data2)
2) create the ScatterChart as a ChartWrapper instead of a regular chart
3) use the 'view' option of the ScatterChart's ChartWrapper to restrict it to the opening and closing data columns (2 and 3) in the DataTable
4) bind the control to both of the charts
See the fixed code here:
http://jsfiddle.net/asgallant/t3S4Y/
Reply all
Reply to author
Forward
0 new messages