You are here

morrisjs-areachart.twig in Open Social 8.8

<pre class="language-html">
  <code class="language-markup">
    <div id="morris-area-chart" style="height: 200px" data-colors="#29abe2,#ffc142"></div>
  </code>
</pre>
<pre>
  <code class="language-javascript">
    var labelColor = jQuery('#morris-area-chart').css('color');
      Morris.Area({
        element: 'morris-area-chart',
        behaveLikeLine: true,
        data: [
          {x: '2017 Q1', y: 3, z: 3},
          {x: '2017 Q2', y: 2, z: 1},
          {x: '2017 Q3', y: 2, z: 4},
          {x: '2017 Q4', y: 3, z: 3}
        ],
        xkey: 'x',
        ykeys: ['y', 'z'],
        labels: ['Y', 'Z'],
        gridTextColor: labelColor,
        lineColors: jQuery('#morris-area-chart').data('colors').split(',')
      });
  </code>
</pre>

File

themes/socialbase/components/06-libraries/morrisjs/morrisjs-areachart.twig
View source
  1. <pre class="language-html">
  2. <code class="language-markup">
  3. <div id="morris-area-chart" style="height: 200px" data-colors="#29abe2,#ffc142"></div>
  4. </code>
  5. </pre>
  6. <pre>
  7. <code class="language-javascript">
  8. var labelColor = jQuery('#morris-area-chart').css('color');
  9. Morris.Area({
  10. element: 'morris-area-chart',
  11. behaveLikeLine: true,
  12. data: [
  13. {x: '2017 Q1', y: 3, z: 3},
  14. {x: '2017 Q2', y: 2, z: 1},
  15. {x: '2017 Q3', y: 2, z: 4},
  16. {x: '2017 Q4', y: 3, z: 3}
  17. ],
  18. xkey: 'x',
  19. ykeys: ['y', 'z'],
  20. labels: ['Y', 'Z'],
  21. gridTextColor: labelColor,
  22. lineColors: jQuery('#morris-area-chart').data('colors').split(',')
  23. });
  24. </code>
  25. </pre>