FusionCharts - Horizontal Bullet chart - Basic sample

Created using FusionCharts Suite XT - www.fusioncharts.com

by BenBiz

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>
  <div style="width: 500px">
    <div style="display: flex;">
      <div style="width: 15%; display: flex; flex-direction: column; justify-content: center;">
        Test Label
      </div>
      <div style="width: 75%">
        <div id="chart-container1">FusionCharts will render here</div>
      </div>
    </div>

    <div style="display: flex;">
      <div style="width: 15%; display: flex; flex-direction: column; justify-content: center;">
        Test Label
      </div>
      <div style="width: 75%">
        <div id="chart-container2">FusionCharts will render here</div>
      </div>
    </div>

    <div style="display: flex;">
      <div style="width: 15%; display: flex; flex-direction: column; justify-content: center;">
        Test Label
      </div>
      <div style="width: 75%">
        <div id="chart-container3">FusionCharts will render here</div>
      </div>
    </div>

    <div style="display: flex;">
      <div style="width: 15%; display: flex; flex-direction: column; justify-content: center;">
        Test Label
      </div>
      <div style="width: 75%">
        <div id="chart-container4">FusionCharts will render here</div>
      </div>
    </div>

    <div style="display: flex;">
      <div style="width: 15%; display: flex; flex-direction: column; justify-content: center;">
        Test Label
      </div>
      <div style="width: 75%">
        <div id="chart-container5">FusionCharts will render here</div>
      </div>
    </div>
  </div>

JavaScript

FusionCharts.ready(function() {
  let height = '65';
  var revBulletChart1 = new FusionCharts({
    type: 'hbullet',
    renderAt: 'chart-container1',
    width: '100%',
    height: height,
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "animation": "0",
        "bgColor": '#ffffff',
        "canvasBgColor": '#ffffff',
        "showAlternateHGridColor": "0",
        "showAlternateVGridColor": "0",
        "maxLabelWidthPercent": '20',
        "palette": "1",
        "plotFillAlpha": '60',
        "plotFillColor": '#ffffff',
        "showPlotBorder": "0",
        "usePlotGradientColor": "0",
        "showBorder": "0",
        "showCanvasBorder": "0",
        "showTooltipforWrappedLabels": "1",
        "showValues": "0",
        "showValue": "0",
        "useEllipsesWhenOverflow": "1",
        "showLegend": "0",
        "baseFont": 'Lato',
        "baseFontSize": '12',
        "showShadow": "0",
        "chartTopMargin": "0",
        "chartLeftMargin": "0",
        "chartRightMargin": "0",
        "chartBottomMargin": "0",
        "chartTopPadding": "0",
        "chartLeftPadding": "0",
        "chartRightPadding": "0",
        "chartBottomPadding": "0",
      },
      "colorRange": {
        "color": [{
          "minValue": "0",
          "maxValue": "6000000",
          "code": "#999498",
          "alpha": "60"
        }, {
          "minValue": "0",
          "maxValue": "9000000",
          "code": "#c5c2c6",
          "alpha": "60"
        }]
      },
      "value": "35120000",
      "target": "35000000"
    },
    "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);
  ...