Implementation Of Morris Charts
Posted By : Shanu Kumar | 30-Jan-2018
There are so many ways to the
About Morris.js
Using Morrish.js we can able to draw different types of chart,
- Line charts
- Area Charts
- Bar charts
- Donut charts
It's very simple API for drawing these above charts and also a lot of option available to configure these charts.
Lets, start with Line charts.
Step-1 : Add morris.js and its dependencies to your page.
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>
Step-2: Now adding a <div> to your page that will contain your chart. Make sure it has an ID so you can refer to it in your Javascript later.
div id="mychart"></div>
Step -3 :Now add a <script> block to the end of your page, and write the following javascript code:
new Morris.Line({
element: 'mychart', // ID of the element in which to draw the chart.
// Chart data records
data: [
{ month: '2008', value: 20 },
{ month: '2009', value: 10 },
{ month: '2010', value: 5 },
{ month: '2011', value: 5 },
{ year: '2012', value: 20 }
],
xkey: 'year', // Attribute that contains x-values.
ykeys: ['value'], // Attributes that contain y-values.
labels: ['Value'] // Labels displayed when you hover over the charts
});
some of the following configuration options available for Line charts:
lineColors : it is an Arrays containing colour of the series.
resize : Set to true to enable automatic resizing when the containing element resizes. (default: false).
And many more configuration options are available for Line charts Here.
Now the Beautiful Line charts are ready to view.
Note: To redraw or repaint the charts with dynamical value then first you will have to empty the element of the of line charts like $("#mychart").empty() before the redraw the charts.
If you want to Edit or configure more with Line charts then open pen for creating charts .
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Shanu Kumar
Shanu has experience in Java EE & Java SE and also interested in EJB application. He has knowledge of SQL and worked on MYSQL & Oracle databases. He loves listening to music.