Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
76 lines (72 sloc) 2.68 KB
$def with (result_dictionary)
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(function() {drawRegionsMap(createArrayFromResults("$result_dictionary"))});
\$(function() {
\$( "#slider" ).slider({
value:1995,
min: 1995,
max: 2014,
step: 1,
slide: function( event, ui ) {
\$( "#amount" ).val(ui.value );
}
});
\$( "#amount" ).val(\$( "#slider" ).slider( "value" ));
var startPos = '\$("slider").slider("value");', endPos = '';
\$("#slider").on("slidestop", function(event, ui) {
endPos = ui.value;
if (startPos != endPos) {
\$.ajax({
type: "POST",
data: { year : endPos},
success: function(data) {
drawRegionsMap(createArrayFromResults("$result_dictionary"));
},
});
}
startPos = endPos;
});
});
function drawRegionsMap(datum) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Region');
data.addColumn('number', 'Average House Price');
data.addRows(datum);
var options = {
region: 'GB',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
function createArrayFromResults(results) {
var resultsArray = [];
var parsed_string;
var split_results = results.split(',');
for (var i = 0; i < split_results.length; i++) {
parsed_string = split_results[i].split("&#39;").join("").split(':');
resultsArray.push([parsed_string[0].replace("{","").replace("}",""), parseFloat(parsed_string[1])]);
}
return resultsArray;
};
</script>
</head>
<body>
<p>
<label for="amount">Year:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id="slider"></div>
</body>
</html>