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.Implement BootStrap Charts from database using jQuery AJAX in ASP.Net<p>Here I have created sample that will help you out. I have used Manually created Datatable to bind, you can bind it from Database DataTable.</p> <p><span style="text-decoration: underline;">HTML</span></p> <pre class="brush: html">&lt;div&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;JS/jquery.flot.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;script src=&#34;JS/jquery.flot.stack.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; id=&#34;source&#34;&gt; $(function () { $.ajax({ type: &#34;POST&#34;, url: &#34;Default.aspx/GetData&#34;, contentType: &#34;application/json; charset=utf-8&#34;, data: {}, dataType: &#34;json&#34;, success: function (response) { var xmlDoc = $.parseXML(response.d); var xml = $(xmlDoc); var datas = xml.find(&#34;Data&#34;); var d1 = []; var d2 = []; var count = 0; $(datas).each(function () { d1.push([count, $(this).find(&#34;d1&#34;).text()]); d2.push([count, $(this).find(&#34;d2&#34;).text()]); count++; }); var stack = 0, bars = true, lines = false, steps = false; function plotWithOptions() { $.plot($(&#34;#placeholder&#34;), [d1, d2], { series: { stack: stack, lines: { show: lines, fill: true, steps: steps }, bars: { show: bars, barWidth: 0.6 } } }); } plotWithOptions(); $(&#34;.stackControls input&#34;).click(function (e) { e.preventDefault(); stack = $(this).val() == &#34;With stacking&#34; ? true : null; plotWithOptions(); }); $(&#34;.graphControls input&#34;).click(function (e) { e.preventDefault(); bars = $(this).val().indexOf(&#34;Bars&#34;) != -1; lines = $(this).val().indexOf(&#34;Lines&#34;) != -1; steps = $(this).val().indexOf(&#34;steps&#34;) != -1; plotWithOptions(); }); }, error: function (xhr, status) { alert(&#34;An error occurred: &#34; + status); } }); }); &lt;/script&gt; &lt;div&gt; &lt;div id=&#34;placeholder&#34; style=&#34;width: 600px; height: 300px;&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;p class=&#34;stackControls&#34;&gt; &lt;input type=&#34;button&#34; value=&#34;With stacking&#34;&gt; &lt;input type=&#34;button&#34; value=&#34;Without stacking&#34;&gt; &lt;/p&gt; &lt;p class=&#34;graphControls&#34;&gt; &lt;input type=&#34;button&#34; value=&#34;Bars&#34;&gt; &lt;input type=&#34;button&#34; value=&#34;Lines&#34;&gt; &lt;input type=&#34;button&#34; value=&#34;Lines with steps&#34;&gt; &lt;/p&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;">Code</span></p> <pre class="brush: csharp">[WebMethod] public static string GetData() { Random rnd = new Random(); DataTable dt = new DataTable(&#34;Data&#34;); dt.Columns.Add(&#34;d1&#34;, typeof(int)); dt.Columns.Add(&#34;d2&#34;, typeof(int)); dt.Rows.Add(rnd.Next(50), rnd.Next(50)); dt.Rows.Add(rnd.Next(50), rnd.Next(50)); dt.Rows.Add(rnd.Next(50), rnd.Next(50)); dt.Rows.Add(rnd.Next(50), rnd.Next(50)); dt.Rows.Add(rnd.Next(50), rnd.Next(50)); dt.Rows.Add(rnd.Next(50), rnd.Next(50)); dt.Rows.Add(rnd.Next(50), rnd.Next(50)); dt.Rows.Add(rnd.Next(50), rnd.Next(50)); dt.Rows.Add(rnd.Next(50), rnd.Next(50)); dt.Rows.Add(rnd.Next(50), rnd.Next(50)); DataSet ds = new DataSet(); ds.Tables.Add(dt); return ds.GetXml(); }</pre> <p><span style="text-decoration: underline;">Screenshot</span></p> <p><img src="https://i.imgur.com/FhV6cQx.gif" alt="" width="472" height="302" /></p>https://www.aspforums.net:443/Threads/956422/Implement-BootStrap-Charts-from-database-using-jQuery-AJAX-in-ASPNet/https://www.aspforums.net:443/Threads/956422/Implement-BootStrap-Charts-from-database-using-jQuery-AJAX-in-ASPNet/Fri, 23 Oct 2015 09:57:56 GMT