What about using a
ChartRangeFilter<https://google-developers.appspot.com/chart/interactive/docs/gallery/controls#chartrangefilter>to
handle this for you?
On Saturday, April 21, 2012 2:32:08 PM UTC-4, A. Farber wrote:
>
> Hello fellow chart users,
>
> I have prepared a simple test case, demonstrating my problem and am
> probably missing a tiny bit, just few lines of code.
>
> I have a diagram representing wins and losses in a web game over the
> weeks.
>
> I.e. the vertical axis represents the game score and the horizontal
> axis represents numbers of weeks.
>
> My ajax script returns the data for 52 weeks, but I'd like to add a
> slider and allow users change the viewed number of weeks to any number
> between 12 and 52.
>
> Can anybody please advise me, how to modify the change function?
>
> $("#money_slider").slider({
> min: 12,
> max: 52,
> change: function(event, ui) {
> // XXX what to do here with
> // hAxis.viewWindow.min and .max?
> }
> });
>
> Below is my complete test case, just save it to an .html file and you
> will be able to try it in a browser:
>
> <!DOCTYPE HTML>
> <html>
> <style type="text/css">
> h3,p,div {
> text-align: center;
> }
>
> #slider {
> width: 700px;
> margin-left: auto;
> margin-right: auto;
> }
> </style>
> <style type="text/css" title="currentStyle">
> @import "https://ajax.googleapis.com/ajax/libs/jqueryui/1/
> themes/redmond/jquery-ui.css<https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css>";
>
>
> </style>
> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/
> libs/jquery/1/jquery.min.js<https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js>"></script>
>
>
> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/
> libs/jqueryui/1/jquery-ui.min.js<https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js>"></script>
>
>
> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/
> jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
> <script type="text/javascript" src="https://www.google.com/jsapi?
> autoload={'modules':[{'name':'visualization','version':'1','packages':
> ['corechart'],'language':'ru'}]}"></script>
> <script type="text/javascript">
>
> google.setOnLoadCallback(drawChart);
>
> $(function() {
> $('#slider').slider({
> disabled: true,
> range: 'min',
> min: 12,
> max: 52,
> change: function(event, ui) {
> // XXX what to do here with
> // hAxis.viewWindow.min and .max?
> }
> });
> });
>
> function drawChart() {
> var jsonData = '{"cols":[{"label":"Week
> number","type":"string"},{"label":"Week leader","type":"number"},
> {"label":"Your win","type":"number"},{"label":"Your
> loss","type":"number"}],"rows":[{"c":[{"v":"2011-33"},{"v":10671},{"v":
> 0},{"v":-3113}]},{"c":[{"v":"2011-34"},{"v":7975},{"v":0},
> {"v":-2113}]},{"c":[{"v":"2011-35"},{"v":11009},{"v":0},{"v":-2244}]},
> {"c":[{"v":"2011-36"},{"v":10679},{"v":0},{"v":-689}]},{"c":
> [{"v":"2011-37"},{"v":11197},{"v":305},{"v":0}]},{"c":[{"v":"2011-38"},
> {"v":6762},{"v":419},{"v":0}]},{"c":[{"v":"2011-39"},{"v":7823},{"v":
> 0},{"v":-1563}]},{"c":[{"v":"2011-40"},{"v":10171},{"v":1152},{"v":
> 0}]},{"c":[{"v":"2011-41"},{"v":9903},{"v":0},{"v":-1008}]},{"c":
> [{"v":"2011-42"},{"v":5940},{"v":0},{"v":-1332}]},{"c":
> [{"v":"2011-43"},{"v":7979},{"v":0},{"v":-593}]},{"c":[{"v":"2011-44"},
> {"v":7833},{"v":0},{"v":-653}]},{"c":[{"v":"2011-45"},{"v":9691},{"v":
> 0},{"v":-562}]},{"c":[{"v":"2011-46"},{"v":8836},{"v":0},{"v":-1686}]},
> {"c":[{"v":"2011-47"},{"v":10358},{"v":0},{"v":-2120}]},{"c":
> [{"v":"2011-48"},{"v":9956},{"v":0},{"v":-1353}]},{"c":
> [{"v":"2011-49"},{"v":8787},{"v":160},{"v":0}]},{"c":[{"v":"2011-50"},
> {"v":9590},{"v":0},{"v":0}]},{"c":[{"v":"2011-51"},{"v":8931},{"v":
> 887},{"v":0}]},{"c":[{"v":"2011-52"},{"v":8529},{"v":0},{"v":-1434}]},
> {"c":[{"v":"2012-01"},{"v":8680},{"v":0},{"v":-1416}]},{"c":
> [{"v":"2012-02"},{"v":9932},{"v":0},{"v":-169}]},{"c":[{"v":"2012-03"},
> {"v":8334},{"v":0},{"v":-3149}]},{"c":[{"v":"2012-04"},{"v":8077},{"v":
> 217},{"v":0}]},{"c":[{"v":"2012-05"},{"v":7788},{"v":0},{"v":-3683}]},
> {"c":[{"v":"2012-06"},{"v":10070},{"v":113},{"v":0}]},{"c":
> [{"v":"2012-07"},{"v":8318},{"v":1704},{"v":0}]},{"c":[{"v":"2012-08"},
> {"v":8208},{"v":0},{"v":-104}]},{"c":[{"v":"2012-09"},{"v":11561},{"v":
> 272},{"v":0}]},{"c":[{"v":"2012-10"},{"v":7797},{"v":0},{"v":0}]},{"c":
> [{"v":"2012-11"},{"v":9893},{"v":0},{"v":-90}]},{"c":[{"v":"2012-12"},
> {"v":9197},{"v":0},{"v":-191}]},{"c":[{"v":"2012-13"},{"v":7287},{"v":
> 651},{"v":0}]},{"c":[{"v":"2012-14"},{"v":7072},{"v":646},{"v":0}]},
> {"c":[{"v":"2012-15"},{"v":7183},{"v":0},{"v":-907}]},{"c":
> [{"v":"2012-16"},{"v":6021},{"v":0},{"v":-993}]}]}';
>
> var data = new google.visualization.DataTable(jsonData);
> var options = {
> width: 700,
> height: 500,
> legend: {position: 'top'},
> areaOpacity: 1.0,
> vAxis: {format: '$#'},
> hAxis: {title: 'Week number', titleTextStyle: {color:
> 'blue'}, slantedText: true},
> colors: ['CCFFCC', '66CC66', 'FF9999'],
> animation: {duration: 1000, easing: 'out'}
> };
>
> var chart = new
> google.visualization.SteppedAreaChart(document.getElementById('money'));
> google.visualization.events.addListener(chart, 'ready',
> function() {
> $('#slider').slider('enable');
> });
> chart.draw(data, options);
> }
> </script>
> </head>
>
> <body>
> <h3>Money</h3>
> <div id="money"></div>
> <div id="slider"></div>
> </body>
> </html>
>
> If you'd like to see a screenshot, it is here:
>
> http://stackoverflow.com/questions/10261302/using-jquery-slider-to-change-google-chart-viewwindow
>
>
> I've read the Google example at
> https://google-developers.appspot.com/chart/interactive/docs/animation
> but don't understand it yet.
>
> Thank you for any hints
> Alex
>
--
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/-/pefWisp-aZkJ.
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.
