7 javascript Javascript

Source: 00-config/_variables.scss, line 39

7.1 javascript.morrisjs Morris.js

Morris.js is used to visualise good-looking charts. Morris.js provides documntation on their website.

Source: 06-libraries/morrisjs/morrisjs.scss, line 3

7.1.1 javascript.morrisjs.linechart Line Chart

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Create an area chart using Morris.Line(options). Line charts takes in many options which are listed here

Example
  
    
  
    var decimal_data = [];
			for (var x = 0; x <= 360; x += 10) {
				decimal_data.push({
					x: x,
					y: 1.5 + 1.5 * Math.sin(Math.PI * x / 180).toFixed(4)
				});
			}
			window.m = Morris.Line({
				element: 'morris-line-chart',
				data: decimal_data,
				xkey: 'x',
				ykeys: ['y'],
				labels: ['sin(x)'],
				parseTime: false,
				resize: true,
				lineColors: jQuery('#morris-line-chart').data('colors').split(','),
				hoverCallback: function (index, options, default_content) {
					var row = options.data[index];
					return default_content.replace("sin(x)", "1.5 + 1.5 sin(" + row.x + ")");
				},
				xLabelMargin: 10,
				integerYLabels: true
			});
  
Markup: 06-libraries/morrisjs/morrisjs-linechart.twig
<pre class="language-html">
  <code class="language-markup">
    <div id="morris-line-graph" style="height: 200px" data-colors="#29abe2,#ffc142"></div>
  </code>
</pre>
<pre>
  <code class="language-javascript">
    var decimal_data = [];
			for (var x = 0; x <= 360; x += 10) {
				decimal_data.push({
					x: x,
					y: 1.5 + 1.5 * Math.sin(Math.PI * x / 180).toFixed(4)
				});
			}
			window.m = Morris.Line({
				element: 'morris-line-chart',
				data: decimal_data,
				xkey: 'x',
				ykeys: ['y'],
				labels: ['sin(x)'],
				parseTime: false,
				resize: true,
				lineColors: jQuery('#morris-line-chart').data('colors').split(','),
				hoverCallback: function (index, options, default_content) {
					var row = options.data[index];
					return default_content.replace("sin(x)", "1.5 + 1.5 sin(" + row.x + ")");
				},
				xLabelMargin: 10,
				integerYLabels: true
			});
  </code>
</pre>
Source: 06-libraries/morrisjs/morrisjs.scss, line 12

7.1.2 javascript.morrisjs.areachart Area Chart

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Create an area chart using Morris.Area(options). Area charts take all the same options as line charts, and the following extras: behaveLikeLine.

Example
  
    
  
    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(',')
      });
  
Markup: 06-libraries/morrisjs/morrisjs-areachart.twig
<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>
Source: 06-libraries/morrisjs/morrisjs.scss, line 52

7.1.3 javascript.morrisjs.barchart Bar Chart

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Create an area chart using Morris.Area(options). Area charts take all the same options as line charts, and the following extras: behaveLikeLine.

Usage statistics for Drupal core
Example
  
    
  
    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(',')
    });
  
Markup: 06-libraries/morrisjs/morrisjs-barchart.twig
<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>
Source: 06-libraries/morrisjs/morrisjs.scss, line 88

7.1.4 javascript.morrisjs.donutchart Donut Chart

Toggle full screen Open in new window 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