Search code examples
javascriptjqueryajaxjqplot

Why does jqPlot show an erroroneous pie chart with data retrieved via AJAX?


I'm developing an app, in which I use jqPlot to plot a pie chart using some data retrieved via AJAX. However, I've noted that the resulting pie chart is wrong. When I manually put the data in an array, the pie chart is correct.

This is part of my code.

  $.ajax({
    url:'http://localhost/mijson.php',
    dataType:'json',
    async:false,
    success:function(data){
        for(a in data){
            var div_pintar = "<div id='divgrafica"+a+"' class='myChart'></div>";
            $("#espacio_graficas").append(div_pintar);
            var datos_tmp = [];
            datos_tmp.push(['Ok',data[a]['ok']]);
            datos_tmp.push(['Fail',data[a]['fail']]);

            $.jqplot('divgrafica'+a, [datos_tmp], {
                title:data[a]['label'] ,
                seriesDefaults:{
                    renderer:$.jqplot.PieRenderer,
                    trendline:{ show: true },
                },
                legend:{ show: true }
            });
            ...

The JSON that I get is this:

[{"label":"FECHA","requer":56,"ok":28,"fail":28},
 {"label":"TTM Y FECHA","requer":35,"ok":8,"fail":27}]

In summary, it shows me a pie chart, for example, with two values, but add is 14%.

The same occurs if I use ajaxDataRenderer:

...
    plo12 = $.jqplot('pieChart2', jsonurl,{
        title: 'AJAX JSON Data Renderer',
        dataRenderer: ajaxDataRenderer,
        seriesDefaults: {
            renderer: $.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true
            }
        },
        legend: { show: true, location: 'e' }
    });
    ...

Solution

  • Thanks to Makyen who help me, although his answer is good, errors still persist. After more 16 hours trying, i found solution, that was very, very easy.

     .....
         var div_pintar = "<div id='divgrafica"+index+"' class='myChart'></div>";
                    $("#espacio_graficas").append(div_pintar);
                    var datos_tmp = [];
                        datos_tmp.push(['Ok',parseInt(datos[a]['ok'])]);
                        datos_tmp.push(['Fail',parseInt(datos[a]['fail'])]);
        ......
    

    Only with function from javascript parseInt

    I hope this can help to other persons. I lost many hours :(