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 Google API Bar chart from database and show bar colors based on value using jQuery in ASP.Net<p>Hi&nbsp;merix,</p> <p>I have binded the data from DataTable. You need to fetch DataTable from database.</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;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head runat=&#34;server&#34;&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://www.gstatic.com/charts/loader.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; google.charts.load(&#39;current&#39;, { &#39;packages&#39;: [&#39;corechart&#39;] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { $.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 dataTable = [[&#39;Asset&#39;, &#39;Days in Stock&#39;]]; for (var i = 0; i &lt; response.d.length; i++) { var asset = response.d[i][0].toString(); var stock = response.d[i][1].toString(); dataTable.push([asset, parseInt(stock)]); } var data = google.visualization.arrayToDataTable(dataTable); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: function (dt, row) { if ((dt.getValue(row, 1) &gt;= 0) &amp;&amp; (dt.getValue(row, 1) &lt;= 60)) { return &#39;green&#39;; } else if ((dt.getValue(row, 1) &gt; 60) &amp;&amp; (dt.getValue(row, 1) &lt;= 100)) { return &#39;yellow&#39;; } else { return &#39;red&#39;; } }, type: &#39;string&#39;, role: &#39;style&#39; }, { calc: &#39;stringify&#39;, sourceColumn: 1, type: &#39;string&#39;, role: &#39;annotation&#39; }]); var options = { title: &#39;&#39;, titleTextStyle: { fontSize: 16, bold: true }, backgroundColor: &#39;transparent&#39;, chartArea: { left: 80, top: 30, bottom: 60, right: 10 }, legend: { textStyle: { fontSize: 11 } }, vAxis: { title: &#39;Asset&#39;, textStyle: { fontName: &#39;Arial&#39;, fontSize: 10 }, titleTextStyle: { fontSize: 12, italic: false, bold: true } }, hAxis: { title: &#39;Days in Stock&#39;, gridlines: { count: 22 }, textStyle: { fontName: &#39;Arial&#39;, fontSize: 11 }, titleTextStyle: { fontSize: 12, italic: false, bold: true } }, pointSize: 3, pointShape: &#39;circle&#39;, annotations: { alwaysOutside: true, textStyle: { fontName: &#39;Arial&#39;, fontSize: 9, color: &#39;#000000&#39;, opacity: 1 } } }; var chartDiv = document.getElementById(&#39;chart_div&#39;); var chart = new google.visualization.BarChart(chartDiv); chart.draw(view, options); }, error: function (response) { alert(response.responseText); } }); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;div id=&#34;chart_div&#34; /&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&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 List&lt;object&gt; GetChartData() { // Get your DataTable from DataBase. DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[] { new DataColumn(&#34;Asset&#34;), new DataColumn(&#34;Days in Stock&#34;, typeof(int)) }); dt.Rows.Add(&#34;4990/473&#34;, 150); dt.Rows.Add(&#34;4990/489&#34;, 63); dt.Rows.Add(&#34;4990/557&#34;, 41); dt.Rows.Add(&#34;4990/559&#34;, 147); dt.Rows.Add(&#34;4990/578&#34;, 87); dt.Rows.Add(&#34;4990/581&#34;, 175); dt.Rows.Add(&#34;4990/582&#34;, 53); dt.Rows.Add(&#34;4990/586&#34;, 159); dt.Rows.Add(&#34;4990/590&#34;, 25); dt.Rows.Add(&#34;4990/592&#34;, 20); dt.Rows.Add(&#34;4990/593&#34;, 5); List&lt;object&gt; chartData = new List&lt;object&gt;(); for (int i = 0; i &lt; dt.Rows.Count; i++) { chartData.Add(new object[] { dt.Rows[i][&#34;Asset&#34;], dt.Rows[i][&#34;Days in Stock&#34;] }); } return chartData; }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">&lt;WebMethod()&gt; Public Shared Function GetChartData() As List(Of Object) Dim dt As DataTable = New DataTable() dt.Columns.AddRange(New DataColumn() {New DataColumn(&#34;Asset&#34;), New DataColumn(&#34;Days in Stock&#34;, GetType(Integer))}) dt.Rows.Add(&#34;4990/473&#34;, 150) dt.Rows.Add(&#34;4990/489&#34;, 63) dt.Rows.Add(&#34;4990/557&#34;, 41) dt.Rows.Add(&#34;4990/559&#34;, 147) dt.Rows.Add(&#34;4990/578&#34;, 87) dt.Rows.Add(&#34;4990/581&#34;, 175) dt.Rows.Add(&#34;4990/582&#34;, 53) dt.Rows.Add(&#34;4990/586&#34;, 159) dt.Rows.Add(&#34;4990/590&#34;, 25) dt.Rows.Add(&#34;4990/592&#34;, 20) dt.Rows.Add(&#34;4990/593&#34;, 5) Dim chartData As List(Of Object) = New List(Of Object)() For i As Integer = 0 To dt.Rows.Count - 1 chartData.Add(New Object() {dt.Rows(i)(&#34;Asset&#34;), dt.Rows(i)(&#34;Days in Stock&#34;)}) Next Return chartData End Function</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/D5p3vWf.jpg" alt="" width="472" height="130" /></span></strong></p>https://www.aspforums.net:443/Threads/860459/Populate-Google-API-Bar-chart-from-database-and-show-bar-colors-based-on-value-using-jQuery-in-ASPNet/https://www.aspforums.net:443/Threads/860459/Populate-Google-API-Bar-chart-from-database-and-show-bar-colors-based-on-value-using-jQuery-in-ASPNet/Mon, 22 Jul 2019 06:43:37 GMT