[Chartjs]-Chartjs Doughnut disappears

by

2đź‘Ť

After a couple of days searching for a workaround for this and since I didn’t get any response until now, I made some tests to identify the minimum supported value for it to work properly. Right now, I have it working on the devices mentioned before.

On the following example there are various test values for the “data” array so feel free to test them and new ones to identify any bug.

So here’s what I came up with:

<!doctype html>
<html>
  <head>
    <title>Chart Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.js"></script>
  </head>
  <body>
    <canvas width="300" height="300"></canvas>
    <script>
      var canvas        = $( 'canvas' )
        , lowestValue   = 0.001          // Minimum supported value
        , highestValue  = 0
        , emptySection  = {
              value     : lowestValue
            , color     : '#e8e8e8'
            , highlight : '#e8e8e8'
            , label     : ''
          }
        , data    = []
        /*, data = [
              {
                  value     : 0
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
          ]
        , data = [
              {
                  value     : 1
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
          ]
        , data = [
              {
                  value     : 0
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
            , {
                  value     : 0
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
          ]
        , data = [
              {
                  value     : 0
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
            , {
                  value     : 1
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
          ]
        , data = [
              {
                  value     : 1
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
            , {
                  value     : 0
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
          ]
        , data = [
              {
                  value     : 1
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
            , {
                  value     : 2
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
          ]
        , data = [
              {
                  value     : 0.000001
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
            , {
                  value     : 0.0058
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
                }
            , {
                  value     : 1
                , color     : '#FAEC23'
                , highlight : '#FAEC23'
                , label     : 'Yellow'
              }
          ]
        , data = [
              {
                  value     : 0.00
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 1
                , color     : '#FAEC23'
                , highlight : '#FAEC23'
                , label     : 'Yellow'
              }
          ]*/
        , options = {
              'percentageInnerCutout': 70
            , 'showTooltips'         : false
            , 'animateScale'         : true
          }
        , chart   = {};

      // If there are no valid segments, include two new ones an set the value of one of them to 1
      // so that the chart appears.
      if ( data.length === 0 ) {
        data.push( $.extend( true, {}, emptySection ) );
        data.push( $.extend( true, {}, emptySection ) );

        data[ 0 ].value = 1;

      // Even if there are segments, we add a new one with one of the values:
      //	- 10: if the highest value of any segment is lower that the lowest allowed (0.001).
      //	- 0.001 of the highest value
      } else {

        $.each( data, function( index, el ) {
          el.value = el.value < lowestValue ? lowestValue : el.value;
          highestValue = el.value > highestValue ? el.value : highestValue;
        });

        data.push( $.extend( true, {}, emptySection ) );

        // Set the value of the new segment.
        // Get 0.001% of the highest value if it's greater that the lowest allowed.
        // If it's not greater that the lowest allowed, set it to a value big enought so the other segments don't appear.
        data[ data.length - 1 ].value = highestValue > lowestValue ? determinePercentage( highestValue ) : 10;
				}

        // Create the chart.
        chart = new Chart( canvas.get( 0 ).getContext( '2d' ) ).Doughnut( data, options );


        /**
        * Determines a specific percentage of a value. If no percentage is passed it assumes the lowest allowed (0.001).
        */
        function determinePercentage( total, percentage ) {
          percentage = percentage || lowestValue;

          return total ? ( parseFloat( total ) * percentage ) / 100 : 0;
        }

    </script>
  </body>
</html>

Leave a comment