Progress Bar Chart - CanvasJS

Progress Bar Chart

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 70px; width: 100%;"></div>
<button id="startButton">
  Start
</button>

JavaScript

//For initializing Progress bar chart option
var progressBar = new ProgressBar("chartContainer", {
  startValue: 0, // Extreme left value for Progress
  currentValue: 20, // Current value for Progress
  endValue: 100, // Extreme right value for Progress
  progressCompleteColor: "#1871d4",
  progressIncompleteColor: "#abb2bc"
});

// For rendering
progressBar.render();

//For dynamically updating ProgressBar
document.getElementById("startButton").onclick = function() {

  var update = setInterval(function() {
    if (progressBar.options.currentValue >= progressBar.options.endValue)
      clearInterval(update);
    else {
      progressBar.options.currentValue++;
      progressBar.render();
    }
  }, 200);
};





//------------ Function for implimentation ProgressBar -------------

function ProgressBar(chartContainer, options) {
  var chart = new CanvasJS.Chart("chartContainer", {
		dataPointWidth: 50,
    axisX: {
      tickLength: 0,
      lineThickness: 0,
      labelFontSize: 0,
      margin: -10
    },
    toolTip: {
      shared: true
    },
    axisY: {
      tickLength: 0,
      lineThickness: 0,
      labelFontSize: 0,
      gridThickness: 0,
      margin: -10
    },
    data: [{
      name: "Progress",
      type: "stackedBar100",
      xValueFormatString: " ",
      color: options.progressCompleteColor,
      indexLabel : "{name}: {y}",
      indexLabelPlacemnet: "inside",
      dataPoints: [{ }]
    }, {
      //name: "InComplete",
      type: "stackedBar100",
      toolTipContent: " ",
      color: options.progressIncompleteColor,
      dataPoints: [{} ]
    }]
  });
  this.options = options;

  this.render = function() {
    chart.options.axisY.labelFormatter = function(e) {
      return e.value * (options.endValue - options.startValue) / 100 + options.startValue;
    };
    chart.options.data[0].dataPoints[0].y = options.currentValue - options.startValue;
    chart.options.data[1].dataPoints[0].y = options.endValue - options.currentValue +...