John Doe
PHP DeveloperCharts - Others
One stop solution for perfect admin dashboard!
amCharts! Programming libraries and tools for all your data visualization needs. For official documentation, click here .
Animated Gauge
<!-- ========== HTML ========== -->
<div id="chart1" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// chart1
var chart1 = AmCharts.makeChart("chart1", {
"theme": "light",
"type": "gauge",
"fontFamily": "Poppins",
"axes": [{
"topTextFontSize": 20,
"topTextYOffset": 70,
"axisColor": "#31d6ea",
"axisThickness": 1,
"endValue": 100,
"gridInside": true,
"inside": true,
"radius": "50%",
"valueInterval": 10,
"tickColor": "#67b7dc",
"startAngle": -90,
"endAngle": 90,
"unit": "%",
"bandOutlineAlpha": 0,
"bands": [{
"color": "#3498db",
"endValue": 100,
"innerRadius": "105%",
"radius": "170%",
"gradientRatio": [0.5, 0, -0.5],
"startValue": 0
}, {
"color": "#27ae60",
"endValue": 0,
"innerRadius": "105%",
"radius": "170%",
"gradientRatio": [0.5, 0, -0.5],
"startValue": 0
}]
}],
"arrows": [{
"alpha": 1,
"innerRadius": "35%",
"nailRadius": 0,
"radius": "170%"
}]
});
setInterval(randomValue, 2000);
// set random value
function randomValue() {
var value = Math.round(Math.random() * 100);
chart1.arrows[0].setValue(value);
chart1.axes[0].setTopText(value + " %");
// adjust darker band to new value
chart1.axes[0].bands[1].setEndValue(value);
}
});
</script>
Angular Gauge
<!-- ========== HTML ========== -->
<div id="chart2" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// Chart 2
var gaugeChart = AmCharts.makeChart( "chart2", {
"type": "gauge",
"theme": "light",
"fontFamily": "Poppins",
"axes": [ {
"axisThickness": 1,
"axisAlpha": 0.2,
"tickAlpha": 0.2,
"valueInterval": 20,
"bands": [ {
"color": "#84b761",
"endValue": 90,
"startValue": 0
}, {
"color": "#fdd400",
"endValue": 130,
"startValue": 90
}, {
"color": "#cc4748",
"endValue": 220,
"innerRadius": "95%",
"startValue": 130
} ],
"bottomText": "0 km/h",
"bottomTextYOffset": -20,
"endValue": 220
} ],
"arrows": [ {} ],
"export": {
"enabled": true
}
} );
setInterval( randomValue2, 2000 );
// set random value
function randomValue2() {
var value = Math.round( Math.random() * 200 );
if ( gaugeChart ) {
if ( gaugeChart.arrows ) {
if ( gaugeChart.arrows[ 0 ] ) {
if ( gaugeChart.arrows[ 0 ].setValue ) {
gaugeChart.arrows[ 0 ].setValue( value );
gaugeChart.axes[ 0 ].setBottomText( value + " km/h" );
}
}
}
}
}
});
</script>
Clock
<!-- ========== HTML ========== -->
<div id="chart3" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
var chart3 = AmCharts.makeChart( "chart3", {
"type": "gauge",
"theme": "dark",
"fontFamily": "Poppins",
"startDuration": 0.3,
"marginTop": 20,
"marginBottom": 50,
"axes": [ {
"axisAlpha": 0.3,
"endAngle": 360,
"endValue": 12,
"minorTickInterval": 0.2,
"showFirstLabel": false,
"startAngle": 0,
"axisThickness": 1,
"valueInterval": 1
} ],
"arrows": [ {
"radius": "50%",
"innerRadius": 0,
"clockWiseOnly": true,
"nailRadius": 10,
"nailAlpha": 1
}, {
"nailRadius": 0,
"radius": "80%",
"startWidth": 6,
"innerRadius": 0,
"clockWiseOnly": true
}, {
"color": "#CC0000",
"nailRadius": 4,
"startWidth": 3,
"innerRadius": 0,
"clockWiseOnly": true,
"nailAlpha": 1
} ],
"export": {
"enabled": true
}
} );
// update each second
setInterval( updateClock, 1000 );
// update clock
function updateClock() {
if(chart3.arrows.length > 0){
// get current date
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if(chart3.arrows[ 0 ].setValue){
// set hours
chart3.arrows[ 0 ].setValue( hours + minutes / 60 );
// set minutes
chart3.arrows[ 1 ].setValue( 12 * ( minutes + seconds / 60 ) / 60 );
// set seconds
chart3.arrows[ 2 ].setValue( 12 * date.getSeconds() / 60 );
}
}
}
});
</script>
Solid Gauge
<!-- ========== HTML ========== -->
<div id="chart4" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// Chart 4
var gaugeChart4 = AmCharts.makeChart("chart4", {
"type": "gauge",
"theme": "dark",
"fontFamily": "Poppins",
"axes": [{
"axisAlpha": 0,
"tickAlpha": 0,
"labelsEnabled": false,
"startValue": 0,
"endValue": 100,
"startAngle": 0,
"endAngle": 270,
"bands": [{
"color": "#eee",
"startValue": 0,
"endValue": 100,
"radius": "100%",
"innerRadius": "85%"
}, {
"color": "#3498db",
"startValue": 0,
"endValue": 80,
"radius": "100%",
"innerRadius": "85%",
"balloonText": "90%"
}, {
"color": "#eee",
"startValue": 0,
"endValue": 100,
"radius": "80%",
"innerRadius": "65%"
}, {
"color": "#e74c3c",
"startValue": 0,
"endValue": 35,
"radius": "80%",
"innerRadius": "65%",
"balloonText": "35%"
}, {
"color": "#eee",
"startValue": 0,
"endValue": 100,
"radius": "60%",
"innerRadius": "45%"
}, {
"color": "#27ae60",
"startValue": 0,
"endValue": 92,
"radius": "60%",
"innerRadius": "45%",
"balloonText": "92%"
}, {
"color": "#eee",
"startValue": 0,
"endValue": 100,
"radius": "40%",
"innerRadius": "25%"
}, {
"color": "#f39c12",
"startValue": 0,
"endValue": 68,
"radius": "40%",
"innerRadius": "25%",
"balloonText": "68%"
}]
}],
"allLabels": [{
"text": "First option",
"x": "49%",
"y": "5%",
"size": 15,
"bold": true,
"color": "#3498db",
"align": "right"
}, {
"text": "Second option",
"x": "49%",
"y": "15%",
"size": 15,
"bold": true,
"color": "#e74c3c",
"align": "right"
}, {
"text": "Third option",
"x": "49%",
"y": "24%",
"size": 15,
"bold": true,
"color": "#27ae60",
"align": "right"
}, {
"text": "Fourth option",
"x": "49%",
"y": "33%",
"size": 15,
"bold": true,
"color": "#f39c12",
"align": "right"
}],
"export": {
"enabled": true
}
});
});
</script>