How to create draw a doughnut chart using ChartJS in Asp.net detailed Example

Category > ASP.NET || Published on : Friday, November 20, 2015 || Views: 13345 || doughnut chart using ChartJS doughnut chart draw a doughnut chart using ChartJS in Asp.net detailed Example


Introduction

Here Pawan Kumar will explain how to draw a doughnut chart using ChartJS in Asp.net detailed Example

Description

In previous post I have explained Create table from json jQuery with detailed example, Zoom Feature for Query Text and Results Text in SQL Server Management Studio 2012, How to make How to make blinking/flashing text with CSS3 and jQuery, Format JSON Date String To Local DataTime Object Using JavaScript, How to replace number from a string in C#, How to Download Json Data from URL in Asp.Net using C sharp, and many more articles.

Now I will explain How to How to create draw a doughnut chart using ChartJS in Asp.net detailed Example

So follow the steps to learn How to create draw a doughnut chart using ChartJS in Asp.net detailed Example

Step 1: First, We start by creating an Empty asp.net web site in Visual Studio .NET 2013.

Step 2: Download the 2 files i.e. "jQuery" and "chartjs" file from the below location

        * chartjs from http://www.chartjs.org
        * jquery from https://jquery.com
 

Step 3: Create a folder with name "js" and place both files into that folder

Step 4: Add a js file with name "script.js" into "js" folder and write the below codes:-

$(document).ready(function(){
	var ctx = $("#mycanvas").get(0).getContext("2d");

	var data = [
		{
			value: 150,
			color: "cornflowerblue",
			highlight: "lightskyblue",
			label: "ASP.NET"
		},
		{
			value: 50,
			color: "lightgreen",
			highlight: "yellowgreen",
			label: "C#"
		},
		{
			value: 40,
			color: "orange",
			highlight: "darkorange",
			label: "Java"
		}
	];

	var chart = new Chart(ctx).Doughnut(data);
});

Step 4: Add a new web page name "chartjs-example.aspx" with the following codes:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="chartjs-example.aspx.cs"
    Inherits="chartjs_example" %>

<!DOCTYPE html>
<html>
<head>
    <title>ChartJS - Doughnut example with ASP.NET</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/Chart.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <canvas id="mycanvas" width="256" height="256">
    </canvas>
    </form>
</body>
</html>

Step 5: Run the application by pressing F5

Step 6: Screenshot will be shown below:-

Conclusion,In this tutorial we have learned  How to create draw a doughnut chart using ChartJS in Asp.net detailed Example

Conclusion:

So, In this tutorial we have learned, How to create draw a doughnut chart using ChartJS in Asp.net detailed Example

Download Source Codes