This article gives steps for RGraph Class Library to create 3D Pie Chart in ASP .NET from dataset.
In many Web Applications there is need of presenting data summary in Pie Chart. Pie Chart allows us to analyse data using proportional sectors. In case of Simple Shop System Application, user can analyse per day sales of products in pie chart to determine the product in demand.
Let’s see simple example to create 3D Pie Chart using RGraph.
And in HTML created canvas element as:
Short description of above code:
data:- represents numerical proportional of each slice of pie chart.
toolTips:- Represents the text displayed when user interact with slice e.g onclick.
labels:- Represents the descriptive name of the each slices of pie chart.
title:- Pie Chart title
For other field descriptions click here.
The output of above set up is:
In RGraph Class Library I just need to provide dataset of 2 columns, first for labels and second for data(must be numeric),colors are auto generated by library. This dataset can be generated from database, excel file or any relational data. Let’s see how this library helps to avoids lots of coding for sending data from server to client and then draw 3D pie chart.
After installing above library next step is to create server side method which will return the data for Pie Chart. I have created WebMethod named getChartData which returns object of class Chart, availabe in RGraph namespace.
In above code, dataset is populated with data manually, this dataset can be populated by data from dataset or any other data source.
NOTE: First Column must contain label data and second column must contain numerical value.
In above code snippet, chartPieChart is function in RGraph.custom.js created while installing RGraph Class Library.
This function is as follows (No need to write it,just reference RGraph.custom.js in web page,which already have this function):
That’s it, now after running the web page the output will be:
Hope you liked this article. For any query/suggestions let me know about it by commenting below.