You are here

morrisjs-barchart.twig in Open Social 8.3

<pre class="language-html">
  <code class="language-markup">
    <div id="morris-bar-chart" style="height: 200px" data-colors="#29abe2,#ffc142,#1ab394"></div>
  </code>
</pre>
<pre>
  <code class="language-javascript">
    var labelColor = jQuery('#morris-bar-chart').css('color');
    Morris.Bar({
      element: 'morris-bar-chart',
      data: [
        { y: '2012', 6: 257,790, 7: 517,920, 8: 0 },
        { y: '2013', 6: 234,696, 7: 732,660, 8: 0 },
        { y: '2014', 6: 172,186, 7: 964,016, 8: 0 },
        { y: '2015', 6: 124,448, 7: 1,127,621, 8: 44,335 },
        { y: '2016', 6: 86,839, 7: 994,627, 8: 116,559 }
      ],
      xkey: 'y',
      ykeys: ['6', '7', '8'],
      labels: ['Drupal 6', 'Drupal 7', Drupal, 8],
      gridTextColor: labelColor,
      barColors: jQuery('#morris-bar-chart').data('colors').split(',')
    });
  </code>
</pre>

File

themes/socialbase/components/06-libraries/morrisjs/morrisjs-barchart.twig
View source
  1. <pre class="language-html">
  2. <code class="language-markup">
  3. <div id="morris-bar-chart" style="height: 200px" data-colors="#29abe2,#ffc142,#1ab394"></div>
  4. </code>
  5. </pre>
  6. <pre>
  7. <code class="language-javascript">
  8. var labelColor = jQuery('#morris-bar-chart').css('color');
  9. Morris.Bar({
  10. element: 'morris-bar-chart',
  11. data: [
  12. { y: '2012', 6: 257,790, 7: 517,920, 8: 0 },
  13. { y: '2013', 6: 234,696, 7: 732,660, 8: 0 },
  14. { y: '2014', 6: 172,186, 7: 964,016, 8: 0 },
  15. { y: '2015', 6: 124,448, 7: 1,127,621, 8: 44,335 },
  16. { y: '2016', 6: 86,839, 7: 994,627, 8: 116,559 }
  17. ],
  18. xkey: 'y',
  19. ykeys: ['6', '7', '8'],
  20. labels: ['Drupal 6', 'Drupal 7', Drupal, 8],
  21. gridTextColor: labelColor,
  22. barColors: jQuery('#morris-bar-chart').data('colors').split(',')
  23. });
  24. </code>
  25. </pre>