Morris.js donut chart examples – sample code

I love Morris charts because of its simplicity. If in any project I have to show any data in chart form then I mainly use Morris.js.

These are simple, powerful and beautiful. So here will see how to create morris donut charts.

1. First thing we have to do is include reference of Morris.js file along with jquery js and raphael js files.

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>

 

2. Now simply create an HTML element like DIV to in which we want to show our data in donut chart form. Don’t forget to give an id to this element because we will use it in js.

<div id="donut-example"></div>

3. Final step will be to add a script in the bottom of the page to create morris.js donut chart in element specified by its id.

Morris.Donut({
  element: 'donut-example',
  data: [
    {label: "Leads", value: 12},
    {label: "Sales", value: 30},
    {label: "Orders", value: 50},
    {label: "Returned", value: 5},
    {label: "Abandoned", value: 9}
  ]
});
And it will display chart similar to this one:

4. If you want to give custom colors to your chart then you can define another property named colors like we have specified data. Keep in mind that your color order should be in same order in which you have given order to data so that correct color will be displayed for corresponding data. So now your script will be like this.

Morris.Donut({
  element: 'donut-example',
  colors: ["#00a65a", "#f39c12", "#3c8dbc", "#dd4b39", "#555299"],
  data: [
    {label: "Leads", value: 12},
    {label: "Sales", value: 30},
    {label: "Orders", value: 50},
    {label: "Returned", value: 5},
    {label: "Abandoned", value: 9}
  ]
});
And it will display chart similar to this one:

Leave a Reply

Your email address will not be published.