O uso é bem simples
- adicione as dependências (jquery, raphael e morris)
- adicione uma div
- adicione um script
1<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
2<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
3<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
4<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
1<div id="myfirstchart" style="height: 250px;"></div>
1<script>
2 new Morris...
3</script>
Gráfico de linha
1<div id="myfirstchart" style="height: 250px;"></div>
1new Morris.Line({
2 // ID of the element in which to draw the chart.
3 element: 'myfirstchart',
4 // Chart data records -- each entry in this array corresponds to a point on
5 // the chart.
6 data: [
7 { year: '2008', value: 20 },
8 { year: '2009', value: 10 },
9 { year: '2010', value: 5 },
10 { year: '2011', value: 5 },
11 { year: '2012', value: 20 }
12 ],
13 // The name of the data record attribute that contains x-values.
14 xkey: 'year',
15 // A list of names of data record attributes that contain y-values.
16 ykeys: ['value'],
17 // Labels for the ykeys -- will be displayed when you hover over the
18 // chart.
19 labels: ['Value']
20});
Gráfico de Área
1<div id="area-example" style="height: 250px;"></div>
1Morris.Area({
2 element: 'area-example',
3 data: [
4 { y: '2006', a: 100, b: 90 },
5 { y: '2007', a: 75, b: 65 },
6 { y: '2008', a: 50, b: 40 },
7 { y: '2009', a: 75, b: 65 },
8 { y: '2010', a: 50, b: 40 },
9 { y: '2011', a: 75, b: 65 },
10 { y: '2012', a: 100, b: 90 }
11 ],
12 xkey: 'y',
13 ykeys: ['a', 'b'],
14 labels: ['Series A', 'Series B']
15});
Gráfico de barras
1<div id="bar-example" style="height: 250px;"></div>
1Morris.Bar({
2 element: 'bar-example',
3 data: [
4 { y: '2006', a: 100, b: 90 },
5 { y: '2007', a: 75, b: 65 },
6 { y: '2008', a: 50, b: 40 },
7 { y: '2009', a: 75, b: 65 },
8 { y: '2010', a: 50, b: 40 },
9 { y: '2011', a: 75, b: 65 },
10 { y: '2012', a: 100, b: 90 }
11 ],
12 xkey: 'y',
13 ykeys: ['a', 'b'],
14 labels: ['Series A', 'Series B']
15});
Gráfico de rosquinha
1<div id="donut-example" style="height: 250px;"></div>
1Morris.Donut({
2 element: 'donut-example',
3 data: [
4 {label: "Download Sales", value: 12},
5 {label: "In-Store Sales", value: 30},
6 {label: "Mail-Order Sales", value: 20}
7 ]
8});
Materialize
- funciona bem com materializecss
Area Chart Example
Area Chart Example