Chartjs-How does this javascript recolor the doghnut?

by

0👍

✅

The chart has 2 segments : green and grey.

Both segment have a value. Green will start with 0 – You can’t see the green part at the beginning. And grey that starts at 60 – Full circle

theChart.segments[0].value = theChart.segments[0].value + 1

This line is increasing the value of the first segment (green color) by one.

theChart.segments[1].value = theChart.segments[1].value - 1

The second line is decreasing the value of the second segment (grey color) by one

Below is the snippet with a display of the green and grey value each second

$(document).ready(function() {

  var max_value = 60

  chartOptions = {
    segmentShowStroke: false,
    percentageInnerCutout: 75,
    animation: false
  };

  chartData = [{
    value: 0,
    color: '#4FD134' //ugly green
  }, {
    value: max_value,
    color: '#DDDDDD' //grey
  }];

  var ctx = $('#chart').get(0).getContext("2d");
  var theChart = new Chart(ctx).Doughnut(chartData, chartOptions);

  theInterval = setInterval(function() {
    if (theChart.segments[0].value === max_value) {
      clearInterval(theInterval);
    } else {
      console.log("GREEN = " + theChart.segments[0].value);
      console.log("GRAY = " + theChart.segments[1].value);
      console.log("***");
      theChart.segments[0].value = theChart.segments[0].value + 1
      theChart.segments[1].value = theChart.segments[1].value - 1
      theChart.update()
    }
  }, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="chart" width="300" height="300"></canvas>

Update

You can set yourself the desired value. The sum of all segments value need to be equal to 60

$(document).ready(function() {

  var max_value = 60

  chartOptions = {
    segmentShowStroke: false,
    percentageInnerCutout: 75,
    animation: false
  };

  chartData = [{
    value: 0,
    color: '#4FD134' //ugly green
  }, {
    value: max_value,
    color: '#DDDDDD' //grey
  }];

  var ctx = $('#chart').get(0).getContext("2d");
  var theChart = new Chart(ctx).Doughnut(chartData, chartOptions);

  theChart.segments[0].value = 30;
  theChart.segments[1].value = 30;
  theChart.update()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="chart" width="300" height="300"></canvas>

0👍

There are only two segments gray and green,

chartData = [{
                value: 0,
                color: '#4FD134' //ugly green
            },{
                value: max_value,
                color: '#DDDDDD' //grey
            }];

so increasing the first one with decreasing second one will simply give that effect.

0👍

The chartData Array splits the Donut in two segments with the colors grey and green. Green has the index[0] and Grey has the index[1].
At the beginning of the script the value of charData[0] is 0 and charDate[1] is 60 as the entire Donut has a value of 60.
Now the two lines you have there increase the size of the green by 1 and reduce the size of the grey by 1 every time they are called upon.

Leave a comment