Step - 1 : Create New Project.
Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.Step-2: Add a Database.
Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.Step-3: Create table for getting data for chart.
Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have used one table as below
Step-4: Add Entity Data Model.
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.
Step-5: Add a web page and design for show google chart (pie) with database data.
HTML Code
- <div id="chart_div" style="width:500px;height:400px">
- <%-- Here Chart Will Load --%>
- </div>
Step-6: Add Jquery code for call server side function for get data from sql server database.
Write this below jquery code inside page <head></head> section.Jquery Code
- <%-- Here We need to write some js code for load google chart with database data --%>
- <script src="Scripts/jquery-1.7.1.js"></script>
- <script type="text/javascript" src="https://www.google.com/jsapi"></script>
- <script>
- var chartData; // globar variable for hold chart data
- google.load("visualization", "1", { packages: ["corechart"] });
- // Here We will fill chartData
- $(document).ready(function () {
- $.ajax({
- url: "GoogleChart.aspx/GetChartData",
- data: "",
- dataType: "json",
- type: "POST",
- contentType: "application/json; chartset=utf-8",
- success: function (data) {
- chartData = data.d;
- },
- error: function () {
- alert("Error loading data! Please try again.");
- }
- }).done(function () {
- // after complete loading data
- google.setOnLoadCallback(drawChart);
- drawChart();
- });
- });
- function drawChart() {
- var data = google.visualization.arrayToDataTable(chartData);
- var options = {
- title: "Company Revenue",
- pointSize: 5
- };
- var pieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
- pieChart.draw(data, options);
- }
- </script>
Step-7: Write server-side code (function) for getting data from SQL server database.
Before writing code add this namespace to your code behind page.Here is the function, which is called by jquery code.
- using System.Web.Script.Services;
- using System.Web.Services;
Step-8: Run Application
- [WebMethod]
- [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
- public static object[] GetChartData()
- {
- List<GoogleChartData> data = new List<GoogleChartData>();
- //Here MyDatabaseEntities is our dbContext
- using (MyDatabaseEntities dc = new MyDatabaseEntities())
- {
- data = dc.GoogleChartDatas.ToList();
- }
- var chartData = new object[data.Count + 1];
- chartData[0] = new object[]{
- "Product Category",
- "Revenue Amount"
- };
- int j = 0;
- foreach (var i in data)
- {
- j++;
- chartData[j] = new object[] {i.ProductCategory, i.RevenueAmount };
- }
- return chartData;
- }
No comments:
Post a Comment