Geek Answers Handbook

Chartjs Donut disappears

I had a problem generating a chart when it has only one information to display and contains all 360º. Here is an example:

<!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="200" height="200"></canvas>

    <script>
    var canvas =  $( 'canvas' )
      , data = [
        {
          value     : 300,
          color     : "#F7464A",
          highlight : "#FF5A5E",
          label     : "Red"
        }
      ]
      , options = {"percentageInnerCutout":70,"showTooltips":false,"animateScale":true}
      , chart   = new Chart( canvas.get( 0 ).getContext( '2d' ) ).Doughnut( data, options );
  </script>
  </body>
</html>
Run codeHide result

Immediately after the graph ends with a 360º animation in the default Android browser, it disappears, but this does not happen in Chrome. Tested on Sony Xperia (v4.1.2) and Samsung S3.

This problem does not occur on my desktop, so it seems to be related to the default Android browser.

I also tested with the latest chart.js version 1.0.1-beta.4 ...

Here's an open question for github for this.

Has anyone solved this problem?

+4
1

, , , . , .

"", , .

, :

<!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 greater that the lowest allowed.
        // If it 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>
Hide result
+1

More articles:


All Articles