Populate HTML5 Canvas Chart from Multidimensional Array using JavaScript in ASP.Net

Last Reply 4 months ago By pandeyism

Posted 4 months ago

in 2nd case my chart not showing, i m using adminlte donut chart

if i use this then chart working

  var pieChartCanvas = $('#pieChart').get(0).getContext('2d');
  var pieChart       = new Chart(pieChartCanvas);
  var PieData        = [
    {
      value    : 4,
      color    : '#f56954',
      highlight: '#f56954',
      label    : 'Completed Tasks'
    },
    {
      value    : 1,
      color    : '#00a65a',
      highlight: '#00a65a',
      label    : 'Rejected Tasks'
    },
    {
      value    : 2,
      color    : '#f39c12',
      highlight: '#f39c12',
      label    : 'Uncomplted Tasks'
    },
    {
      value    : 4,
      color    : '#00c0ef',
      highlight: '#00c0ef',
      label    : 'Pending Tasks'
        }
  ];
  var pieOptions     = {
    // Boolean - Whether we should show a stroke on each segment
    segmentShowStroke    : true,
    // String - The colour of each segment stroke
    segmentStrokeColor   : '#fff',
    // 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      : 'easeOutBounce',
    // 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,
    // String - A legend template
    <%--legendTemplate       : '<ul class=\'<%=name.toLowerCase()%>-legend\'><% for (var i=0; i<segments.length; i++){%><li><span style=\'background-color:<%=segments[i].fillColor%>\'></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>',
    // String - A tooltip template
    tooltipTemplate      : '<%=value %> <%=label%> users'--%>
  };
  
  pieChart.Doughnut(PieData, pieOptions);

but my values are dynamic

function chartdata() { 
        var TotalTask = 10;
        var Completed_Task = 5;
        var Rejected = 1;
        var Pending = 2;
        var uncomplete = 2;
 
    MultiArray = new Array(5);
    MultiArray[0] = new Array(5);
    MultiArray[1] = new Array(5);
    MultiArray[2] = new Array(5);
    MultiArray[3] = new Array(5);
    MultiArray[4] = new Array(5);
 
    MultiArray[1][0] = "Completed"
        MultiArray[1][1] = Completed_Task
        MultiArray[2][0] = "Rejected"
        alert(MultiArray[1][0]);
        MultiArray[2][1] = Rejected
        MultiArray[3][0] = "Pending"
        MultiArray[3][1] = Pending;
        MultiArray[4][0] = "Uncomplete"
        MultiArray[4][1] = uncomplete 
        ShowChart();        
    }
 
function ShowChart() {         
        var piedata1 = "";
         piedata1=  "[";
            for(var i=0;i<5;i++)
            {
                //add chart values with labelname
                if (i < 4) {
                    debugger;
                    piedata1 += "{value:'" + MultiArray[i][1] + "'," +
                                "color: '" + ColorArray[i][0] + "'," +
                                "highlight:'" + ColorArray[i][0] + "'," +
                                "label:'" + MultiArray[i][0] + "'},";
                }
                else {
                    debugger;
                    piedata1 += "{value:'" + MultiArray[i][1] + "'," +
                                "color:'" + ColorArray[i][0] + "'," +
                                "highlight:'" + ColorArray[i][0] + "'," +
                                "label:'" + MultiArray[i][0] + "'}";
                }
            }
            piedata1 += "]";
            piedata1 = piedata1.substring(1, piedata1.length - 1);
            var pieChartCanvas = $('#pieChart').get(0).getContext('2d');
 
            var pieChart = new Chart(pieChartCanvas);
            var PieData = "[" + piedata1 + "]";
 
            var pieOptions = {
                // Boolean - Whether we should show a stroke on each segment
                segmentShowStroke: true,
                // String - The colour of each segment stroke
                segmentStrokeColor: '#fff',
                // 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: 'easeOutBounce',
                // 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,
                // String - A legend template
                <%--  legendTemplate       : '<ul class=\'<%=name.toLowerCase()%>-legend\'><% for (var i=0; i<segments.length; i++){%><li><span style=\'background-color:<%=segments[i].fillColor%>\'></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>',
                // String - A tooltip template
                tooltipTemplate      : '<%=value %> <%=label%> users'--%>
         };
        // Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        pieChart.Doughnut(PieData, pieOptions);
        alert("chart done");
         
             
    }

 

Posted 4 months ago Modified on 4 months ago

Hi mukesh1,

Instead of creating string build the array and pass the array to populate the Doughnut chart.

Check this example. Now please take its reference and correct your code.

HTML

<div id="pieChart">
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/chart.js/0./Chart.js" type="text/javascript"></script>
<script type="text/javascript">
    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] = "Completed" // label
        MultiArray[0][1] = Completed_Task // value
        MultiArray[0][2] = "#f56954" // Color
        MultiArray[0][3] = "#f56954" // highlight

        MultiArray[1][0] = "Rejected" // label
        MultiArray[1][1] = Rejected // value
        MultiArray[1][2] = "#00a65a" // Color
        MultiArray[1][3] = "#00a65a" // highlight

        MultiArray[2][0] = "Pending" // label
        MultiArray[2][1] = Pending; // value
        MultiArray[2][2] = "#00c0ef" // Color
        MultiArray[2][3] = "#00c0ef" // highlight

        MultiArray[3][0] = "Uncomplete" // label
        MultiArray[3][1] = uncomplete // value
        MultiArray[3][2] = "#f39c12" // Color
        MultiArray[3][3] = "#f39c12" // highlight

        ShowChart();
    }

    function ShowChart() {
        var PieData = new Array();
        for (var i = 0; i < MultiArray.length; i++) {
            if (i < 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('canvas');
        $("#pieChart")[0].appendChild(el);
        var pieChartCanvas = el.getContext('2d');
        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: '#fff',
            // 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: 'easeOutBounce',
            // 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);
    }
</script>

Demo


Posted 4 months ago Modified on 4 months ago

Hi mukesh1,

Please refer below sample.

HTML

<input onclick="return chartdata();" type="submit" value="ShowChart" />
<div id="pieChart">
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/chart.js/0./Chart.js" type="text/javascript"></script>
<script type="text/javascript">
    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] = "Completed" // label
        MultiArray[0][1] = Completed_Task // value
        MultiArray[0][2] = "#f56954" // Color
        MultiArray[0][3] = "#f56954" // highlight

        MultiArray[1][0] = "Rejected" // label
        MultiArray[1][1] = Rejected // value
        MultiArray[1][2] = "#00a65a" // Color
        MultiArray[1][3] = "#00a65a" // highlight

        MultiArray[2][0] = "Pending" // label
        MultiArray[2][1] = Pending; // value
        MultiArray[2][2] = "#00c0ef" // Color
        MultiArray[2][3] = "#00c0ef" // highlight

        MultiArray[3][0] = "Uncomplete" // label
        MultiArray[3][1] = uncomplete // value
        MultiArray[3][2] = "#f39c12" // Color
        MultiArray[3][3] = "#f39c12" // highlight

        ShowChart();
        return false;
    }

    function ShowChart() {
        var PieData = new Array();
        for (var i = 0; i < MultiArray.length; i++) {
            if (i < 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('canvas');
        $("#pieChart")[0].appendChild(el);
        var pieChartCanvas = el.getContext('2d');
        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: '#fff',
            // 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: 'easeOutBounce',
            // 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);
    }
</script>

Demo