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 Area Chart from database using jQuery amcharts plugin in ASP.Net<p>Hi <a class="username" rel="venkatg"> venkatg</a>,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p>To populate from database you need to make ajax call and bind the result.</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://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://www.amcharts.com/lib/3/amcharts.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://www.amcharts.com/lib/3/serial.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://www.amcharts.com/lib/3/plugins/export/export.min.js&#34;&gt;&lt;/script&gt; &lt;link type=&#34;text/css&#34; media=&#34;all&#34; rel=&#34;stylesheet&#34; href=&#34;https://www.amcharts.com/lib/3/plugins/export/export.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://www.amcharts.com/lib/3/themes/light.js&#34;&gt;&lt;/script&gt; &lt;style type=&#34;text/css&#34;&gt; #chartdiv { width: 100%; height: 500px; font-size: 11px; } &lt;/style&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function () { $.ajax({ type: &#39;POST&#39;, url: &#34;Default.aspx/GetChartData&#34;, dataType: &#39;json&#39;, contentType: &#34;application/json; charset=utf-8&#34;, data: {}, success: function (result) { var chart = AmCharts.makeChart(&#34;chartdiv&#34;, { &#34;type&#34;: &#34;serial&#34;, &#34;theme&#34;: &#34;light&#34;, &#34;marginRight&#34;: 30, &#34;legend&#34;: { &#34;equalWidths&#34;: false, &#34;periodValueText&#34;: &#34;total: [[value.sum]]&#34;, &#34;position&#34;: &#34;top&#34;, &#34;valueAlign&#34;: &#34;left&#34;, &#34;valueWidth&#34;: 100 }, &#34;dataProvider&#34;: result.d, &#34;valueAxes&#34;: [{ &#34;stackType&#34;: &#34;regular&#34;, &#34;gridAlpha&#34;: 0.07, &#34;position&#34;: &#34;left&#34;, &#34;title&#34;: &#34;Traffic incidents&#34; }], &#34;graphs&#34;: [{ &#34;balloonText&#34;: &#34;&lt;img src=&#39;https://www.amcharts.com/lib/3/images/car.png&#39; style=&#39;vertical-align:bottom; margin-right: 10px; width:28px; height:21px;&#39;&gt;&lt;span style=&#39;font-size:14px; color:#000000;&#39;&gt;&lt;b&gt;[[value]]&lt;/b&gt;&lt;/span&gt;&#34;, &#34;fillAlphas&#34;: 0.6, &#34;hidden&#34;: true, &#34;lineAlpha&#34;: 0.4, &#34;title&#34;: &#34;Cars&#34;, &#34;valueField&#34;: &#34;cars&#34; }, { &#34;balloonText&#34;: &#34;&lt;img src=&#39;https://www.amcharts.com/lib/3/images/motorcycle.png&#39; style=&#39;vertical-align:bottom; margin-right: 10px; width:28px; height:21px;&#39;&gt;&lt;span style=&#39;font-size:14px; color:#000000;&#39;&gt;&lt;b&gt;[[value]]&lt;/b&gt;&lt;/span&gt;&#34;, &#34;fillAlphas&#34;: 0.6, &#34;lineAlpha&#34;: 0.4, &#34;title&#34;: &#34;Motorcycles&#34;, &#34;valueField&#34;: &#34;motorcycles&#34; }, { &#34;balloonText&#34;: &#34;&lt;img src=&#39;https://www.amcharts.com/lib/3/images/bicycle.png&#39; style=&#39;vertical-align:bottom; margin-right: 10px; width:28px; height:21px;&#39;&gt;&lt;span style=&#39;font-size:14px; color:#000000;&#39;&gt;&lt;b&gt;[[value]]&lt;/b&gt;&lt;/span&gt;&#34;, &#34;fillAlphas&#34;: 0.6, &#34;lineAlpha&#34;: 0.4, &#34;title&#34;: &#34;Bicycles&#34;, &#34;valueField&#34;: &#34;bicycles&#34; }], &#34;plotAreaBorderAlpha&#34;: 0, &#34;marginTop&#34;: 10, &#34;marginLeft&#34;: 0, &#34;marginBottom&#34;: 0, &#34;chartScrollbar&#34;: {}, &#34;chartCursor&#34;: { &#34;cursorAlpha&#34;: 0 }, &#34;categoryField&#34;: &#34;year&#34;, &#34;categoryAxis&#34;: { &#34;startOnAxis&#34;: true, &#34;axisColor&#34;: &#34;#DADADA&#34;, &#34;gridAlpha&#34;: 0.07, &#34;title&#34;: &#34;Year&#34;, &#34;guides&#34;: [{ category: &#34;2001&#34;, toCategory: &#34;2003&#34;, lineColor: &#34;#CC0000&#34;, lineAlpha: 1, fillAlpha: 0.2, fillColor: &#34;#CC0000&#34;, dashLength: 2, inside: true, labelRotation: 90, label: &#34;fines for speeding increased&#34; }, { category: &#34;2007&#34;, lineColor: &#34;#CC0000&#34;, lineAlpha: 1, dashLength: 2, inside: true, labelRotation: 90, label: &#34;motorcycle fee introduced&#34; }] }, &#34;export&#34;: { &#34;enabled&#34;: true } }); }, error: function (error) { alert(error.responseText); } }); }); &lt;/script&gt; &lt;div id=&#34;chartdiv&#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.Data;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Data</pre> <p><strong><span style="text-decoration: underline;">Code</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">[WebMethod] public static List&lt;GraphData&gt; GetChartData() { // Get Data from Database. DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[] { new DataColumn(&#34;Year&#34;, typeof(int)), new DataColumn(&#34;Cars&#34;, typeof(int)), new DataColumn(&#34;Motorcycles&#34;,typeof(int)), new DataColumn(&#34;Bicycles&#34;,typeof(int))}); dt.Rows.Add(1994, 1587, 650, 121); dt.Rows.Add(1995, 1567, 683, 146); dt.Rows.Add(1996, 1617, 691, 138); dt.Rows.Add(1997, 1630, 642, 127); dt.Rows.Add(1998, 1660, 699, 105); dt.Rows.Add(1999, 1683, 721, 109); dt.Rows.Add(2000, 1691, 737, 112); dt.Rows.Add(2001, 1298, 680, 101); dt.Rows.Add(2002, 1275, 664, 97); dt.Rows.Add(2003, 1246, 648, 93); dt.Rows.Add(2004, 1318, 697, 111); dt.Rows.Add(2005, 1213, 633, 87); dt.Rows.Add(2006, 1199, 621, 79); dt.Rows.Add(2007, 1110, 210, 81); dt.Rows.Add(2008, 1165, 232, 75); dt.Rows.Add(2009, 1163, 201, 82); dt.Rows.Add(2010, 1180, 285, 87); dt.Rows.Add(2011, 1159, 277, 71); dt.Rows.Add(2012, 1587, 650, 121); List&lt;GraphData&gt; chartData = new List&lt;GraphData&gt;(); foreach (DataRow dr in dt.Rows) { chartData.Add(new GraphData { year = Convert.ToInt32(dr[&#34;Year&#34;]), cars = Convert.ToInt32(dr[&#34;Cars&#34;]), motorcycles = Convert.ToInt32(dr[&#34;Motorcycles&#34;]), bicycles = Convert.ToInt32(dr[&#34;Bicycles&#34;]) }); } return chartData; } public class GraphData { public int year { get; set; } public int cars { get; set; } public int motorcycles { get; set; } public int bicycles { get; set; } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">&lt;WebMethod()&gt; Public Shared Function GetChartData() As List(Of GraphData) &#39; Get Data from Database. Dim dt As DataTable = New DataTable() dt.Columns.AddRange(New DataColumn() {New DataColumn(&#34;Year&#34;, GetType(String)), New DataColumn(&#34;Cars&#34;, GetType(Integer)), New DataColumn(&#34;Motorcycles&#34;, GetType(Integer)), New DataColumn(&#34;Bicycles&#34;, GetType(Integer))}) dt.Rows.Add(1994, 1587, 650, 121) dt.Rows.Add(1995, 1567, 683, 146) dt.Rows.Add(1996, 1617, 691, 138) dt.Rows.Add(1997, 1630, 642, 127) dt.Rows.Add(1998, 1660, 699, 105) dt.Rows.Add(1999, 1683, 721, 109) dt.Rows.Add(2000, 1691, 737, 112) dt.Rows.Add(2001, 1298, 680, 101) dt.Rows.Add(2002, 1275, 664, 97) dt.Rows.Add(2003, 1246, 648, 93) dt.Rows.Add(2004, 1318, 697, 111) dt.Rows.Add(2005, 1213, 633, 87) dt.Rows.Add(2006, 1199, 621, 79) dt.Rows.Add(2007, 1110, 210, 81) dt.Rows.Add(2008, 1165, 232, 75) dt.Rows.Add(2009, 1163, 201, 82) dt.Rows.Add(2010, 1180, 285, 87) dt.Rows.Add(2011, 1159, 277, 71) dt.Rows.Add(2012, 1587, 650, 121) Dim chartData As List(Of GraphData) = New List(Of GraphData)() For Each dr As DataRow In dt.Rows chartData.Add(New GraphData With { .year = Convert.ToInt32(dr(&#34;Year&#34;)), .cars = Convert.ToInt32(dr(&#34;Cars&#34;)), .motorcycles = Convert.ToInt32(dr(&#34;Motorcycles&#34;)), .bicycles = Convert.ToInt32(dr(&#34;Bicycles&#34;)) }) Next Return chartData End Function Public Class GraphData Public Property year As Integer Public Property cars As Integer Public Property motorcycles As Integer Public Property bicycles As Integer End Class</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/Q9CDKtw.jpg" alt="" width="404" height="607" /></p>https://www.aspforums.net:443/Threads/681571/Populate-Area-Chart-from-database-using-jQuery-amcharts-plugin-in-ASPNet/https://www.aspforums.net:443/Threads/681571/Populate-Area-Chart-from-database-using-jQuery-amcharts-plugin-in-ASPNet/Mon, 09 Jul 2018 02:08:44 GMT