jqPlot Pie chart not rendering correctly

Question

I am using jqPlot in phonegap but some problem is there like if I gave static value to pie chart then it works well but if I gave dynamic value then not rendering correctly

Static chart :-

$.jqplot('chartdiv', [ [ [ 'Cricket', 42],
            [ 'Football', 8 ],
            [ 'Basketball', 4 ], [ 'Chess', 28 ],
            [ ' TableTennis', 18 ] ] ], {
        seriesDefaults : {
            renderer : $.jqplot.PieRenderer,
            rendererOptions : {
                showDataLabels : true
            }
        },
        legend : {
            show : true,
            location : 'e'
        }
    });

O/P :-

Dynamic chart :-

var cricketPortion = document.getElementById("value_1").value;
var footballPortion = document.getElementById("value_2").value;
var basketballPortion = document.getElementById("value_3").value;
var chessPortion = document.getElementById("value_4").value;
var ttPortion = document.getElementById("value_5").value;
$.jqplot('chartdiv', [ [ [ 'Cricket', cricketPortion ],
            [ 'Football', footballPortion ],
            [ 'Basketball', basketballPortion ], [ 'Chess', chessPortion ],
            [ ' TableTennis', ttPortion ] ] ], {
        seriesDefaults : {
            renderer : $.jqplot.PieRenderer,
            rendererOptions : {
                showDataLabels : true
            }
        },
        legend : {
            show : true,
            location : 'e'
        }
    });

O/P :-

Tell me how can I get rid of this..??

Answer 1

Use the parseInt function of Javascript to parse the String values into Integers
Eg: parseInt(document.getElementById("value_1").value)

jqPlot excepts an value(integer) to plot the sections/divisions on the canvas(be it a pie-chart, bar-chart or any other chart)

So its [ label(a String), value(an Integer) ]
Make sure the data-type of the second field is of Integer type

Hope it helps.

Answer 2

Try with this you will get result

Use parseInt for every value

parseInt(document.getElementById("value_1").value)

DEMO