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-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