FusionCharts - Angular Gauge - Message logger - JavaScript API

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- AngularGauge - Message Logger javascript API.

Methods:
    
    chartRef.showLog() - To show the log, if it's not already visible.
    chartRef.hideLog() - To hide the log, if it's visible.
    chartRef.clearLog() - To clear the contents of log.
       

-->
<div id="chart-container">FusionCharts will render here</div>
<div id='controllers'>
  <input id='show' class='btns' type='Button' value='Show' />
  <input id='clear' class='btns' type='Button' value='Clear Log' />
</div>

CSS

#controllers {
  position: inherit;
  left: 10px;
  font-family: Verdana, sans;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
}

.btns {
  font-family: Verdana, sans;
  font-size: 14px;
  font-style: normal;
}

JavaScript

FusionCharts.ready(function() {

  var showBtn = document.getElementById('show'),
    clearBtn = document.getElementById('clear'),

    showLogger = function() {
      cpuUtil.showLog();
    },

    clearLogger = function() {
      cpuUtil.clearLog();
    }

  cpuUtil = new FusionCharts({
    type: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Server CPU Utilization",
        "subcaption": "forum.hsm.com",
        "lowerLimit": "0",
        "upperLimit": "100",
        "editMode": "1",
        "showValue": "1",
        "chartBottomMargin": "20",
        "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
        "gaugeFillRatio": "15",
        "valueBelowPivot": "1",
        "useMessageLog": "1",
        "theme": "fusion"
      },
      "colorRange": {
        "color": [{
            "minValue": "0",
            "maxValue": "50",
            "code": "#6baa01"
          },
          {
            "minValue": "50",
            "maxValue": "75",
            "code": "#f8bd19"
          },
          {
            "minValue": "75",
            "maxValue": "100",
            "code": "#e44a00"
          }
        ]
      },
      "dials": {
        "dial": [{
          "id": "crntYr",
          "value": "78",
          "showValue": "1",
          "tooltext": "Current year's average : $value"
        }]
      }
    },
    events: {
      "rendered": function(evtObj, argObj) {
        var intervalVar = setInterval(function() {
          var chartIns = evtObj.sender,
            prcnt = 65 + parseInt(Math.floor(Math.random() * 10), 10),
            today = new Date(),
            dd = today && today.getDate(),
            mm = today && today.getMonth() + 1, //January is 0!
            yyyy = today && today.getFullYear();

          if (dd < 10) {
            dd = '0' + dd
          }

          if (mm < 10) {
            mm = '0' + mm
          }

         ...