| <!DOCTYPE HTML> | |
| <html> | |
| 	<head> | |
| 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| 		<title>Highcharts Example</title> | |
| 
 | |
| 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |
| 		<style type="text/css"> | |
| ${demo.css} | |
| 		</style> | |
| 		<script type="text/javascript"> | |
| $(function () { | |
|     $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function (data) { | |
| 
 | |
|         $('#container').highcharts({ | |
| 
 | |
|             chart: { | |
|                 type: 'arearange', | |
|                 zoomType: 'x' | |
|             }, | |
| 
 | |
|             title: { | |
|                 text: 'Temperature variation by day' | |
|             }, | |
| 
 | |
|             xAxis: { | |
|                 type: 'datetime' | |
|             }, | |
| 
 | |
|             yAxis: { | |
|                 title: { | |
|                     text: null | |
|                 } | |
|             }, | |
| 
 | |
|             tooltip: { | |
|                 crosshairs: true, | |
|                 shared: true, | |
|                 valueSuffix: '°C' | |
|             }, | |
| 
 | |
|             legend: { | |
|                 enabled: false | |
|             }, | |
| 
 | |
|             series: [{ | |
|                 name: 'Temperatures', | |
|                 data: data | |
|             }] | |
| 
 | |
|         }); | |
|     }); | |
| 
 | |
| }); | |
| 		</script> | |
| 	</head> | |
| 	<body> | |
| <script src="../../js/highcharts.js"></script> | |
| <script src="../../js/highcharts-more.js"></script> | |
| <script src="../../js/modules/exporting.js"></script> | |
| 
 | |
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |
| 
 | |
| 	</body> | |
| </html>
 |