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 Multi-Series Column Chart from database using AngularJS in ASP.Net<p>Hi&nbsp;rani,</p> <p>Here i have created the example with&nbsp;chart.js directive.</p> <p>Refer below sample.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <div class="demo_block"> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#34;MyApp&#34;, [&#34;chart.js&#34;]) app.controller(&#34;MyController&#34;, function ($scope, $http) { $scope.labels = [&#39;2014&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;, &#39;2018&#39;, &#39;2019&#39;]; $scope.series = [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;]; $scope.data = [[65, 59, 80, 81, 56, 55], [40, 28, 48, 40, 19, 86], [27, 90, 28, 48, 40, 19]]; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;canvas id=&#34;bar&#34; class=&#34;chart chart-bar&#34; chart-data=&#34;data&#34; chart-labels=&#34;labels&#34; chart-series=&#34;series&#34; /&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p> <p>If you want to use&nbsp;google chart directive refer below link.</p> <p><a href="https://www.codeproject.com/Articles/1189018/Custom-Directive-for-Creating-Chart-using-AngularJ">https://www.codeproject.com/Articles/1189018/Custom-Directive-for-Creating-Chart-using-AngularJ</a></p>https://www.aspforums.net:443/Threads/601257/Populate-Multi-Series-Column-Chart-from-database-using-AngularJS-in-ASPNet/https://www.aspforums.net:443/Threads/601257/Populate-Multi-Series-Column-Chart-from-database-using-AngularJS-in-ASPNet/Tue, 23 Jul 2019 06:49:43 GMTPopulate Multi-Series Column Chart from database using AngularJS in ASP.Net<p>Hi&nbsp;rani,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#34;MyApp&#34;, [&#34;chart.js&#34;]) app.controller(&#34;MyController&#34;, function ($scope, $http) { $http.post(&#34;Default.aspx/GetChartData&#34;, { headers: { &#39;Content-Type&#39;: &#39;application/json&#39;} }) .then(function (response) { $scope.labels = response.data.d.Labels; $scope.series = response.data.d.Series; $scope.data = response.data.d.Data; }); }); &lt;/script&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;canvas id=&#34;bar&#34; class=&#34;chart chart-bar&#34; chart-data=&#34;data&#34; chart-labels=&#34;labels&#34; chart-series=&#34;series&#34; /&gt; &lt;/div&gt;</pre> <p><strong><span style="text-decoration: underline;">Namespaces</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Collections.Generic; using System.Data; using System.Linq; using System.Web.Services;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Collections.Generic Imports System.Data Imports System.Linq Imports System.Web.Services</pre> <p><strong><span style="text-decoration: underline;">Code</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">[WebMethod] public static ChartData GetChartData() { DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[] { new DataColumn(&#34;Year&#34;, typeof(string)), new DataColumn(&#34;Month&#34;,typeof(string)), new DataColumn(&#34;Amount&#34;,typeof(int))}); dt.Rows.Add(&#34;2014&#34;, &#34;Jan&#34;, 65); dt.Rows.Add(&#34;2015&#34;, &#34;Jan&#34;, 59); dt.Rows.Add(&#34;2016&#34;, &#34;Jan&#34;, 80); dt.Rows.Add(&#34;2017&#34;, &#34;Jan&#34;, 81); dt.Rows.Add(&#34;2018&#34;, &#34;Jan&#34;, 56); dt.Rows.Add(&#34;2019&#34;, &#34;Jan&#34;, 55); dt.Rows.Add(&#34;2014&#34;, &#34;Feb&#34;, 40); dt.Rows.Add(&#34;2015&#34;, &#34;Feb&#34;, 28); dt.Rows.Add(&#34;2016&#34;, &#34;Feb&#34;, 48); dt.Rows.Add(&#34;2017&#34;, &#34;Feb&#34;, 40); dt.Rows.Add(&#34;2018&#34;, &#34;Feb&#34;, 19); dt.Rows.Add(&#34;2019&#34;, &#34;Feb&#34;, 86); dt.Rows.Add(&#34;2014&#34;, &#34;Mar&#34;, 27); dt.Rows.Add(&#34;2015&#34;, &#34;Mar&#34;, 90); dt.Rows.Add(&#34;2016&#34;, &#34;Mar&#34;, 28); dt.Rows.Add(&#34;2017&#34;, &#34;Mar&#34;, 48); dt.Rows.Add(&#34;2018&#34;, &#34;Mar&#34;, 40); dt.Rows.Add(&#34;2019&#34;, &#34;Mar&#34;, 19); ChartData chartData = new ChartData(); chartData.Labels = (dt.AsEnumerable().Select(p =&gt; p.Field&lt;string&gt;(&#34;Year&#34;))).Distinct().ToArray(); chartData.Series = (dt.AsEnumerable().Select(p =&gt; p.Field&lt;string&gt;(&#34;Month&#34;))).Distinct().ToArray(); List&lt;int[]&gt; datas = new List&lt;int[]&gt;(); for (int j = 0; j &lt; chartData.Series.Length; j++) { datas.Add((dt.AsEnumerable().Where(p =&gt; p.Field&lt;string&gt;(&#34;Month&#34;) == chartData.Series[j]) .Select(p =&gt; p.Field&lt;int&gt;(&#34;Amount&#34;))).ToArray()); } chartData.Data = datas; return chartData; } public class ChartData { public string[] Labels { get; set; } public string[] Series { get; set; } public List&lt;int[]&gt; Data { get; set; } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">&lt;WebMethod()&gt; Public Shared Function GetChartData() As ChartData Dim dt As DataTable = New DataTable() dt.Columns.AddRange(New DataColumn() { New DataColumn(&#34;Year&#34;, GetType(String)), New DataColumn(&#34;Month&#34;, GetType(String)), New DataColumn(&#34;Amount&#34;, GetType(Integer))}) dt.Rows.Add(&#34;2014&#34;, &#34;Jan&#34;, 65) dt.Rows.Add(&#34;2015&#34;, &#34;Jan&#34;, 59) dt.Rows.Add(&#34;2016&#34;, &#34;Jan&#34;, 80) dt.Rows.Add(&#34;2017&#34;, &#34;Jan&#34;, 81) dt.Rows.Add(&#34;2018&#34;, &#34;Jan&#34;, 56) dt.Rows.Add(&#34;2019&#34;, &#34;Jan&#34;, 55) dt.Rows.Add(&#34;2014&#34;, &#34;Feb&#34;, 40) dt.Rows.Add(&#34;2015&#34;, &#34;Feb&#34;, 28) dt.Rows.Add(&#34;2016&#34;, &#34;Feb&#34;, 48) dt.Rows.Add(&#34;2017&#34;, &#34;Feb&#34;, 40) dt.Rows.Add(&#34;2018&#34;, &#34;Feb&#34;, 19) dt.Rows.Add(&#34;2019&#34;, &#34;Feb&#34;, 86) dt.Rows.Add(&#34;2014&#34;, &#34;Mar&#34;, 27) dt.Rows.Add(&#34;2015&#34;, &#34;Mar&#34;, 90) dt.Rows.Add(&#34;2016&#34;, &#34;Mar&#34;, 28) dt.Rows.Add(&#34;2017&#34;, &#34;Mar&#34;, 48) dt.Rows.Add(&#34;2018&#34;, &#34;Mar&#34;, 40) dt.Rows.Add(&#34;2019&#34;, &#34;Mar&#34;, 19) Dim chartData As ChartData = New ChartData() chartData.Labels = (dt.AsEnumerable().[Select](Function(p) p.Field(Of String)(&#34;Year&#34;))).Distinct().ToArray() chartData.Series = (dt.AsEnumerable().[Select](Function(p) p.Field(Of String)(&#34;Month&#34;))).Distinct().ToArray() Dim datas As List(Of Integer()) = New List(Of Integer())() For j As Integer = 0 To chartData.Series.Length - 1 datas.Add((dt.AsEnumerable().Where(Function(p) p.Field(Of String)(&#34;Month&#34;) = chartData.Series(j)) _ .Select(Function(p) p.Field(Of Integer)(&#34;Amount&#34;))).ToArray()) Next chartData.Data = datas Return chartData End Function Public Class ChartData Public Property Labels As String() Public Property Series As String() Public Property Data As List(Of Integer()) End Class</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/43XWDpj.jpg" alt="" width="472" height="254" /></span></strong></p>https://www.aspforums.net:443/Threads/601257/Populate-Multi-Series-Column-Chart-from-database-using-AngularJS-in-ASPNet/https://www.aspforums.net:443/Threads/601257/Populate-Multi-Series-Column-Chart-from-database-using-AngularJS-in-ASPNet/Wed, 24 Jul 2019 03:36:05 GMT