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 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-graph',
				data: decimal_data,
				xkey: 'x',
				ykeys: ['y'],
				labels: ['sin(x)'],
				parseTime: false,
				resize: true,
				lineColors: jQuery('#morris-line-graph').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
  
    
  
    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-graph',
				data: decimal_data,
				xkey: 'x',
				ykeys: ['y'],
				labels: ['sin(x)'],
				parseTime: false,
				resize: true,
				lineColors: jQuery('#morris-line-graph').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
			});
  
Source: 06-libraries/morrisjs/morrisjs.scss, line 12

7.1.2 javascript.morrisjs.areachart Area Chart

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-graph').css('color');
      Morris.Area({
        element: 'morris-area-graph',
        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-graph').data('colors').split(',')
      });
  
Markup
  
    
  
    var labelColor = jQuery('#morris-area-graph').css('color');
      Morris.Area({
        element: 'morris-area-graph',
        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-graph').data('colors').split(',')
      });
  
Source: 06-libraries/morrisjs/morrisjs.scss, line 52