Click here to Skip to main content
15,792,539 members
Articles / Web Development / HTML

Pie Graph using CanvasJS in MVC

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


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.


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";


<div class="panel">
    <div class="panel-heading">
    <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>

<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"

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


  • 29-05-2015: Initial submission


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


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

Written By
Software Developer (Senior)
Australia Australia
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

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
Mostafa 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
Mostafa Asaduzzaman28-May-15 22:58 
GeneralRe: My Vote of 5 Pin
Mostafa Asaduzzaman30-May-15 17:25
Mostafa 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.