FusionCharts - Gallery Example - Real-time thermometer Gauge

Created using FusionCharts Suite XT - www.fusioncharts.com

by Gagan Sikri

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<!-- A simple example of Thermometer gauge, which uprates every 3 seconds -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

valinit = -10;
FusionCharts.ready(function() {
  chart = new FusionCharts({
      type: 'thermometer',
      renderAt: 'chart-container',
      id: 'temp-monitor',
      width: '120',
      height: '400',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "Central cold storage",
          "subcaption": "Bakersfield Central",
          "subcaptionFontBold": "0",
          "lowerLimit": "-20",
          "upperLimit": "20",
          "numberSuffix": "°C",
          "bgColor": "#ffffff",
          "showBorder": "0",
          "thmFillColor": "#008ee4"
        },
        "value": valinit
      },
      "events": {
        "renderComplete": function(evt, arg) {
          var count = 0;
          var chargeInterval = setInterval(function() {

            count++;

            if (count == 1) {
              valinit = valinit + 10 //replaced from value to be passed using PHP
              console.log(valinit);
            }

            if (count == 2) {
              valinit = valinit - 10 //replaced from value to be passed using PHP                  
            }

            if (count == 3) {
              valinit=10 //replaced from value to be passed using PHP
              count = 0;
            }



            FusionCharts.items["temp-monitor"].feedData("value=" + valinit);
          }, 3000);
        }
      }
    })
    .render();
});