Reply To: Chart not rendering dynamically

[Vishwas R]

@pawan-it17,

You can swap datapoints based on colors using bubble-sort & show it in chart by adding a delay after every iteration. Delay is required as chart gets rendered within few milliseconds along with sorting datapoints. Please find the code-snippet below.

function bubbleSort() {
  var dps = chart.options.data[0].dataPoints;
  var len = dps.length;
  var inx = 0;
  var jnx = 0;

  (function sortEachElement() {
    if(jnx >= len - 1 - inx) {
      jnx = 0;
      inx++;
    }
    if(inx < len) {
      if( dps[jnx].color > dps[jnx+1].color ) {
        var temp = dps[jnx];
        dps[jnx] = dps[jnx+1];
        dps[jnx+1] = temp;
        for(var i=0; i<dps.length; i++) {
          dps[i].x = undefined;
        }
        chart.options.data[0].dataPoints = dps; 
        chart.render();
        
      }
     
      jnx++;
      setTimeout(function (){
        sortEachElement();
      }, 10);
    }
  })();
}

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS