dashboard
Version:
Create dashboards with gadgets on node.js
164 lines (151 loc) • 4.28 kB
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.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 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',
ignoreHiddenSeries: false
},
title: {
text: 'Wind speed during two days'
},
subtitle: {
text: 'October 6th and 7th 2009 at two locations in Vik i Sogn, Norway'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Wind speed (m/s)'
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Light air
from: 0.3,
to: 1.5,
color: 'rgba(68, 170, 213, .1)'
}, { // Gentle breeze
from: 3.3,
to: 5.5,
color: 'rgba(68, 170, 213, .1)'
}, { // Fresh breeze
from: 8,
to: 11,
color: 'rgba(68, 170, 213, .1)'
}, { // High wind
from: 14,
to: 15,
color: 'rgba(68, 170, 213, .1)'
}]
},
labels: {
items: [{
// To do:
// Make a common labels layer and combine it with credits and titles?
// Use the Layer object and add a method for drawing HTML.
// Make balloons and make usable for individual dataLabels
html: 'Light air',
style: {
left: '10px',
top: '275px'
}
}, {
html: 'Light breeze',
style: {
left: '10px',
top: '245px'
}
}, {
html: 'Moderate breeze',
style: {
left: '10px',
top: '205px'
}
}, {
html: 'Fresh breeze',
style: {
left: '10px',
top: '160px'
}
}, {
html: 'Strong breeze',
style: {
left: '10px',
top: '105px'
}
}, {
html: 'High wind',
style: {
left: '10px',
top: '40px'
}
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +': '+ this.y +' m/s';
}
},
plotOptions: {
spline: {
lineWidth: 4,
marker: {
enabled: false
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2009, 9, 6, 0, 0, 0),
states: {
hover: {
marker: {
enabled: true,
symbol: 'circle',
radius: 3,
lineWidth: 1
}
}
}
}
},
series: [{
name: 'Hestavollane',
data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
3.0, 3.0]
}, {
name: 'Voll',
data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
3.0, 4.3, 6.8, 6.0, 7.0, 6.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
}]
});
});
</script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>