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 HTML5 Canvas Chart from comma separated string value using JavaScript in ASP.Net<p>Hi <a class="username" rel="mukesh1"> mukesh1</a>,</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;canvas id=&#34;bar-chart&#34; width=&#34;300&#34; height=&#34;100&#34;&gt;&lt;/canvas&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; function Showpointchart(dt, jobcount) { var jobarray = dt.split(&#39;,&#39;); var task_titles = new Array(); var resumecount = new Array(); for (var i = 0; i &lt; jobarray.length; i++) { if (i % 2 == 0) { task_titles.push(jobarray[i]); } else { resumecount.push(jobarray[i]); } } var ctx = document.getElementById(&#34;bar-chart&#34;).getContext(&#39;2d&#39;); var myChart = new Chart(ctx, { type: &#39;bar&#39;, data: { labels: task_titles, datasets: [{ label: &#34;Points&#34;, data: resumecount}] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: true}}], xAxes: [{ ticks: { callback: function (value, index, values) { return (value); } }}] }, tooltips: { callbacks: { title: function (tooltipItem, data) { return data.labels[tooltipItem[0].index]; } } } } }); } &lt;/script&gt;</pre> <p><strong><span style="text-decoration: underline;">C#</span></strong></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { System.Data.DataTable dtTask = new System.Data.DataTable(); dtTask.Columns.Add(&#34;task_title&#34;); dtTask.Columns.Add(&#34;resume_recived&#34;); System.Data.DataTable dtJob = new System.Data.DataTable(); dtJob.Columns.Add(&#34;jobtitle&#34;); dtJob.Columns.Add(&#34;resumecount&#34;); dtJob.Rows.Add(&#34;.Net&#34;, 20); dtJob.Rows.Add(&#34;SQL&#34;, 25); dtJob.Rows.Add(&#34;Java&#34;, 59); dtJob.Rows.Add(&#34;Testing&#34;, 17); string values = &#34;&#34;; if (dtJob.Rows.Count &gt; 0) { for (int i = 0; i &lt; dtJob.Rows.Count; i++) { string jobtitle = dtJob.Rows[i][0].ToString(); string resumecount = dtJob.Rows[i][1].ToString(); dtTask.Rows.Add(jobtitle, resumecount); if (i &lt; (dtJob.Rows.Count - 1)) { values += jobtitle + &#34;,&#34; + resumecount + &#34;,&#34;; } else { values += jobtitle + &#34;,&#34; + resumecount; } } } ScriptManager.RegisterStartupScript(Page, GetType(), &#34;disp_confirm&#34;, &#34;&lt;script&gt;Showpointchart(&#39;&#34; + values + &#34;&#39;,&#39;&#34; + dtJob.Rows.Count + &#34;&#39;)&lt;/script&gt;&#34;, false); }</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://imgur.com/VRNFIJ5.jpg" alt="" width="468" height="223" /></p>https://www.aspforums.net:443/Threads/511746/Populate-HTML5-Canvas-Chart-from-comma-separated-string-value-using-JavaScript-in-ASPNet/https://www.aspforums.net:443/Threads/511746/Populate-HTML5-Canvas-Chart-from-comma-separated-string-value-using-JavaScript-in-ASPNet/Mon, 08 Oct 2018 05:51:40 GMT