Morris Charts

Stacked Bar Chart

Create stacked bar charts using Morris.Bar(options), where options is an object containing the configuration options.

Created with Raphaël 2.1.207515022530020152014201320122011201020092008200720062005
Area Chart

Create an area chart using Morris.Area(options). Area charts take all the same options as line charts.

Created with Raphaël 2.1.20501001502002015201420132012201120102009
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 configuration options.

Created with Raphaël 2.1.2$0$25$50$75$10020152014201320122011201020092008
Bar Chart

Create bar charts using Morris.Bar(options), where options is an object containing the configuration options.

Created with Raphaël 2.1.202550751002015201420132012201120102009
Area Chart with Point

Create an area chart using Morris.Area(options). Area charts take all the same options as line charts.

Created with Raphaël 2.1.20501001502002015201420132012201120102009
Donut Chart

This really couldn't be easier. Create a Donut chart using Morris.Donut(options).

Created with Raphaël 2.1.2Financial30

Flot Charts

Multiple Statistics

Stacked chart not only shows the trends over time, you can also see the cumulative sum of all data.Your awesome text goes here.

0
1
2
3
4
5
6
7
8
9
10
11
12
0
5
10
15
20
Google  
Yahoo  
Realtime Statistics

You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.

0
25
50
75
100
125
150
175
200
225
250
275
0
20
40
60
80
100
Line Chart

The line chart is most often used chart, aslo the easiest to make, it shows trends over time, visualizes data and information, so users can know how exactly these numbers are relate to each other in one glance.

0
1
2
3
4
5
6
7
8
9
10
11
12
0.0
2.5
5.0
7.5
10.0
12.5
15.0
Visits  
Page views  
Donut Pie

Pie chart is used to see the proprotion of each data groups, making Flot pie chart is pretty simple, in order to make pie chart you have to incldue jquery.flot.pie.js plugin.

 Series 1
 Series 2
 Series 3
 Series 4
Pie Chart

Pie chart is used to see the proprotion of each data groups, making Flot pie chart is pretty simple, in order to make pie chart you have to incldue jquery.flot.pie.js plugin.

Series 1
Series 2
Series 3
Series 4
Stacked Bar chart

With the stack plugin, you can have Flot stack the series. This is useful if you wish to display both a total and the constituents it is made of.

0.0
1.0
2.0
3.0
4.0
5.0
6.0
7.0
8.0
9.0
10.0
0
5
10
15
20
25
30
Series One  
Series Two  
Series Three  
Line Chart

The line chart is most often used chart, aslo the easiest to make, it shows trends over time, visualizes data and information, so users can know how exactly these numbers are relate to each other in one glance.

0
1
2
3
4
5
6
7
8
9
10
11
-1.0
-0.5
0.0
0.5
1.0
Google  
Yahoo  
Combine Chart
22h
00h
02h
04h
06h
08h
10h
12h
14h
16h
18h
20h
0
100
200
300
400
500
600
700
800
Last 24 Hours  
Last 48 Hours  
Difference  

Knob Charts

Disable display input
Cursor mode
Display previous value
Angle offset and arc