CODEWITHSUNDEEP
jqueryflot
Rahul
Rahul

Reputation: 166

While Binding Flot Pie Chart its not visible even if data is there

I am binding Flot Pie Chart using $.ajax method. while binding i am getting the data in json format and using $.plot method. But after that i cant see the pie chart being plotted. Below is my code:

    function drawPieChart() {
    $.ajax({
        type: "POST",
        url: "Api/ChartsApi.aspx",
        data: '{}',
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (r) {
            if (r != null) {
                data = r;
                DrawPieChart();

            }
            else {
                alert("No Data Avaliable");
                return false;
            }
        },
        failure: function (r) {
            alert(r.d);
        },
        error: function (r) {
            alert(r.d);
        }
    });
}

//Pie Chart
function DrawPieChart() {
    $.plot($("#placeholder"), data, {
        series: {
            pie: {
                show: true
            }
        },
        legend: {
            labelBoxBorderColor: "none"
        }
    });
}

Data is Below:

[ { "Status": "Active", "Count": 28 }, { "Status": "Under Process", "Count": 15 }, { "Status": "Registered", "Count": 23 } ]

Upvotes: 2

Views: 428

Answers (1)

Raidri
Raidri

Reputation: 17550

Your data has the wrong format, flot doesn't know what "Status" and "Count" mean.

Change your data to use label and data:

[ 
    { label: "Active", data: 28 },
    { label: "Under Process", data: 15 },
    { label: "Registered", data: 23 }
]

Upvotes: 1

Related Questions