$(function () {
    $('#cpu_temp_gaugu').highcharts({

        chart: {
            type: 'gauge',				
			backgroundColor: '#272c3d',
            plotBorderWidth: 0,
            plotBackgroundImage: null,
            height: 115
        },
			title: {
                text: null
            },
            subtitle: {
                text: null
            },
        pane: [{
            startAngle: -115,
            endAngle: 115,
            background: {
	            backgroundColor: null,
	            borderWidth: 0
	        },
            size: 110,
            center: ['50%', '74%']
        }],

        yAxis: [{
            min: 0,
            max: 100,
			minorTickLength: 0,
			tickLength: 10,
            tickWidth: 1,
			tickInterval: 25,
            tickPosition: 'outside',
			tickColor: '#a8a8a8',
			lineWidth: 0,
            labels: {
				step: 1,
                rotation: 'auto',
                distance: 10,
				style: {
                    color: '#a8a8a8',
                    Size: 8
                }
            },
            plotBands: [{
	        	from: 0,
	        	to: 70,
	        	color: '#248824',
	        	innerRadius: '110%',
	        	outerRadius: '70%'
	        },{
	        	from: 70,
	        	to: 90,
	        	color: '#d06d02',
	        	innerRadius: '110%',
	        	outerRadius: '70%'
	        },{
	        	from: 90,
	        	to: 100,
	        	color: '#b34539',
	        	innerRadius: '110%',
	        	outerRadius: '70%'
	        }],
	        pane: 0,
        }],

        plotOptions: {
	    	gauge: {
	    		dataLabels: {
	    			enabled: false
	    		},
	    		dial: {
	    			radius: '90%',
                    backgroundColor: '#8eea7d'
	    		},
                pivot: {
                    backgroundColor: '#8eea7d'
                }
	    	}
	    },

		credits: {
            enabled: false
        },
			tooltip: {
				enabled: false
		},
		navigation: {
					buttonOptions: {
					enabled: false
					}
					},	
        series: [{
            data: [0],
            yAxis: 0
        }]

    },

        // Let the music play
        function (chart) {
            setInterval(function refresh() {
				var point1 = chart.series[0].points[0],
					yAxis = chart.yAxis[0];
					$.ajax({
						url: './data/cpu_temp_gaugu.json',
						dataType: 'json',
						success: function(data) {
							val = data[0];
							point1.update(val);
							yAxis.update({
								title: {
									text: '<div style="text-align:center;line-height:120%"><span style="font-size:18px;color:#0097cb; font-weight:bold">'+val+'℃</span></div>',									
									y: 58
								}
							}, false);
							chart.redraw();
						},
						cache: false
					})
					return refresh;
				}(), 5000);

        });
});