#7163

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

var gaugeChart = AmCharts.makeChart("chartdiv", {
    type: 'gauge',
    axes: [{
        inside: false,
        startValue: -5,
        endValue: 5,
        valueInterval: 1,
        startAngle: -90,
        endAngle: 90,
        bottomText: 'Veränderung Marktwert',
        unit: '%',
        bands: [{
            color: "#cc0000",
            startValue: -5,
            endValue: -2,
            innerRadius: '47%'
        }, {
            color: "#00cc00",
            startValue: -2,
            endValue: 2,
            innerRadius: '47%'
        }, {
            color: "#cc0000",
            startValue: 2,
            endValue: 5,
            innerRadius: '47%'
        }]
    }],
    arrows: [{
        value: Math.floor((Math.random() * 10) + 1)
    }]
});