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 Multidimensional Array using JavaScript in ASP.Net<p>Hi <a class="username" rel="mukesh1">mukesh1</a>,</p> <p>Instead of creating string build the array and pass the array to populate the Doughnut chart.</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> <div class="demo_block"> <pre class="brush: html">&lt;div id=&#34;pieChart&#34;&gt; &lt;/div&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;//cdn.jsdelivr.net/excanvas/r3/excanvas.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;script src=&#34;//cdn.jsdelivr.net/chart.js/0./Chart.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; window.onload = function chartdata() { var TotalTask = 10; var Completed_Task = 5; var Rejected = 1; var Pending = 2; var uncomplete = 2; MultiArray = new Array(4); MultiArray[0] = new Array(5); MultiArray[1] = new Array(5); MultiArray[2] = new Array(5); MultiArray[3] = new Array(5); MultiArray[0][0] = &#34;Completed&#34; // label MultiArray[0][1] = Completed_Task // value MultiArray[0][2] = &#34;#f56954&#34; // Color MultiArray[0][3] = &#34;#f56954&#34; // highlight MultiArray[1][0] = &#34;Rejected&#34; // label MultiArray[1][1] = Rejected // value MultiArray[1][2] = &#34;#00a65a&#34; // Color MultiArray[1][3] = &#34;#00a65a&#34; // highlight MultiArray[2][0] = &#34;Pending&#34; // label MultiArray[2][1] = Pending; // value MultiArray[2][2] = &#34;#00c0ef&#34; // Color MultiArray[2][3] = &#34;#00c0ef&#34; // highlight MultiArray[3][0] = &#34;Uncomplete&#34; // label MultiArray[3][1] = uncomplete // value MultiArray[3][2] = &#34;#f39c12&#34; // Color MultiArray[3][3] = &#34;#f39c12&#34; // highlight ShowChart(); } function ShowChart() { var PieData = new Array(); for (var i = 0; i &lt; MultiArray.length; i++) { if (i &lt; MultiArray.length - 1) { var data = {}; data.label = MultiArray[i][0]; data.value = MultiArray[i][1]; data.color = MultiArray[i][2]; data.highlight = MultiArray[i][3]; PieData.push(data); } else { var data = {}; data.label = MultiArray[i][0]; data.value = MultiArray[i][1]; data.color = MultiArray[i][2]; data.highlight = MultiArray[i][3]; PieData.push(data); } } var el = document.createElement(&#39;canvas&#39;); $(&#34;#pieChart&#34;)[0].appendChild(el); var pieChartCanvas = el.getContext(&#39;2d&#39;); var pieChart = new Chart(pieChartCanvas); var pieOptions = { // Boolean - Whether we should show a stroke on each segment segmentShowStroke: true, // String - The colour of each segment stroke segmentStrokeColor: &#39;#fff&#39;, // Number - The width of each segment stroke segmentStrokeWidth: 1, // Number - The percentage of the chart that we cut out of the middle percentageInnerCutout: 50, // This is 0 for Pie charts // Number - Amount of animation steps animationSteps: 100, // String - Animation easing effect animationEasing: &#39;easeOutBounce&#39;, // Boolean - Whether we animate the rotation of the Doughnut animateRotate: true, // Boolean - Whether we animate scaling the Doughnut from the centre animateScale: false, // Boolean - whether to make the chart responsive to window resizing responsive: true, // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container maintainAspectRatio: false }; // Create pie or douhnut chart // You can switch between pie and douhnut using the method below. pieChart.Doughnut(PieData, pieOptions); } &lt;/script&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p>https://www.aspforums.net:443/Threads/386351/Populate-HTML5-Canvas-Chart-from-Multidimensional-Array-using-JavaScript-in-ASPNet/https://www.aspforums.net:443/Threads/386351/Populate-HTML5-Canvas-Chart-from-Multidimensional-Array-using-JavaScript-in-ASPNet/Wed, 12 Sep 2018 02:13:46 GMTPopulate HTML5 Canvas Chart from Multidimensional Array using JavaScript in ASP.Net<p>Hi <a class="username" rel="mukesh1">mukesh1</a>,</p> <p>Please refer below sample.</p> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <div class="demo_block"> <pre class="brush: html">&lt;input onclick=&#34;return chartdata();&#34; type=&#34;submit&#34; value=&#34;ShowChart&#34; /&gt; &lt;div id=&#34;pieChart&#34;&gt; &lt;/div&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;//cdn.jsdelivr.net/excanvas/r3/excanvas.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;script src=&#34;//cdn.jsdelivr.net/chart.js/0./Chart.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; function chartdata() { var TotalTask = 10; var Completed_Task = 5; var Rejected = 1; var Pending = 2; var uncomplete = 2; MultiArray = new Array(4); MultiArray[0] = new Array(5); MultiArray[1] = new Array(5); MultiArray[2] = new Array(5); MultiArray[3] = new Array(5); MultiArray[0][0] = &#34;Completed&#34; // label MultiArray[0][1] = Completed_Task // value MultiArray[0][2] = &#34;#f56954&#34; // Color MultiArray[0][3] = &#34;#f56954&#34; // highlight MultiArray[1][0] = &#34;Rejected&#34; // label MultiArray[1][1] = Rejected // value MultiArray[1][2] = &#34;#00a65a&#34; // Color MultiArray[1][3] = &#34;#00a65a&#34; // highlight MultiArray[2][0] = &#34;Pending&#34; // label MultiArray[2][1] = Pending; // value MultiArray[2][2] = &#34;#00c0ef&#34; // Color MultiArray[2][3] = &#34;#00c0ef&#34; // highlight MultiArray[3][0] = &#34;Uncomplete&#34; // label MultiArray[3][1] = uncomplete // value MultiArray[3][2] = &#34;#f39c12&#34; // Color MultiArray[3][3] = &#34;#f39c12&#34; // highlight ShowChart(); return false; } function ShowChart() { var PieData = new Array(); for (var i = 0; i &lt; MultiArray.length; i++) { if (i &lt; MultiArray.length - 1) { var data = {}; data.label = MultiArray[i][0]; data.value = MultiArray[i][1]; data.color = MultiArray[i][2]; data.highlight = MultiArray[i][3]; PieData.push(data); } else { var data = {}; data.label = MultiArray[i][0]; data.value = MultiArray[i][1]; data.color = MultiArray[i][2]; data.highlight = MultiArray[i][3]; PieData.push(data); } } var el = document.createElement(&#39;canvas&#39;); $(&#34;#pieChart&#34;)[0].appendChild(el); var pieChartCanvas = el.getContext(&#39;2d&#39;); var pieChart = new Chart(pieChartCanvas); var pieOptions = { // Boolean - Whether we should show a stroke on each segment segmentShowStroke: true, // String - The colour of each segment stroke segmentStrokeColor: &#39;#fff&#39;, // Number - The width of each segment stroke segmentStrokeWidth: 1, // Number - The percentage of the chart that we cut out of the middle percentageInnerCutout: 50, // This is 0 for Pie charts // Number - Amount of animation steps animationSteps: 100, // String - Animation easing effect animationEasing: &#39;easeOutBounce&#39;, // Boolean - Whether we animate the rotation of the Doughnut animateRotate: true, // Boolean - Whether we animate scaling the Doughnut from the centre animateScale: false, // Boolean - whether to make the chart responsive to window resizing responsive: true, // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container maintainAspectRatio: false }; // Create pie or douhnut chart // You can switch between pie and douhnut using the method below. pieChart.Doughnut(PieData, pieOptions); } &lt;/script&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/386351/Populate-HTML5-Canvas-Chart-from-Multidimensional-Array-using-JavaScript-in-ASPNet/https://www.aspforums.net:443/Threads/386351/Populate-HTML5-Canvas-Chart-from-Multidimensional-Array-using-JavaScript-in-ASPNet/Wed, 12 Sep 2018 04:12:21 GMT