How to display dynamically label and values of label in pie chart using chart.js?

Question

My Pie chart but actually i want this type of chart

I want to display dynamically label and label values in pie chart using chart js but according to my code which i have written ,it display all label in one label. I don't know where is the issue in my code.I don't know as much about js. Please guide me.Thanks in advance.

$("#get_data").click(function(){

    var employees = $("#employees").val();
    //var fairs     = $("#fairs").val();

    $.ajax({

        url     : 'php_script/chart_values.php',
        method  : 'POST',
        data    : {employees:employees},

        success : function(data){

            var obj = JSON.parse(data);

            var a = obj[0]; // labele data "Negotiation on 
            proposal","Won","Contracted","Intersted",
            var b = obj[1]; // label values "100","90","70"
            var labeldata;
            for( i=0; i<a.length;i++){ // loop to fetch label data one by one
                labeldata += [a][i];

            }
            console.log(labeldata);

            var chart = new CanvasJS.Chart("chartContainer", {
            title: { 
                //text: "Worldwide Smartphone sales by brand - 2012",
                fontSize:15
            }, 
            axisY: { 
                title: "Products in %" 
            }, 
            legend :{ 
                verticalAlign: "center", 
                horizontalAlign: "right" 
            },
            data: [{
            type: "pie", 
            showInLegend: true, 
            toolTipContent: "{label} <br/> {y} %", 
            indexLabel: "{y} %", 
            dataPoints: [ 
                { 

                 label: [labeldata],y:19 // dispaly lable data here


                } 
             /*{ label: "Apple",    y: 19.1, legendText: "Apple"  }, 
            { label: "Huawei",   y: 4.0,  legendText: "Huawei" }, 
            { label: "LG",       y: 3.8,  legendText: "LG Electronics"}, 
            { label: "Lenovo",   y: 3.2,  legendText: "Lenovo" }, 
            { label: "Others",   y: 39.6, legendText: "Others" }  */
           ]
        } 
     ] 
}); 
chart.render();

        }

    });

});

It seems that you are first concatenating label data, and then adding it to chart data as one string, instead of iterating through label data and adding one by one. — Armin
– Armin, Commented Sep 18, 2018 at 6:58

Mohd Atiq · Accepted Answer · 2018-09-19 05:50:57Z

This is my complete code and this is working perfectly. $("#get_data").click(function(){

    var employees = $("#employees").val();
    //var fairs     = $("#fairs").val();

    $.ajax({

        url     : 'php_script/chart_values.php',
        method  : 'POST',
        data    : {employees:employees},

        success : function(data){
            $("#page_content").fadeIn();
            $("#bar_chart_div").fadeOut();
            var obj = JSON.parse(data);

            var a = obj[0]; // labele data "Won","Contracted","Intersted"
            var b = obj[1]; // label values "100","90","70"
            var labeldata=[];
            for( i=0; i<a.length;i++){ 

                labeldata.push({label:a[i],y:parseInt(b[i]),legendText:a[i]});
            }

            debugger;
           console.log(JSON.stringify(labeldata));

            var chart = new CanvasJS.Chart("chartContainer", {
                title: { 

                    fontSize:15
                }, 
                axisY: { 
                    title: "Products in %" 
                }, 
                legend :{ 
                    verticalAlign: "center", 
                    horizontalAlign: "right" 
                },
                data: [{
                type: "pie", 
                showInLegend: true, 
                toolTipContent: "{label} <br/> {y} ", 
                indexLabel: "{y} %", 
                dataPoints: labeldata



        }] 
}); 
chart.render();



        }

    });

});

Collectives™ on Stack Overflow

How to display dynamically label and values of label in pie chart using chart.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related