Clever Geek Handbook

Donut Chart.js not working as expected

I am trying to use chart.js donut chart. my JSON data is a correct fetch from the database. But at the moment the graph is filled, the values ​​will not be displayed If I paste the example code static, then it shows the relevant data.

function playerPrel2Res(qID){
    var tmp="#playerVoteId"+qID;
    var lab=$(tmp).text();
    $.ajax({
        type : "POST",
        url : contextPath + '/common/playerPredCounter.action', //contextPath for dynamic
        dataType : 'json',
        data : {predictionID:qID},
        success : function(data) {
            var id=new Array();
            var name=new Array();

            for ( var i = 0; i < data.properties.length; i++) {
                id[i]= data.properties[i].id;
                name[i]= data.properties[i].name;
            }
            alert("hi...");
            var doughnutData = [
                {
                    value: id[0],
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: name[0]
                },
                {
                    value: id[1],
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: name[1]
                },
                {
                    value: id[2],
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: name[2]
                },
            ];

        window.onload = function(){
            var ctx = document.getElementById('playerChartArea').getContext("2d");
            alert(ctx +"path");
            window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
        };              

        }
    });
}

in this case no output will be displayed, but I write like this static and then display the graph

var doughnutData = [
                {
                    value: id[0].val(),
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: name[0].val()
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                },
                {
                    value: 40,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 120,
                    color: "#4D5360",
                    highlight: "#616774",
                    label: "Dark Grey"
                }
            ];

        window.onload = function(){
            var ctx = document.getElementById('playerChartArea').getContext("2d");
            alert(ctx +"path");
            window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
        };

and one thing is that my warning is not showing for ctx

Please help me.

+3


source to share


1 answer


I did it, just do it, I paste my code

var doughnutData="";
    $.ajax({
        type : "POST",
        url : contextPath + '/common/action', //contextPath for dynamic
        dataType : 'json',
        data : {predictionID:oID},
        success : function(data) {
            var id=new Array();
            var name=new Array();

            for ( var i = 0; i < data.properties.length; i++) {
                id[i]= data.properties[i].id;
                name[i]= data.properties[i].name;
            }

             doughnutData = [
                {
                    value: id[0],
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: name[0]
                },
                {
                    value: id[1],
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: name[1]
                },
                {
                    value: id[2],
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: name[2]
                },
                {
                    value: id[3],
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: name[3]
                },
                {
                    value: id[4],
                    color: "#4D5360",
                    highlight: "#616774",
                    label: name[4]
                }
            ];
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
        }
    });


so just declare donutData variable global and remove the function windows.load

and just stay inline . what he

+1


source






More articles:


All Articles