--- /dev/null
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+
+ <!-- 1. Add these JavaScript inclusions in the head of your page -->
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+ <script type="text/javascript" src="../js/highcharts.js"></script>
+
+ <!-- 1a) Optional: add a theme file -->
+ <!--
+ <script type="text/javascript" src="../js/themes/gray.js"></script>
+ -->
+
+ <!-- 1b) Optional: the exporting module -->
+ <script type="text/javascript" src="../js/modules/exporting.js"></script>
+
+
+ <!-- 2. Add the JavaScript to initialize the chart on document ready -->
+ <script type="text/javascript">
+
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'spline'
+ },
+ title: {
+ text: 'Snow depth in the Vikjafjellet mountain, Norway'
+ },
+ subtitle: {
+ text: 'An example of irregular time data in Highcharts JS'
+ },
+ xAxis: {
+ type: 'datetime',
+ dateTimeLabelFormats: { // don't display the dummy year
+ month: '%e. %b',
+ year: '%b'
+ }
+ },
+ yAxis: {
+ title: {
+ text: 'Snow depth (m)'
+ },
+ min: 0
+ },
+ tooltip: {
+ formatter: function() {
+ return '<b>'+ this.series.name +'</b><br/>'+
+ Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
+ }
+ },
+ series: [{
+ name: 'Winter 2007-2008',
+ // Define the data points. All series have a dummy year
+ // of 1970/71 in order to be compared on the same x axis. Note
+ // that in JavaScript, months start at 0 for January, 1 for February etc.
+ data: [
+ [Date.UTC(1970, 9, 27), 0 ],
+ [Date.UTC(1970, 10, 10), 0.6 ],
+ [Date.UTC(1970, 10, 18), 0.7 ],
+ [Date.UTC(1970, 11, 2), 0.8 ],
+ [Date.UTC(1970, 11, 9), 0.6 ],
+ [Date.UTC(1970, 11, 16), 0.6 ],
+ [Date.UTC(1970, 11, 28), 0.67],
+ [Date.UTC(1971, 0, 1), 0.81],
+ [Date.UTC(1971, 0, 8), 0.78],
+ [Date.UTC(1971, 0, 12), 0.98],
+ [Date.UTC(1971, 0, 27), 1.84],
+ [Date.UTC(1971, 1, 10), 1.80],
+ [Date.UTC(1971, 1, 18), 1.80],
+ [Date.UTC(1971, 1, 24), 1.92],
+ [Date.UTC(1971, 2, 4), 2.49],
+ [Date.UTC(1971, 2, 11), 2.79],
+ [Date.UTC(1971, 2, 15), 2.73],
+ [Date.UTC(1971, 2, 25), 2.61],
+ [Date.UTC(1971, 3, 2), 2.76],
+ [Date.UTC(1971, 3, 6), 2.82],
+ [Date.UTC(1971, 3, 13), 2.8 ],
+ [Date.UTC(1971, 4, 3), 2.1 ],
+ [Date.UTC(1971, 4, 26), 1.1 ],
+ [Date.UTC(1971, 5, 9), 0.25],
+ [Date.UTC(1971, 5, 12), 0 ]
+ ]
+ }, {
+ name: 'Winter 2008-2009',
+ data: [
+ [Date.UTC(1970, 9, 18), 0 ],
+ [Date.UTC(1970, 9, 26), 0.2 ],
+ [Date.UTC(1970, 11, 1), 0.47],
+ [Date.UTC(1970, 11, 11), 0.55],
+ [Date.UTC(1970, 11, 25), 1.38],
+ [Date.UTC(1971, 0, 8), 1.38],
+ [Date.UTC(1971, 0, 15), 1.38],
+ [Date.UTC(1971, 1, 1), 1.38],
+ [Date.UTC(1971, 1, 8), 1.48],
+ [Date.UTC(1971, 1, 21), 1.5 ],
+ [Date.UTC(1971, 2, 12), 1.89],
+ [Date.UTC(1971, 2, 25), 2.0 ],
+ [Date.UTC(1971, 3, 4), 1.94],
+ [Date.UTC(1971, 3, 9), 1.91],
+ [Date.UTC(1971, 3, 13), 1.75],
+ [Date.UTC(1971, 3, 19), 1.6 ],
+ [Date.UTC(1971, 4, 25), 0.6 ],
+ [Date.UTC(1971, 4, 31), 0.35],
+ [Date.UTC(1971, 5, 7), 0 ]
+ ]
+ }, {
+ name: 'Winter 2009-2010',
+ data: [
+ [Date.UTC(1970, 9, 9), 0 ],
+ [Date.UTC(1970, 9, 14), 0.15],
+ [Date.UTC(1970, 10, 28), 0.35],
+ [Date.UTC(1970, 11, 12), 0.46],
+ [Date.UTC(1971, 0, 1), 0.59],
+ [Date.UTC(1971, 0, 24), 0.58],
+ [Date.UTC(1971, 1, 1), 0.62],
+ [Date.UTC(1971, 1, 7), 0.65],
+ [Date.UTC(1971, 1, 23), 0.77],
+ [Date.UTC(1971, 2, 8), 0.77],
+ [Date.UTC(1971, 2, 14), 0.79],
+ [Date.UTC(1971, 2, 24), 0.86],
+ [Date.UTC(1971, 3, 4), 0.8 ],
+ [Date.UTC(1971, 3, 18), 0.94],
+ [Date.UTC(1971, 3, 24), 0.9 ],
+ [Date.UTC(1971, 4, 16), 0.39],
+ [Date.UTC(1971, 4, 21), 0 ]
+ ]
+ }]
+ });
+
+
+ });
+
+ </script>
+
+ </head>
+ <body>
+
+ <!-- 3. Add the container -->
+ <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
+
+
+ </body>
+</html>