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 (Multi-Column) Bar Chart from database using jQuery ChartJS Plugin in ASP.Net<p>Check the below code for different type of chart for the data as per the link you shared.</p> <p><span style="text-decoration: underline;">HTML</span></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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.7.0/Chart.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function () { DrawChart($(&#39;#RadioButtonList1&#39;).find(&#39;input[type=radio]:checked&#39;).val()); }); function DrawChart(chartType) { $.ajax({ type: &#34;POST&#34;, url: &#34;Default.aspx/GetChartData&#34;, data: {}, contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34;, success: function (response) { var label = response.d.Labels; var datasetLabels = response.d.DatasetLabels; var datasetDatas = response.d.DatasetDatas; var dataSets = []; for (var i = 0; i &lt; datasetDatas.length; i++) { var dataSet = { label: datasetLabels[i], backgroundColor: &#39;#&#39; + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6), borderColor: &#39;red&#39;, borderWidth: 1, data: datasetDatas[i] }; dataSets.push(dataSet); } var ctx = document.getElementById(&#34;Chart1&#34;).getContext(&#39;2d&#39;); new Chart(ctx, { type: chartType, data: { labels: label, datasets: dataSets }, options: { responsive: true, title: { display: true, text: &#39;Card Details&#39; }, legend: { display: true, position: &#34;top&#34; }, layout: { padding: { left: 50, right: 50, top: 50, bottom: 50 } }, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); } }); } &lt;/script&gt; &lt;asp:RadioButtonList ID=&#34;RadioButtonList1&#34; runat=&#34;server&#34; AutoPostBack=&#34;true&#34; RepeatDirection=&#34;Horizontal&#34;&gt; &lt;asp:ListItem Text=&#34;Bar&#34; Value=&#34;bar&#34; Selected=&#34;True&#34; /&gt; &lt;asp:ListItem Text=&#34;Column&#34; Value=&#34;horizontalBar&#34; /&gt; &lt;asp:ListItem Text=&#34;Line&#34; Value=&#34;line&#34; /&gt; &lt;asp:ListItem Text=&#34;Radar&#34; Value=&#34;radar&#34; /&gt; &lt;/asp:RadioButtonList&gt; &lt;hr /&gt; &lt;canvas id=&#34;Chart1&#34; style=&#34;width: 75%; height: 75%&#34;&gt;&lt;/canvas&gt;</pre> <p><span style="text-decoration: underline;">Code</span></p> <pre class="brush: csharp">[WebMethod] public static ChartData GetChartData() { // Get the datas from database. ChartData chartData = new ChartData(); chartData.Labels = new string[] { &#34;Absence of OB&#34;, &#34;Closeness&#34;, &#34;Credibility&#34;, &#34;Heritage&#34;, &#34;M Disclosure&#34;, &#34;Provenance&#34;, &#34;Reliability&#34;, &#34;Transparency&#34; }; chartData.DatasetLabels = new string[] { &#34;American Express&#34;, &#34;Mastercard&#34;, &#34;Paypal&#34;, &#34;Visa&#34; }; List&lt;int[]&gt; datasetDatas = new List&lt;int[]&gt;(); datasetDatas.Add(new int[] { 3, 5, 6, 7, 3, 5, 6, 7 }); datasetDatas.Add(new int[] { 4, 7, 3, 6, 10, 7, 4, 6 }); datasetDatas.Add(new int[] { 10, 7, 4, 6, 9, 7, 3, 10 }); datasetDatas.Add(new int[] { 6, 9, 7, 3, 10, 7, 4, 6 }); chartData.DatasetDatas = datasetDatas; return chartData; } public class ChartData { public string[] Labels { get; set; } public string[] DatasetLabels { get; set; } public List&lt;int[]&gt; DatasetDatas { get; set; } }</pre> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/134508/Populate-Multi-Series-Multi-Column-Bar-Chart-from-database-using-jQuery-ChartJS-Plugin-in-ASPNet/https://www.aspforums.net:443/Threads/134508/Populate-Multi-Series-Multi-Column-Bar-Chart-from-database-using-jQuery-ChartJS-Plugin-in-ASPNet/Sat, 13 Jul 2019 04:06:58 GMTPopulate Multi-Series (Multi-Column) Bar Chart from database using jQuery ChartJS Plugin in ASP.Net<p>Hi&nbsp;<a class="username" rel="EmadKhan">EmadKhan,</a></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/jquery/3.2.1/jquery.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.7.0/Chart.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function () { DrawChart($(&#39;#RadioButtonList1&#39;).find(&#39;input[type=radio]:checked&#39;).val()); }); function DrawChart(chartType) { $.ajax({ type: &#34;POST&#34;, url: &#34;Default.aspx/GetChartData&#34;, data: {}, contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34;, success: function (response) { var label = response.d.Labels; var datasetLabels = response.d.DatasetLabels; var datasetDatas = response.d.DatasetDatas; var dataSets = []; for (var i = 0; i &lt; datasetDatas.length; i++) { var dataSet = { label: datasetLabels[i], backgroundColor: GetRandomColor(), borderColor: &#39;red&#39;, borderWidth: 1, data: datasetDatas[i] }; dataSets.push(dataSet); } var ctx = document.getElementById(&#34;Chart1&#34;).getContext(&#39;2d&#39;); new Chart(ctx, { type: chartType, data: { labels: label, datasets: dataSets }, options: { responsive: false, title: { display: true, text: &#39;Project Billing Amount&#39; }, legend: { display: true, position: &#34;top&#34; }, layout: { padding: { left: 50, right: 50, top: 50, bottom: 50 } }, scales: { yAxes: [{ ticks: { beginAtZero: true}}] } } }); } }); } function GetRandomColor() { var trans = &#39;0.3&#39;; // 80% transparency var color = &#39;rgba(&#39;; for (var i = 0; i &lt; 3; i++) { color += Math.floor(Math.random() * 255) + &#39;,&#39;; } color += trans + &#39;)&#39;; return color; } &lt;/script&gt; &lt;asp:RadioButtonList ID=&#34;RadioButtonList1&#34; runat=&#34;server&#34; AutoPostBack=&#34;true&#34; RepeatDirection=&#34;Horizontal&#34;&gt; &lt;asp:ListItem Text=&#34;Bar&#34; Value=&#34;bar&#34; Selected=&#34;True&#34; /&gt; &lt;asp:ListItem Text=&#34;Column&#34; Value=&#34;horizontalBar&#34; /&gt; &lt;asp:ListItem Text=&#34;Line&#34; Value=&#34;line&#34; /&gt; &lt;asp:ListItem Text=&#34;Radar&#34; Value=&#34;radar&#34; /&gt; &lt;/asp:RadioButtonList&gt; &lt;hr /&gt; &lt;canvas id=&#34;Chart1&#34; style=&#34;width: 800px; height: 400px;&#34;&gt;&lt;/canvas&gt;</pre> <p><strong><span style="text-decoration: underline;">Namespaces</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Data; using System.Web.Services;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Data 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;ProjectName&#34;, typeof(string)), new DataColumn(&#34;AmountToBill&#34;,typeof(decimal)), new DataColumn(&#34;AmountBilled&#34;,typeof(decimal))}); dt.Rows.Add(&#34;Four Seasons&#34;, 100000, 50000); dt.Rows.Add(&#34;Blossoms Hill&#34;, 250000, 10000); dt.Rows.Add(&#34;Future Colony&#34;, 10000, 5000); dt.Rows.Add(&#34;Green Valleys&#34;, 100000, 50000); dt.Rows.Add(&#34;Bahria Town&#34;, 40000, 20000); dt.Rows.Add(&#34;Saadi Town&#34;, 400000, 200000); dt.Rows.Add(&#34;Nazeer Villas&#34;, 250000, 10000); dt.Rows.Add(&#34;Khokar Park&#34;, 10000, 5000); dt.Rows.Add(&#34;ASF Valley&#34;, 250000, 10000); dt.Rows.Add(&#34;Askari Park&#34;, 10000, 5000); ChartData chartData = new ChartData(); string[] Labels = (dt.AsEnumerable().Select(p =&gt; p.Field&lt;string&gt;(&#34;ProjectName&#34;))).Distinct().ToArray(); chartData.Labels = Labels; List&lt;string&gt; datasetLabels = new List&lt;string&gt;(); for (int i = 1; i &lt; dt.Columns.Count; i++) { datasetLabels.Add(dt.Columns[i].ColumnName); } chartData.DatasetLabels = datasetLabels.ToArray(); List&lt;decimal[]&gt; datasetDatas = new List&lt;decimal[]&gt;(); for (int i = 0; i &lt; chartData.DatasetLabels.Length; i++) { List&lt;decimal&gt; data = new List&lt;decimal&gt;(); for (int j = 0; j &lt; Labels.Length; j++) { decimal amount = (dt.AsEnumerable().Where(p =&gt; p.Field&lt;string&gt;(&#34;ProjectName&#34;) == Labels[j]) .Select(p =&gt; p.Field&lt;Decimal&gt;(chartData.DatasetLabels[i]))).FirstOrDefault(); data.Add(amount); } datasetDatas.Add(data.ToArray()); } chartData.DatasetDatas = datasetDatas; return chartData; } public class ChartData { public string[] Labels { get; set; } public string[] DatasetLabels { get; set; } public List&lt;decimal[]&gt; DatasetDatas { 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;ProjectName&#34;, GetType(String)), New DataColumn(&#34;AmountToBill&#34;, GetType(Decimal)), New DataColumn(&#34;AmountBilled&#34;, GetType(Decimal))}) dt.Rows.Add(&#34;Four Seasons&#34;, 100000, 50000) dt.Rows.Add(&#34;Blossoms Hill&#34;, 250000, 10000) dt.Rows.Add(&#34;Future Colony&#34;, 10000, 5000) dt.Rows.Add(&#34;Green Valleys&#34;, 100000, 50000) dt.Rows.Add(&#34;Bahria Town&#34;, 40000, 20000) dt.Rows.Add(&#34;Saadi Town&#34;, 400000, 200000) dt.Rows.Add(&#34;Nazeer Villas&#34;, 250000, 10000) dt.Rows.Add(&#34;Khokar Park&#34;, 10000, 5000) dt.Rows.Add(&#34;ASF Valley&#34;, 250000, 10000) dt.Rows.Add(&#34;Askari Park&#34;, 10000, 5000) Dim chartData As ChartData = New ChartData() Dim Labels As String() = (dt.AsEnumerable().[Select](Function(p) p.Field(Of String)(&#34;ProjectName&#34;))).Distinct().ToArray() chartData.Labels = Labels Dim datasetLabels As List(Of String) = New List(Of String)() For i As Integer = 1 To dt.Columns.Count - 1 datasetLabels.Add(dt.Columns(i).ColumnName) Next chartData.DatasetLabels = datasetLabels.ToArray() Dim datasetDatas As List(Of Decimal()) = New List(Of Decimal())() For i As Integer = 0 To chartData.DatasetLabels.Length - 1 Dim data As List(Of Decimal) = New List(Of Decimal)() For j As Integer = 0 To Labels.Length - 1 Dim amount As Decimal = (dt.AsEnumerable().Where(Function(p) p.Field(Of String)(&#34;ProjectName&#34;) = Labels(j)) _ .Select(Function(p) p.Field(Of Decimal)(chartData.DatasetLabels(i)))).FirstOrDefault() data.Add(amount) Next datasetDatas.Add(data.ToArray()) Next chartData.DatasetDatas = datasetDatas Return chartData End Function Public Class ChartData Public Property Labels As String() Public Property DatasetLabels As String() Public Property DatasetDatas As List(Of Decimal()) 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/YbdOGxq.gif" alt="" width="472" height="238" /></span></strong></p>https://www.aspforums.net:443/Threads/134508/Populate-Multi-Series-Multi-Column-Bar-Chart-from-database-using-jQuery-ChartJS-Plugin-in-ASPNet/https://www.aspforums.net:443/Threads/134508/Populate-Multi-Series-Multi-Column-Bar-Chart-from-database-using-jQuery-ChartJS-Plugin-in-ASPNet/Mon, 15 Jul 2019 03:07:35 GMT