7.1.4 javascript.morrisjs.donutchart Donut Chart

Toggle example guides Toggle HTML markup

Create a Donut chart using Morris.Donut(options), with the these options.

Usage statistics for Drupal core at February 12, 2017
Example
  
    
  
    Morris.Donut({
      element: 'morris-donut-chart',
      data: [
        { label: 'Drupal 5', value: 1262},
        { label: 'Drupal 6', value: 76842},
        { label: 'Drupal 7', value: 985007},
        { label: 'Drupal 8', value: 140044}
      ],
      colors: jQuery('#morris-donut-chart').data('colors').split(',')
    });
  
Markup: 06-libraries/morrisjs/morrisjs-donutchart.twig
<pre class="language-html">
  <code class="language-markup">
    <div id="morris-donut-chart" data-colors="#29abe2,#ffc142,#1ab394,#d9534f"></div>
  </code>
</pre>
<pre>
  <code class="language-javascript">
    Morris.Donut({
      element: 'morris-donut-chart',
      data: [
        { label: 'Drupal 5', value: 1262},
        { label: 'Drupal 6', value: 76842},
        { label: 'Drupal 7', value: 985007},
        { label: 'Drupal 8', value: 140044}
      ],
      colors: jQuery('#morris-donut-chart').data('colors').split(',')
    });
  </code>
</pre>
Source: 06-libraries/morrisjs/morrisjs.scss, line 126