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>