Skip to main content

# 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