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";
</style>
<script type="text/javascript" src="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"></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 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.
