HIghcharts Gauge test
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="gauge_out" style="width: 300px; height: 300px; margin: 0 auto"></div>
<div id="gauge_in" style="width: 300px; height: 300px; margin: 0 auto"></div>
JavaScript
var options_out;
var options_in;
var Temp1 =[];
var Temp2 =[];
var Hum1 =[];
var Hum2 =[];
$(document).ready(function() {
options_out={
chart: {
renderTo: 'gauge_out',
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: 'OUTSIDE'
},
pane: {
startAngle: -150,
endAngle: 150,
//size: '150%',
center: ['50%', '40%']
},
yAxis: [{//Temperature
min: -40,
max: 40,
lineColor: null,
tickColor: 'grey',
minorTickColor: 'grey',
offset: -5,
lineWidth: 2,
labels: {
distance: -20,
rotation: 'auto'
},
labels: {
// distance: -5,
rotation: 'auto',
formatter: function() {
if (this.value >0) {
return '<span style="color: #A41E09">' + this.value + "</span>";
}
else {
return '<span style="color: #000080">' + this.value + "</span>";
}
return this.value;
}
},
plotBands: [{
from: -40,
to: 0,
thickness: '5%',
outerRadius: '100%',
color: '#336'
}, {
from: 0,
to: 40,
thickness: '5%',
outerRadius: '100%',
color: '#933'
}],
tickLength: 10,
...