real time data with database

Created using FusionCharts Suite XT - www.fusioncharts.com

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/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the usage of the feedData() method -->
<div id="indicatorDiv">Method Name: <b>feedData()</b>

  <br>
  <br>Feeds real-time data to real-time charts and gauges.</br>
  <br>Click <b>Feed Data</b> to start feeding real-time data to the column 2D chart.</br>
</div>
<br>
<center>
  <br>
  <button id="feed_data"><b>Feed data</b>
  </button>
  </br>
  <div id="chart-container">FusionCharts will render here</div>
</center>

CSS

body {
  padding: 5px;
  margin: 0 auto;
}

#indicatorDiv {
  width: 500px;
  font-family: 'Arial', 'Helvetica';
  font-size: 13px;
}

#feed_data {
  height: 25px;
  font-size: 13px;
}

JavaScript

FusionCharts.ready(function() {
  var myData = {
     "chart": {
      "caption": "Online Transactions per 10 seconds",
      "subCaption": "harryssupermart.com",
      "showrealtimevalue": "1",
      "yaxismaxvalue": "10",
      "numdisplaysets": "10",

      "labeldisplay": "rotate",
      "slantLabels": "1",
      "showLegend": "0",
      "showValues": "0",
      "numbersuffix": " Transactions",
      "showlabels": "1",
      "showRealTimeValue": "0",

      "theme": "fint",
      "captionFontSize": "13",
      "subCaptionFontSize": "12"
    },
    "categories": [{
      "category": [{
        "label": "Start"
      }]
    }],
    "dataset": [{
      "seriesname": "",
      "alpha": "100",
      "data": [{
        "value": "3"
      }]
    }]
  }
var transactionChart = new FusionCharts({
  id: "mychart",
  type: 'realtimecolumn',
  renderAt: 'chart-container',
  width: '500',
  height: '250',
  dataFormat: 'json',
  dataSource: myData
}); transactionChart.render();

function feed(){
  	strData = "&value=" + 45;
  	transactionChart.feedData(strData);
  }
 document.getElementById("feed_data").addEventListener("click", feed);
});