Charts - Others

One stop solution for perfect admin dashboard!

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>