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 (Bind) jQuery Flot stacked bar Chart in ASP.Net MVC<p>Hi <a class="username" rel="Rockstar8"> Rockstar8</a>,</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">public class HomeController : Controller { // GET: /Home/ public ActionResult Index() { return View(); } public JsonResult GetChartData() { List&lt;Data&gt; dt = GetSampleData(); object[] labels = dt.Select(x =&gt; x.LABLESNAMES).Distinct().ToArray(); string message = &#34;[&#34;; string axis = &#34;[&#34;; for (int i = 0; i &lt; labels.Length; i++) { message += &#34;{&#39;label&#39;:&#39;&#34; + labels[i] + &#34;&#39;,&#39;data&#39;:[&#34;; var d = dt.Where(x =&gt; x.LABLESNAMES == labels[i].ToString()) .Select(x =&gt; new { axisValue = x.XAXISVAL, dataValue = x.DATAVAL, axisName = x.XAXISNAMES }); foreach (var item in d) { message += &#34;[&#34; + item.axisValue + &#34;,&#34; + item.dataValue + &#34;],&#34;; if (i == 0) { axis += &#34;[&#34; + item.axisValue + &#34;,&#39;&#34; + item.axisName + &#34;&#39;],&#34;; } } message = message.Substring(0, message.Length - 1) + &#34;]},&#34;; } message = message.Substring(0, message.Length - 1); message += &#34;]&#34;; axis = axis.Substring(0, axis.Length - 1); axis += &#34;]&#34;; ChartData chart = new ChartData(); chart.data = message; chart.xaxisTicks = axis; return Json(chart, JsonRequestBehavior.AllowGet); } public class ChartData { public string data { get; set; } public string xaxisTicks { get; set; } } private static List&lt;Data&gt; GetSampleData() { List&lt;Data&gt; dt = new List&lt;Data&gt;(); dt.Add(new Data { ID = 1, LABLESNAMES = &#34;FOO&#34;, DATAVAL = 300, XAXISVAL = 1.1, XAXISNAMES = &#34;One&#34; }); dt.Add(new Data { ID = 2, LABLESNAMES = &#34;BAR&#34;, DATAVAL = 145, XAXISVAL = 1.1, XAXISNAMES = &#34;One&#34; }); dt.Add(new Data { ID = 3, LABLESNAMES = &#34;BAZ&#34;, DATAVAL = 365, XAXISVAL = 1.1, XAXISNAMES = &#34;One&#34; }); dt.Add(new Data { ID = 4, LABLESNAMES = &#34;FOO&#34;, DATAVAL = 0, XAXISVAL = 2.1, XAXISNAMES = &#34;Two&#34; }); dt.Add(new Data { ID = 5, LABLESNAMES = &#34;BAR&#34;, DATAVAL = 0, XAXISVAL = 2.1, XAXISNAMES = &#34;Two&#34; }); dt.Add(new Data { ID = 6, LABLESNAMES = &#34;BAZ&#34;, DATAVAL = 200, XAXISVAL = 2.1, XAXISNAMES = &#34;Two&#34; }); dt.Add(new Data { ID = 7, LABLESNAMES = &#34;FOO&#34;, DATAVAL = 300, XAXISVAL = 3.1, XAXISNAMES = &#34;Three&#34; }); dt.Add(new Data { ID = 8, LABLESNAMES = &#34;BAR&#34;, DATAVAL = 152, XAXISVAL = 3.1, XAXISNAMES = &#34;Three&#34; }); dt.Add(new Data { ID = 9, LABLESNAMES = &#34;BAZ&#34;, DATAVAL = 0, XAXISVAL = 3.1, XAXISNAMES = &#34;Three&#34; }); return dt; } public class Data { public int ID { get; set; } public string LABLESNAMES { get; set; } public int DATAVAL { get; set; } public double XAXISVAL { get; set; } public string XAXISNAMES { get; set; } } }</pre> <p><strong><span style="text-decoration: underline;">View</span></strong></p> <pre class="brush: html">&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.js"&gt;&lt;/script&gt; &lt;script src="../../Scripts/jquery.flot.barnumbers.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; &nbsp;&nbsp;&nbsp; $(function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type: "GET", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: "/Home/GetChartData", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data: {}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; contentType: "application/json; charset=utf-8", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dataType: "json", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; success: function (r) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var options = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; series: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; stack: 0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; lines: { show: false, steps: false }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bars: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // horizontal: true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; show: true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; barWidth: 0.9, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; align: 'left', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; numbers: { show: true } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xaxis: { ticks: eval(r.xaxisTicks) } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $.plot($('#placeholder'), eval(r.data), options); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; }); &lt;/script&gt; &lt;div id="placeholder" style="width: 400px; height: 300px;"&gt; &lt;/div&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/LiRuiKB.jpg" alt="" width="403" height="327" /></p>https://www.aspforums.net:443/Threads/357677/Populate-Bind-jQuery-Flot-stacked-bar-Chart-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/357677/Populate-Bind-jQuery-Flot-stacked-bar-Chart-in-ASPNet-MVC/Wed, 28 Aug 2019 08:49:03 GMT