Gráficos para aplicações web com morris.js

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>

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});

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});

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});

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});