Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highchart: in bar chart, how to increment a bar according to data?

Code in concern: http://jsfiddle.net/h6qrbpwo/10/

$(function() {
  var chart;
  var d = 1;
  var index = 0;

  function getYValue(chartObj, seriesIndex, xValue) {
    var yValue = null;
    var points = chartObj.series[seriesIndex].points;
    for (var i = 0; i < points.length; i++) {
        if(i == points.length - 1 && points[i].x != xValue){    
        return 0;
      }
      yValue = points[i].y;
    }
    return yValue;
  }
  $('#b').click(function() {
    console.log(index);
    var d = getYValue(chart, index, 20.5);
    console.log(d);
    d++;
    console.log(d);
    chart.addSeries({
      grouping: false,
      data: [
        [20.5, d]
      ]
    });
    index ++;
  })
  chart = new Highcharts.Chart({
    chart: {
      type: 'column',
      renderTo: 'container'
    },
    title: {
      text: ''
    },
    xAxis: {
      min: 0,
      max: 100
    },
    credits: {
      enabled: false
    },
    series: [{
      name: '',
      data: [5, 3, 4, 7, 2]
    }]
  });
});

(Note: this JSFiddle is just for demonstration purpose.)

I would like to have a bar chart with bars with animated incrementation (i.e. only the part increased) instead of redrawing the whole bar.

Thanks in advance.

like image 485
Aqqqq Avatar asked Aug 09 '16 10:08

Aqqqq


1 Answers

You can do something like this.

$(function() {
  var chart;
  var d = 1;
  var index = 0;

  function getYValue(chartObj, seriesIndex, xValue) {
    var yValue = null;
    var points = chartObj.series[seriesIndex].points;
    for (var i = 0; i < points.length; i++) {
        if(i == points.length - 1 && points[i].x != xValue){    
        return 0;
      }
      yValue = points[i].y;
    }
    return yValue;
  }
  $('#b').click(function() {
        //var newValue = series[0].data[0];
    //chart.series[0].points[0].update(100);
    chart.series[0].addPoint(0, false, false, false);
    chart.redraw(false);
    chart.series[0].points[chart.series[0].points.length - 1].update(1);
    /*
    console.log(index);
    var d = getYValue(chart, index, 20.5);
    console.log(d);
    d++;
    console.log(d);
    chart.addSeries({
      grouping: false,
      data: [
        [20.5, d]
      ]
    });
    index ++;
    */
  })
  chart = new Highcharts.Chart({
    chart: {
      type: 'column',
      renderTo: 'container'
    },
    title: {
      text: ''
    },
    xAxis: {
      min: 0,
      //max: 10
    },
    credits: {
      enabled: false
    },
    series: [{
      name: '',
      data: [5, 3, 4, 7, 2]
    }]
  });
});

You can see the demo here.

like image 95
Sibeesh Venu Avatar answered Oct 25 '22 08:10

Sibeesh Venu