in 2nd case my chart not showing i m using adminlte donut chartif i use this then chart working var pieChartCanvas 39pieChart39get0getContext392d39 var pieChart new ChartpieChartCanvas var PieData value 4 color 39f5695439 highlight 39f5695439 label 39Completed Tasks39 value 1 color 3900a65a39 highlight 3900a65a39 label

Hi mukesh1Instead of creating string build the array and pass the array to populate the Doughnut chartCheck this example Now please take its reference and correct your codeHTMLltdiv id34pieChart34gtltdivgtltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgtltscript src34cdnjsdelivrnetexcanvasr3excanvasjs34 type34textjavascript34gtltscriptgtltscript src34cdnjsdelivrnetchartjs0Chartjs34 type34textjavascript34gtltscriptgtltscript type34textjavascript34gt windowonload function chartdata var TotalTask 10 var CompletedTask 5 var Rejected 1 var Pending 2 var uncomplete 2 MultiArray new Array4 MultiArray0 new Array5 MultiArray1 new Array5 MultiArray2 new Array5 MultiArray3 new Array5

Hi mukesh1Please refer below sampleHTMLltinput onclick34return chartdata34 type34submit34 value34ShowChart34 gtltdiv id34pieChart34gtltdivgtltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgtltscript src34cdnjsdelivrnetexcanvasr3excanvasjs34 type34textjavascript34gtltscriptgtltscript src34cdnjsdelivrnetchartjs0Chartjs34 type34textjavascript34gtltscriptgtltscript type34textjavascript34gt function chartdata var TotalTask 10 var CompletedTask 5 var Rejected 1 var Pending 2 var uncomplete 2 MultiArray new Array4 MultiArray0 new Array5 MultiArray1 new Array5 MultiArray2 new Array5 MultiArray3 new Array5 MultiArray00 34Completed34 label

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

mukesh1

SOLVED CLOSED ACTIVE ANSWERED
User: mukesh1
Posted: on Sep 11, 2018 06:15 AM
Forum: JavaScript
Answer: 2
Views: 6247
Sample Code: Download

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

dharmend...

0 8

Reply
ANSWER
User: dharmendr
Replied: on Sep 12, 2018 02:13 AM
Modified: on Sep 12, 2018 02:14 AM
Report

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

pandeyis...

0 10

Reply
ANSWER
User: pandeyism
Replied: on Sep 12, 2018 04:12 AM
Modified: on Sep 12, 2018 04:13 AM
Report

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

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

Company

Explore

Follow us

Contact Us