FusionCharts - Horizontal Bullet chart - Basic sample

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>
<!-- A simple example of HBullet chart-->
<div class="main-container">
  <div class="caption">Daily Sales Tracker by Salesperson
    <br/>
  </div>
  <div class="subcaption">Stereo Exchange Ltd, New York</div>
  <div id="chart-container1">FusionCharts will render here</div>
  <div id="chart-container2">FusionCharts will render here</div>
  <div id="chart-container3">FusionCharts will render here</div>
  <div id="chart-container4">FusionCharts will render here</div>
  <div id="chart-container5">FusionCharts will render here</div>
</div>

CSS

.main-container {
  width: 455px;
  background-color: #ffffff;
  font-family: Open Sans;
}

.main-container .caption {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 5px;
  font-weight: bold;
  font-size: medium;
  color: #595959;
}

.main-container .subcaption {
  text-align: center;
  font-size: small;
  color: #595959;
}

JavaScript

FusionCharts.ready(function() {
  var revBulletChart1 = new FusionCharts({
    type: 'hbullet',
    renderAt: 'chart-container1',
    id: 'demo1',
    width: '450',
    height: '62',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Tyson",
        "subcaption": "Ponce",
        "captionFontSize": "11.5",
        "subcaptionFontSize": "11.5",
        "subcaptionFontBold": "1",
        "captionPadding": "4",
        "chartTopMargin": "15",
        "chartLeftMargin": "10",
        "chartRightMargin": "10",
        "chartBottomMargin": "10",
        "animation": "1",
        "upperLimit": "12000",
        "showLimits": "0",
        "showTickValues": "0",
        "decimals": "2",
        "forceDecimals": "1",
        "numberprefix": "$",
        "targetFillPercent": "75",
        "plotFillPercent": "39",
        "formatNumberScale": "1",
        "baseFontColor": "595959",
        "plotToolText": "<div>Sales : <b>$$value</b></div>",
        "targettooltext": "Target : <b>$$targetvalue</b>",
        "theme": "fusion"
      },
      "colorRange": {
        "color": [{
          "minValue": "0",
          "maxValue": "6000",
          "code": "#999498"
        }, {
          "minValue": "6000",
          "maxValue": "9000",
          "code": "#c5c2c6"
        }, {
          "minValue": "9000",
          "maxValue": "12000",
          "code": "#e1dee2"
        }]
      },
      "value": "3512",
      "target": "10000"
    },
    "events": {
      "rendered": function(evtObj, argObj) {
        var i1 = 3512,
          chartRef = evtObj.sender;
        chartRef.intervalVar = setInterval(function() {
          i1 = i1 + parseInt(Math.floor(Math.random() * 200), 10);
          if (i1 < 9870) {
            chartRef.feedData("value=" + i1 + "&target=10000");
          } else {
            clearInterval(chartRef.intervalVar);
          }
        }, 15000);
      }
    }
  }).render();
  var revBulletChart2 = new FusionCharts({
    type: 'hbullet',
  ...