I have gotten this to work - however setting the initial state seems to be
an issue:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart',
'controls', 'motionchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Value');
data.addColumn('number', 'Year');
data.addColumn('number', 'Patient Count');
data.addColumn('number', 'Value Count');
data.addColumn('number', 'Value per Patient');
data.addRows([
// insert data here
['Tobacco Use',2004,41401,125839,3.04],
['Tobacco Use',2005,40204,126262,3.14],
['Tobacco Use',2006,38852,122190,3.15],
['Tobacco Use',2007,40325,136972,3.4],
['Tobacco Use',2008,42213,137113,3.25],
['Tobacco Use',2009,48059,188576,3.92],
['Tobacco Use',2010,49787,194346,3.9],
['Tobacco Use',2011,51411,215479,4.19],
['Service OP',2004,66076,601969,9.11],
['Service OP',2005,68121,654285,9.6],
['Service OP',2006,67197,688320,10.24],
['Service OP',2007,68544,691602,10.09],
['Service OP',2008,72031,711042,9.87],
['Service OP',2009,76653,766353,10],
['Service OP',2010,79025,797240,10.09],
['Service OP',2011,79752,839186,10.52],
['Service ER',2004,16783,32571,1.94],
['Service ER',2005,16785,32315,1.93],
['Service ER',2006,15899,30697,1.93],
['Service ER',2007,15959,31078,1.95],
['Service ER',2008,16356,32086,1.96],
['Service ER',2009,17655,34734,1.97],
['Service ER',2010,17487,34204,1.96],
['Service ER',2011,17576,33738,1.92],
['BMI',2004,30770,75245,2.45],
['BMI',2005,33946,89777,2.64],
['BMI',2006,37937,104375,2.75],
['BMI',2007,45073,134056,2.97],
['BMI',2008,53932,183162,3.4],
['BMI',2009,62303,217459,3.49],
['BMI',2010,65449,231372,3.54],
['BMI',2011,64889,240376,3.7],
['Blood Pressure',2004,63892,582330,9.11],
['Blood Pressure',2005,66156,602632,9.11],
['Blood Pressure',2006,65079,607740,9.34],
['Blood Pressure',2007,66171,616396,9.32],
['Blood Pressure',2008,69281,646406,9.33],
['Blood Pressure',2009,73667,700889,9.51],
['Blood Pressure',2010,75687,727682,9.61],
['Blood Pressure',2011,74141,726671,9.8],
]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
var locationPicker = new
google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'locationPicker_div',
'options': {
'filterColumnIndex': 0,
}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'MotionChart',
'containerId': 'chart_div',
'options': {width: 800, height:500}
});
dashboard.bind(locationPicker, chart);
dashboard.draw(data);
}
</script>
</head>
<body>
<div id="dashboard_div">
<div id="locationPicker_div"></div>
<div id="chart_div" style="width: 800px; height: 500px;"></div>
</div>
</body>
</html>
On Friday, December 9, 2011 2:22:59 PM UTC-5, rtrigg wrote:
>
> Hi all,
>
> I'm having trouble getting my motion chart to successfully bind to a
> controller in a dashboard. In the example below, I've taken the code
> from the MotionChart viz documentation and turned it into a dashboard
> with one controller. The page displays fine, but choosing an item
> from the category filter has no effect on the motion chart.
>
> Ideas?
>
> Thanks!
>
> - Randy
>
> <html>
> <head>
> <script type="text/javascript" src="https://www.google.com/
> jsapi"></script>
> <script type="text/javascript">
> google.load('visualization', '1', {'packages':['corechart',
> 'controls', 'motionchart']});
> google.setOnLoadCallback(drawChart);
> function drawChart() {
> var data = new google.visualization.DataTable();
> data.addColumn('string', 'Fruit');
> data.addColumn('date', 'Date');
> data.addColumn('number', 'Sales');
> data.addColumn('number', 'Expenses');
> data.addColumn('string', 'Location');
> data.addRows([
> ['Apples',new Date (1988,0,1),1000,300,'East'],
> ['Oranges',new Date (1988,0,1),1150,200,'West'],
> ['Bananas',new Date (1988,0,1),300,250,'West'],
> ['Apples',new Date (1989,6,1),1200,400,'East'],
> ['Oranges',new Date (1989,6,1),750,150,'West'],
> ['Bananas',new Date (1989,6,1),788,617,'West']
> ]);
>
> var dashboard = new google.visualization.Dashboard(
> document.getElementById('dashboard_div'));
>
> var locationPicker = new
> google.visualization.ControlWrapper({
> 'controlType': 'CategoryFilter',
> 'containerId': 'locationPicker_div',
> 'options': {
> 'filterColumnIndex': 4,
> }
> });
>
> var chart = new google.visualization.ChartWrapper({
> 'chartType': 'MotionChart',
> 'containerId': 'chart_div',
> 'options': {width: 600, height:300}
> });
>
> dashboard.bind(locationPicker, chart);
> dashboard.draw(data);
> }
> </script>
> </head>
>
> <body>
> <div id="dashboard_div">
> <div id="locationPicker_div"></div>
> <div id="chart_div" style="width: 600px; height: 300px;"></div>
> </div>
> </body>
> </html>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/7NugCqtTngIJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
