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
Create an area chart using Morris.Line(options)
.
Line charts takes in many options which are listed here
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
Create an area chart using Morris.Area(options)
.
Area charts take all the same options as line charts,
and the following extras: behaveLikeLine
.
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