$(function () {
var seriesColor = new Array();
var is_set = 0;
$('#redstar_sys_temp').highcharts({
chart: {
backgroundColor:'rgba(255, 255, 255, 0)',
type: 'bar',
animation: {
duration: 500
},
marginTop: 0,
marginBottom: 0,
marginLeft: 10,
marginRight: 0
},
title: {
text: null
},
subtitle: {
text: null
},
legend: {
enabled: false
},
xAxis: {
type: 'category',
tickWidth: 0,
gridLineWidth: 0,
title: {
enabled: false
},
labels: {
align: 'left',
x: 3,
y: 4
},
},
yAxis: {
min: 0,
max: 90,
tickAmount: 0,
gridLineWidth: 0,
labels: {
align: 'center',
x: 100,
y: 9
},
title: {
text: null
},
showFirstLabel: false
},
plotOptions: {
series: {
borderWidth: 0,
pointWidth: 12,
dataLabels: {
enabled: true,
format: '
{y}
',
x: -18,
y: -1
}
}
},
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
},
tooltip: {
pointFormat: '{point.y} ℃',
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgba(96, 96, 96, .8)'],
[1, 'rgba(16, 16, 16, .8)']
]
},
borderWidth: 0,
style: {
color: '#FFF'
}
},
series: [{
name: 'Load',
data: [],
colorByPoint: true,
colors: seriesColor
}]
},
function(chart) {
setInterval(function refresh() {
var seriesLoad = chart.series[0],
data_used;
$.ajax({
url: './data/redstar_sys_temp_all.json',
dataType: 'json',
success: function(data) {
for (var i = 0; i < data.length; i++) {
data_used = data[i][1];
if (data_used < 65) {
seriesColor[i] = '#285367';
} else {
seriesColor[i] = '#219c31';
}
if (is_set == 1) {
seriesLoad.data[i].update(data[i]);
seriesLoad.data[i].update({color: seriesColor[i]});
}
}
if (is_set != 1) {
seriesLoad.setData(data);
is_set = 1;
}
},
cache: false
})
return refresh;
}(), 5000);
});
});