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

Last Reply 14 days ago By pandeyism

Posted 15 days 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");
         
             
    }

 

You are viewing reply posted by: pandeyism 14 days ago.
Posted 14 days ago Modified on 14 days 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