How to update JS variable in value field of charts.js?

Question

On page load, a charts.js Chart is drawn (more on that below). I also have some checkboxes like...

            <input type="checkbox" id="something"  name="something" value="25" data-val="25" checked="checked" class="option">
            <label for="something">Something</label>

            <input type="checkbox" id="other"  name="other" value="5" data-val="5" checked="checked" class="option">
            <label for="other">Other</label>

I have this JS for creating variables and then seeing if a checkbox is checked or unchecked and then either keeping the value the same or giving it a new value of 0. I also have an updateBreakdown() function which destroys the chart and re-draws it.

Below that is my code for a charts.js Chart. Notice the data uses my variables for the "values". On page load, the chart creates fine. When I uncheck a box, for example, the "something" box, the value of the something variable should change to 0 and therefore, it should not take up ANY space on the chart when it gets re-drawn. But it appears with 25 always.

So I could be wrong, but I feel like something is wrong with how I originally declare the variables and/or how I keep their scope?

Or maybe I just have to do something different to make the charts.js data "refresh" the variables that are being used as values?

Anyone see where I'm going wrong?

  <script>
    var something=25;
    var other=5;


    $( document ).ready(function() {
        $('.option').on('change', function() {

          if ($('#something').is(':checked')) {
              var something = 25;
          } else {
              var something = 0;
          }

           if ($('#other').is(':checked')) {
              var other= 5;
          } else {
              var other= 0;
          }

        updateBreakdown();

        });

    });

    function updateBreakdown() {

                // create the graph from scratch
                doughnutChart.destroy()
                doughnutChart = new Chart(ctx).Doughnut(doughnutData, {
                    percentageInnerCutout: 55
                });

            }

</script>
 <canvas id="breakdown" width="500" height="500"></canvas>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
              <script>

                var ctx = document.getElementById("breakdown").getContext("2d");
                var doughnutData = [
                   {
                      value: something,
                      label: 'My something Label',
                      color: '#811BD6'
                   },
                   {
                      value: other,
                      label: 'My other label',
                      color: '#D18177'
                   }
                ];

                var doughnutChart = new Chart(ctx).Doughnut(doughnutData, {
                    percentageInnerCutout: 55
                });
</script>

Answer 1

Try giving doughnutData its new configuration data before you create the new chart.

function updateBreakdown() {

            // create the graph from scratch
            doughnutChart.destroy();
            var doughnutData = [
               {
                  value: something,
                  label: 'My something Label',
                  color: '#811BD6'
               },
               {
                  value: other,
                  label: 'My other label',
                  color: '#D18177'
               }
            ];
            doughnutChart = new Chart(ctx).Doughnut(doughnutData, {
                percentageInnerCutout: 55
            });

 }

And make this changes:

if ($('#something').is(':checked')) {
          //var something = 25;//replace these
            something = 25;//with these
      } else {
          //var something = 0;
            something = 0;
      }

       if ($('#other').is(':checked')) {
          //var other= 5;
            other= 5;
      } else {
          //var other= 0;
            other= 0;
      }