ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2017 www.aspforums.com. All rights reserved.Display HighCharts bar chart using jQuery highcharts plugin in ASP.Net<p>Here i have created sample using query. You have to get the list of studentInfos by entity framework.</p> <p><span style="text-decoration: underline;">SQL</span></p> <pre class="brush: sql">CREATE PROCEDURE GetCategoriesChart AS BEGIN DECLARE @Categories AS TABLE(Catg_type VARCHAR(50),Prog_name VARCHAR(50),total_students INT) INSERT INTO @Categories VALUES(&#39;Management&#39;,&#39;BBA&#39;,3) INSERT INTO @Categories VALUES(&#39;Finance&#39;,&#39;BS-AF&#39;,2) INSERT INTO @Categories VALUES(&#39;ComputerScience&#39;,&#39;BBA&#39;,3) INSERT INTO @Categories VALUES(&#39;Management&#39;,&#39;BS-AF&#39;,2) INSERT INTO @Categories VALUES(&#39;Finance&#39;,&#39;BBA&#39;,4) INSERT INTO @Categories VALUES(&#39;ComputerScience&#39;,&#39;BS-AF&#39;,2) INSERT INTO @Categories VALUES(&#39;ComputerScience&#39;,&#39;MS-IT&#39;,2) INSERT INTO @Categories VALUES(&#39;Finance&#39;,&#39;MS-IT&#39;,5) INSERT INTO @Categories VALUES(&#39;Management&#39;,&#39;MS-IT&#39;,6) SELECT * FROM @Categories END</pre> <p><span style="text-decoration: underline;">HTML</span></p> <pre class="brush: html">&lt;div id=&#34;container&#34;&gt; &lt;/div&gt; &lt;div&gt; &lt;script src=&#34;Scripts/jquery.min.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;script src=&#34;Scripts/highcharts.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function () { $.ajax({ type: &#34;POST&#34;, contentType: &#34;application/json; charset=utf-8&#34;, url: &#34;Services/HighchartService.asmx/StudentAnalysis&#34;, data: &#34;{}&#34;, dataType: &#34;json&#34;, success: function (Result) { Result = Result.d; var uniqueCat = []; var uniqueProgName = []; $.map(Result, function (ele) { if (uniqueCat.indexOf(ele.CatgType) == -1) uniqueCat.push(ele.CatgType); if (uniqueProgName.indexOf(ele.ProgName) == -1) uniqueProgName.push(ele.ProgName); }); var seriesData = []; $.each(uniqueProgName, function () { var series = {}; var progName = $(this)[0]; series.name = progName; var s = $.grep(Result, function (e) { return e.ProgName == progName; }); series.data = $.map(s, function (e) { return e.totalStudents }); seriesData.push(series); }); DreawChart(uniqueCat, seriesData); }, error: function (Result) { alert(&#34;Error&#34;); } }); }); function DreawChart(series, seriesData) { $(&#39;#container&#39;).highcharts({ chart: { type: &#39;bar&#39;, renderTo: &#39;container&#39; }, title: { text: &#39;Studentinfo&#39; }, xAxis: { categories: eval(series) }, yAxis: { title: { text: &#39;Figures&#39; } }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: JSON.parse(JSON.stringify(seriesData)) }); } &lt;/script&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;">Code</span></p> <pre class="brush: csharp">public class Category { public string CatgType { get; set; } public string ProgName { get; set; } public int totalStudents { get; set; } } [WebMethod] public List&lt;Category&gt; FruitAnalysis() { List&lt;Category&gt; studentInfos = new List&lt;Category&gt;(); DataSet ds = new DataSet(); using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[1].ConnectionString)) { using (SqlCommand cmd = new SqlCommand()) { cmd.CommandText = &#34;GetCategoriesChart&#34;; cmd.CommandType = CommandType.StoredProcedure; cmd.Connection = con; using (SqlDataAdapter da = new SqlDataAdapter(cmd)) { da.Fill(ds, &#34;Studentinfo&#34;); } } } if (ds != null) { if (ds.Tables.Count &gt; 0) { if (ds.Tables[&#34;Studentinfo&#34;].Rows.Count &gt; 0) { foreach (DataRow dr in ds.Tables[&#34;Studentinfo&#34;].Rows) { studentInfos.Add(new Category { CatgType = dr[&#34;Catg_type&#34;].ToString(), ProgName = dr[&#34;Prog_name&#34;].ToString(), totalStudents = Convert.ToInt32(dr[&#34;total_students&#34;]) }); } } } } return studentInfos; }</pre> <p><span style="text-decoration: underline;">Screenshot</span></p> <p><img src="https://i.imgur.com/4GJaXhl.jpg" alt="" width="472" height="262" /></p>http://www.aspforums.net/Threads/239103/Display-HighCharts-bar-chart-using-jQuery-highcharts-plugin-in-ASPNet/http://www.aspforums.net/Threads/239103/Display-HighCharts-bar-chart-using-jQuery-highcharts-plugin-in-ASPNet/Thu, 05 May 2016 08:49:44 GMT