{% load i18n l10n %}



{% get_current_language as LANGUAGE_CODE %}


<div id="speedometer_{{view_name}}_{{speedometer_name}}" class = 'status_info_div'></div>

<script type="text/javascript" lang="text/javascript">


   	var speedometer_chart_{{view_name}}_{{speedometer_name}};

   	function createSpeedometer(){
   		var min = parseInt({{min}})
   		var max = parseInt({{max}})
   		var middle1 = max/3
   		var middle2 = (max/3)*2

   		if ('{{invert}}' == 'false')
   		{	
   			var color1 = '#55BF3B'
   			var color2 = '#DDDF0D'
   			var color3 = '#DF5353'
   		}
   		else
		{	
   			var color1 = '#DF5353'
   			var color2 = '#DDDF0D'
   			var color3 = '#55BF3B'
   		}   			
	   	speedometer_chart_{{view_name}}_{{speedometer_name}}=$('#speedometer_{{view_name}}_{{speedometer_name}}').highcharts({
	    
	        chart: {
	            type: 'gauge',
	            plotBackgroundColor: null,
	            plotBackgroundImage: null,
	            plotBorderWidth: 0,
	            plotShadow: false
	        },
	        
	        title: {
	            text: '{{speedometer_text}}'
	        },
	        
	        pane: {
	            startAngle: -150,
	            endAngle: 150,
	            background: [{
	                backgroundColor: {
	                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                    stops: [
	                        [0, '#FFF'],
	                        [1, '#333']
	                    ]
	                },
	                borderWidth: 0,
	                outerRadius: '109%'
	            }, {
	                backgroundColor: {
	                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                    stops: [
	                        [0, '#333'],
	                        [1, '#FFF']
	                    ]
	                },
	                borderWidth: 1,
	                outerRadius: '107%'
	            }, {
	                // default background
	            }, {
	                backgroundColor: '#DDD',
	                borderWidth: 0,
	                outerRadius: '105%',
	                innerRadius: '103%'
	            }]
	        },
	           
	        // the value axis
	        yAxis: {
	            min: min,
	            max: max,
	            
	            minorTickInterval: 'auto',
	            minorTickWidth: 1,
	            minorTickLength: 10,
	            minorTickPosition: 'inside',
	            minorTickColor: '#666',
	    
	            tickPixelInterval: 30,
	            tickWidth: 2,
	            tickPosition: 'inside',
	            tickLength: 10,
	            tickColor: '#666',
	            labels: {
	                step: 2,
	                rotation: 'auto'
	            },
	            title: {
	                text: '{{text}}'
	            },
	            plotBands: [{
	                from: min,
	                to: middle1,
	                color: color1 // green
	            }, {
	                from: middle1,
	                to: middle2,
	                color: color2 // yellow
	            }, {
	                from: middle2,
	                to: max,
	                color: color3 // red
	            }]        
	        },
	    
	        series: [{
	            name: '{{text}}',
	            data: [parseFloat('{{default_value}}')],
	            tooltip: {
	                valueSuffix: '{{text}}'
	            }
	        }]
	    
	    })
		.highcharts()//return chart instance
	}



    // Add some life
    function updateSpeedometer(chart,val) {
        if (!chart.renderer.forExport) {
                var point = chart.series[0].points[0];    
                point.update(val);

        }
    };

	createSpeedometer();
	// updateSpeedometer(speedometer_chart_ASR,newValASR);

</script>