Category >
ASP.NET
|| Published on :
Friday, November 20, 2015 || Views:
13487
||
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