Pie chart: In this article will create a pie chart using chart.js library with HTML5 canvas. Chart.js uses the HTML5 canvas element. It's supported in all modern browsers, and polyfills support for IE7/8. Chart.js has many more feature do visit their official website.
Download: First download chart.js library from Github or from the official website.
After downloading files, you will get the chart.js and chart.min.js file includes it in your project .i.e web page HTML page.
//*
<head runat="server">
<title>Pie Chart Asp.net</title>
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Scripts/Chart.js" type="text/javascript"></script>
</head>
//*# Html Markup: Where you want to display your pie chart.
Now let's add html5 canvas tag in your page and specify width, height respectively. Your HTML markup looks like below//*
<div id=”wrapper”>
<canvas id="myChart" width="200" height="200"></canvas>
</div>
//*# jQuery: Code Implement chart.js on html5 canvas tag.
//*
var data = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}];
// Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
var myPieChart = new Chart(ctx).Pie(data);
//*
You can also check these articles:
- Chart.js Asp.net : Create Pie chart with database Jquery Ajax C#.
- Chart.js Asp.net: Create Line chart with database Jquery Ajax C#.
- Generic Handler ashx file : Post send JSON data in Asp.net C#.
- jQuery Ajax JSON Example in Asp.net with sql database.
Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.
PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee
Post Comment
Your email address will not be published. Required fields are marked *