--- /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',
+ defaultSeriesType: 'spline',
+ inverted: true,
+ width: 500,
+ style: {
+ margin: '0 auto'
+ }
+ },
+ title: {
+ text: 'Atmosphere Temperature by Altitude'
+ },
+ subtitle: {
+ text: 'According to the Standard Atmosphere Model'
+ },
+ xAxis: {
+ reversed: false,
+ title: {
+ enabled: true,
+ text: 'Altitude'
+ },
+ labels: {
+ formatter: function() {
+ return this.value +'km';
+ }
+ },
+ maxPadding: 0.05,
+ showLastLabel: true
+ },
+ yAxis: {
+ title: {
+ text: 'Temperature'
+ },
+ labels: {
+ formatter: function() {
+ return this.value + '°';
+ }
+ },
+ lineWidth: 2
+ },
+ legend: {
+ enabled: false
+ },
+ tooltip: {
+ formatter: function() {
+ return ''+
+ this.x +' km: '+ this.y +'°C';
+ }
+ },
+ plotOptions: {
+ spline: {
+ marker: {
+ enable: false
+ }
+ }
+ },
+ series: [{
+ name: 'Temperature',
+ data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
+ [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
+ }]
+ });
+
+
+ });
+
+ </script>
+
+ </head>
+ <body>
+
+ <!-- 3. Add the container -->
+ <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
+
+
+ </body>
+</html>