Click here to Skip to main content
14,693,352 members
Articles » Web Development » ASP.NET » Reporting
Tip/Trick
Posted 28 May 2015

Stats

12.9K views
323 downloads
6 bookmarked

Pie Graph using CanvasJS in MVC

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
28 May 2015CPOL
How to create a quick pie graph using MVC Model and CanvasJS

Introduction

Showing data in graphical formats such as chart or graph is an important means of communication to get the ideas across. Top management within the organization always wants to see summarized information like charts or graphs rather that the raw data. In this short tip, I will show how to create a Pie graph for a hypothetical issue tracking system.

Background

Drawing charts/graphs in MVC application has been made easy with the JavaScript pakage called CanvasJS. In this demo, I have an MVC model to send the data to the view and in the view, I have I used CanvasJS to draw the chart.

For the demo, I have used Visual Studio 2013 and MVC 5.

Using the Code

I have created a new Web Site project. As the default project has all the necessary packages except the CanvasJs, so I have added the canvasjs.min.js to my scripts folder. 

Note: Currently CanvasJS is available with TypeScript in nuget library.

I have added the following class for the data:

public  class Status
    {
        public int Open { get; set; }
        public int InProgress { get; set; }
        public int Closed { get; set; }
        public int Suspended { get; set; }
        public int Referred { get; set; }
        public int Pending { get; set; }
    }

The view for the Chart is as below:

@model ChartUsingCanvasJS.Models.Status
@{
    ViewBag.Title = "Chart";
}

<h3>@ViewBag.Message</h3>

<div class="panel">
    <div class="panel-heading">
        
    </div>
    <div class="panel-body">
        <form class="form-horizontal container" role="form">

            <div class="form-column col-lg-12 col-md-12 col-sm-12">

                <div class="col-12 dashboard">
                    <div class="row">

                        <div class="col-md-12">
                            <div id="IssueStatus" class="chart small"></div>
                        </div>

                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="~/Scripts/canvasjs.min.js"></script>

<script type="text/javascript">

    // Issue status chart
    var issueStatus = new CanvasJS.Chart("IssueStatus", {
        data: [
          {
              showInLegend: false,
              indexLabelFontSize: '14',
              indexLabelFontColor: 'white',
              startAngle: 150,
              indexLabelPlacement: "inside",
              toolTipContent: "{name}: {y} issues",
              type: "pie",
              dataPoints: [
            { y: '@Model.Open', indexLabel: 'Open', name: 'Open' },
            { y: '@Model.InProgress', indexLabel: 'InProgress', name: 'InProgress' },
            { y: '@Model.Closed', indexLabel: 'Closed', name: 'Closed' },
            { y: '@Model.Suspended', indexLabel: 'Suspended', name: 'Suspended' },
            { y: '@Model.Referred', indexLabel: 'Referred', name: 'Referred' },
            { y: '@Model.Pending', indexLabel: 'Pending', name: 'Pending' }

              ]
          }
        ],
        title: {
            text: "Issues By Status",
            fontSize: "22"
        },
        legend: {
            fontFamily: "Arial",
            fontSize: 14
        },
        creditHref: "",
        backgroundColor: "white"
    });
    issueStatus.render();
</script>

The controller methods that send the model to the view are as below:

public class HomeController : Controller
   {
       public ActionResult Index()
       {
           Status status = new Status();  //some constant values for the chart
           status.Open = 100;
           status.InProgress = 34;
           status.Closed = 23;
           status.Pending = 12;
           status.Suspended = 5;
           status.Referred = 2;
           return View(status);
       }
   }

Image 1

Points of Interest

  • CanvasJS
  • MVC

History

  • 29-05-2015: Initial submission

Next

I will do other types of graphs using MVC frameworks in future.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mostafa Asaduzzaman
Software Developer (Senior)
Australia Australia
No Biography provided

Comments and Discussions

 
QuestionMy Vote Of 5 Pin
Mohammad A. Amer30-May-15 1:44
professionalMohammad A. Amer30-May-15 1:44 
AnswerRe: My Vote Of 5 Pin
Mostafa Asaduzzaman30-May-15 19:50
MemberMostafa Asaduzzaman30-May-15 19:50 
GeneralMy Vote of 5 Pin
aarif moh shaikh28-May-15 22:56
professionalaarif moh shaikh28-May-15 22:56 
GeneralRe: My Vote of 5 Pin
Mostafa Asaduzzaman28-May-15 22:58
MemberMostafa Asaduzzaman28-May-15 22:58 
GeneralRe: My Vote of 5 Pin
Mostafa Asaduzzaman30-May-15 17:25
MemberMostafa Asaduzzaman30-May-15 17:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.