Skip to content

Instantly share code, notes, and snippets.

@chelm

chelm/index.html

Created December 5, 2015 04:57
Show Gist options
  • Save chelm/9cdcb2d29614725225f4 to your computer and use it in GitHub Desktop.
Save chelm/9cdcb2d29614725225f4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>GDDP Annual Averages</title>
<link rel="stylesheet" href="http://bigearth.habitatseven.ca/stockcharts/amcharts/style.css" type="text/css">
<script src="http://bigearth.habitatseven.ca/stockcharts/jquery.js"></script>
<script src="http://bigearth.habitatseven.ca/stockcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="http://bigearth.habitatseven.ca/stockcharts/amcharts/serial.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [];
var lat = 37.232375;
var lon = 112.837542;
function fetch( lat, lon ) {
var host = 'http://bigmappers.com:8080';
var url = host + "/gddp/tasmax?lat="+lat+"&lon="+lon;
$.getJSON(url, function( response ){
var data = {};
var output = [];
for ( var model in response ) {
for (var type in response[model] ) {
response[model][type].avg.forEach(function( year, i ) {
if ( !data[ year.date ] ) {
data[ year.date ] = {};
}
data[ year.date ][ model ] = year.avg;
});
}
}
var cnt = 0;
for (var d in data ){
var obj = data[d];
obj.date = 1950 + cnt;
obj.change = ( obj.rcp85 - obj.rcp45 ) / obj.rcp85 * 100
output.push( obj );
cnt++;
}
render( output );
});
}
function render( data ) {
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY",
"precision": 4,
"valueAxes": [{
"id": "v1",
"title": "Average Max Temp",
"position": "left",
"autoGridCount": false,
"labelFunction": function(value) {
return Math.round(value) + "C";
}
},{
"id": "v2",
"title": "Percent Change",
"gridAlpha": 0,
"position": "right",
"autoGridCount": false
}],
"graphs": [{
"id": "g1",
"valueAxis": "v1",
"lineColor": "#e1ede9",
"fillColors": "#e1ede9",
"fillAlphas": 1,
"type": "column",
"title": "rcp85",
"valueField": "rcp85",
"clustered": true,
"columnWidth": 2,
"legendValueText": "[[value]]C",
"balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]C<\/b>"
}, {
"id": "g2",
"valueAxis": "v1",
"lineColor": "#62cf73",
"fillColors": "#62cf73",
"fillAlphas": 1,
"type": "column",
"title": "rcp45",
"valueField": "rcp45",
"clustered": true,
"columnWidth": 2,
"legendValueText": "[[value]]C",
"balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]C<\/b>"
}, {
"id": "g3",
"valueAxis": "v2",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"lineColor": "#20acd4",
"type": "smoothedLine",
"title": "Percent Change",
"useLineColorForBulletBorder": true,
"valueField": "change",
"balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]%<\/b>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 50,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"legend": {
"useGraphSettings": true,
"position": "top"
},
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"export": {
"enabled": true
},
"dataProvider": data
});
}
fetch( lat, lon );
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment