Charts
Morris.js is the library that powers the graphs on gameforest. It's a very simple API for drawing line, bar, area and donut charts.
Line Chart
The public API is terribly simple. It's just one function: Morris.Line(options), where options is an object containing some of the following configuration options.
<div id="morris-line-chart"></div>
<script>
(function($) {
"use strict";
var area = new Morris.Line({
element: 'morris-line-chart',
resize: true,
data: [
{ y: '2011', a: 30, b: 13 },
{ y: '2012', a: 75, b: 45 },
{ y: '2013', a: 50, b: 40 },
{ y: '2014', a: 75, b: 63 },
{ y: '2015', a: 50, b: 40 },
{ y: '2016', a: 75, b: 65 },
{ y: '2017', a: 100, b: 30 }
],
pointSize: 6,
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Item 1', 'Item 2'],
lineColors: ['#2575dc', '#0E9A49'],
hideHover: 'auto'
});
})(jQuery);
</script>Bar Chart
Create bar charts using Morris.Bar(options), where options is an object containing the following configuration options.
<div id="morris-bar-chart"></div>
<script>
(function($) {
"use strict";
var bar = new Morris.Bar({
element: 'morris-bar-chart',
resize: true,
data: [
{y: '2008', a: 100, b: 90},
{y: '2009', a: 73, b: 45},
{y: '2010', a: 55, b: 42},
{y: '2010', a: 75, b: 65},
{y: '2011', a: 20, b: 40},
{y: '2013', a: 75, b: 65},
{y: '2014', a: 100, b: 90}
],
barColors: ['#0E9A49', '#e74c3c'],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['CPU', 'DISK'],
hideHover: 'auto'
});
})(jQuery);
</script>Area Chart
The public API is terribly simple. It's just one function: Morris.Line(options), where options is an object containing some of the following configuration options.
<div id="morris-bar-chart"></div>
<script>
(function($) {
"use strict";
var area = new Morris.Area({
element: 'morris-area-chart',
resize: true,
data: [
{y: '2011 Q1', item1: 2666, item2: 2666},
{y: '2011 Q2', item1: 2778, item2: 2294},
{y: '2011 Q3', item1: 4912, item2: 1969},
{y: '2011 Q4', item1: 3767, item2: 3597},
{y: '2012 Q1', item1: 6810, item2: 1914},
{y: '2012 Q2', item1: 5670, item2: 4293},
{y: '2012 Q3', item1: 4820, item2: 3795},
{y: '2012 Q4', item1: 15073, item2: 5967},
{y: '2013 Q1', item1: 10687, item2: 4460},
{y: '2013 Q2', item1: 8432, item2: 5713}
],
xkey: 'y',
ykeys: ['item1', 'item2'],
labels: ['Item 1', 'Item 2'],
lineColors: ['#2575dc', '#0E9A49'],
hideHover: 'auto'
});
})(jQuery);
</script>Donut Chart
This really couldn't be easier. Create a Donut chart using Morris.Donut(options), with the following options.
<div id="morris-bar-chart"></div>
<script>
(function($) {
"use strict";
var donut = new Morris.Donut({
element: 'morris-donut-chart',
resize: true,
colors: ["#e74c3c", "#2575dc", "#0E9A49"],
data: [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
],
hideHover: 'auto'
});
})(jQuery);
</script>