ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Populate Pie and Doughnut Chart from database using AngularJS and Web API in ASP.Net<p>Hi&nbsp;skp,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">Controller</span></strong></p> <pre class="brush: csharp">[HttpGet] public string GetDashboardDetails() { // Get list from database. List&lt;Dashboard&gt; dboard = new List&lt;Dashboard&gt;(); Dashboard db = new Dashboard(); db.TransitValuePercent = 24; db.IssuedValuePercent = 51; db.StockValuePercent = 24; dboard.Add(db); return (new JavaScriptSerializer().Serialize(dboard)); } public class Dashboard { public int TransitValuePercent { get; set; } public int IssuedValuePercent { get; set; } public int StockValuePercent { get; set; } }</pre> <p><strong><span style="text-decoration: underline;">View</span></strong></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, []) app.controller(&#39;MyController&#39;, function ($scope, $http) { $scope.PopulateChart = function (chartType) { $http.get(&#39;/Home/GetDashboardDetails&#39;, { headers: { &#39;Content-Type&#39;: &#39;application/json&#39;} }) .then(function (response) { var labels = [&#39;Transit Value Percent&#39;, &#39;Issued Value Percent&#39;, &#39;Stock Value Percent&#39;]; var data = []; data.push(response.data[0].TransitValuePercent); data.push(response.data[0].IssuedValuePercent); data.push(response.data[0].StockValuePercent); var colors = [&#39;#FFD700&#39;, &#39;#FFE4C4&#39;, &#39;#7FFFD4&#39;]; var ctx = document.getElementById(&#34;dvCanvas&#34;).getContext(&#39;2d&#39;); var myChart = new Chart(ctx, { type: chartType, data: { datasets: [{ data: data, backgroundColor: colors}], labels: labels }, options: { title: { display: true, text: &#39;amount for transit, issued and stock&#39;, position: &#39;top&#39; }, responsive: true, tooltips: { callbacks: { label: function (tooltipItem, data) { var allData = data.datasets[tooltipItem.datasetIndex].data; var tooltipLabel = data.labels[tooltipItem.index]; var tooltipData = allData[tooltipItem.index]; var total = 0; for (var i in allData) { total += allData[i]; } var tooltipPercentage = Math.round((tooltipData / total) * 100); //return tooltipLabel + &#39;: &#39; + tooltipData + &#39; (&#39; + tooltipPercentage + &#39;%)&#39;; return tooltipPercentage + &#39;%&#39;; } } } } }); }); } }); &lt;/script&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34; align=&#34;center&#34;&gt; &lt;label for=&#34;ChartType&#34;&gt; &lt;input type=&#34;radio&#34; name=&#34;ChartType&#34; ng-click=&#34;PopulateChart(&#39;pie&#39;)&#34; /&gt;Pie &lt;input type=&#34;radio&#34; name=&#34;ChartType&#34; ng-click=&#34;PopulateChart(&#39;doughnut&#39;)&#34; /&gt;Doughnut &lt;/label&gt; &lt;hr /&gt; &lt;canvas id=&#34;dvCanvas&#34; &gt;&lt;/canvas&gt; &lt;/div&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/5BG1gnh.gif" alt="" width="341" height="395" /></span></strong></p>https://www.aspforums.net:443/Threads/180412/Populate-Pie-and-Doughnut-Chart-from-database-using-AngularJS-and-Web-API-in-ASPNet/https://www.aspforums.net:443/Threads/180412/Populate-Pie-and-Doughnut-Chart-from-database-using-AngularJS-and-Web-API-in-ASPNet/Tue, 23 Jul 2019 04:47:58 GMT