#9863

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/gauge.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 500px;
}

JavaScript

function BindingGaugeChart (ChartId, DivId, Caption, ChartLimits, Value) { 
    ChartId.clockWiseOnly = true; 
    ChartId.addTitle(Caption, 10); 
    ChartId.startDuration = 0; 
    ChartId.radius = "40%"; 
    //ChartId.balloonText = "In"; 
    ChartId["font-family"] = "Arial, sans - serif"; 
    ChartId["font-size"] = 10; 
    ChartId.precision = -1; 
    var axis = new AmCharts.GaugeAxis();
    
    axis.endAngle = 90; 
    axis.startAngle = -90; 
    axis.axisThickness = 0; 
    axis.inside = false; 
    // axis.valueInterval = ChartLimits[4]; 
    //var test = 
    axis.valueInterval = (ChartLimits[1] - ChartLimits[0]) / 2; 
    if (screen.width < 1300) { 
    axis.centerY = 80; 
    axis.setTopText("Change vs. YAGO:" + ChartLimits[5] + "% \n\n\n\n\n\n\n\n\n\n\n " + ChartLimits[4]); 
    axis.topTextYOffset = -170; 
    axis.tickLength = 30; 
    } 
    else { 
    axis.centerY = 53; 
    axis.topTextYOffset = -100; 
    axis.setTopText("Change vs. YAGO:" + ChartLimits[5] + "% \n\n\n\n\n " + ChartLimits[4]); 
    axis.tickLength = 27; 
    }
    
    // axis.numberFormatter = { precision: 0, decimalSeparator: '.' }; 
    // axis.tickThickness = 1; 
    axis.tickThickness = 0; 
    axis.startValue = ChartLimits[0]; 
    axis.endValue = ChartLimits[1]; 
    axis.minorTickLength = 0; 
    axis.labelFrequency = 2;
    
    axis.labelFunction = function (value) {
        return value;
    };
    
    var band1 = new AmCharts.GaugeBand(); 
    band1.startValue = ChartLimits[0]; 
    band1.endValue = ChartLimits[2]; 
    band1.color = "#AF4553"; 
    band1.innerRadius = "60%"; 
    band1.balloonText = "Current Year Value: " + Value + "</br> Change: " + ChartLimits[5]+"%";
    
    var band2 = new AmCharts.GaugeBand(); 
    band2.startValue = ChartLimits[2]; 
    band2.endValue = ChartLimits[3]; 
    band2.color = "#D58940"; 
    band2.innerRadius = "60%"; 
    band2.balloonText = "Current Year Value: " + Value + "</br> Change: " + ChartLimits[5] + "%";
    
   ...