Problème lors de l'utilisation de Flot + JQuery dans Android

Question

Est-ce que quelqu'un a déjà utilisé Flot dans Android?

J'ai lu ce http://rapidandroid.org/wiki/Graphing et j'ai réutilisé un code que j'avais qui fonctionne sur un site web.

Le problème est que le graphique ne rend pas.

Quelque chose comme ceci:

-------------- JAVASCRIPT QUE LES DONNÉES ------------------- GETS -

if ($('#newsStatsCheckbox').is(':checked')) { 

     $.ajax({ 
      url : mobileClippingStatistics.baseUrl 
        + "countNews.json?aggregation=" 
        + $("#aggregation").val() + "&start=" 
        + $("#start").val() + "&end=" + $("#end").val(), 
      type : "GET", 
      dataType : "json", 
      success : mobileClippingStatistics.addToGraphic, 
      error : function(xhr, ajaxOptions, thrownError) { 
       console.error("News hits data is not available..."); 
       console.error(xhr.status); 
       console.error(thrownError); 
       alert("News hits data is not available..."); 
      } 
     }); 

    } 

------------- AUTRES MÉTHODES ----------

  addToGraphic : function(jsonData) { 
    // To keep the colors the same 

    if (typeof jsonData == 'string') { 
     var splitData = jsonData.split(" "); 

     for (var i = 0; i < splitData.length - 1; i++) { 
      var json = eval('(' + splitData[i] + ')'); 

      json.color = mobileClippingStatistics.plotDataColor; 

      mobileClippingStatistics.plotData.push(json); 
      mobileClippingStatistics.plotDataBackup.push(json); 

      var div = $("<div style='padding-right:10px; position:relative; float:left;' />"); 

      var label = $("<label/>"); 
      label 
        .html(mobileClippingStatistics.plotData[mobileClippingStatistics.plotData.length - 1].label); 

      var check = $(''); 
      check.attr('id', "checkbox" 
        + mobileClippingStatistics.plotDataColor); 

      div.append(label); 
      div.append('<input id="checkbox'+mobileClippingStatistics.plotDataColor+'" type="checkbox" checked="checked" onchange="mobileClippingStatistics.refreshGraphic()" />'); 

      $("#plotOptions").append(div); 

      mobileClippingStatistics.plotDataColor++; 

     } 

    } 

    else { 
     jsonData.color = mobileClippingStatistics.plotDataColor; 
     mobileClippingStatistics.plotData.push(jsonData); 
     mobileClippingStatistics.plotDataBackup.push(jsonData); 

     div = $("<div style='padding-right:10px; position:relative; float:left;' />"); 

     var label = $("<label/>"); 
     label 
       .html(mobileClippingStatistics.plotData[mobileClippingStatistics.plotData.length - 1].label); 

     check = $('<input type="checkbox" checked="checked" onchange="mobileClippingStatistics.refreshGraphic()" style="padding-right:10px; />'); 
     check.attr('id', "checkbox" 
       + mobileClippingStatistics.plotDataColor); 

     div.append(label); 
     div.append('<input id="checkbox'+mobileClippingStatistics.plotDataColor+'" type="checkbox" checked="checked" onchange="mobileClippingStatistics.refreshGraphic()" />'); 

     $("#plotOptions").append(div); 

     mobileClippingStatistics.plotDataColor++; 

    } 

    mobileClippingStatistics.plotGraphic(); 

}, 

plotGraphic: function() {

// Plot graphic 
    var plot = $.plot($("#plot"), mobileClippingStatistics.plotData, 
      mobileClippingStatistics.options); 

    var overview = $.plot($("#plotOverview"), 
      mobileClippingStatistics.plotData, { 
       series : { 
        lines : { 
         show : true, 
         lineWidth : 1 
        }, 
        shadowSize : 0 
       }, 
       xaxis : { 
        ticks : [], 
        mode : "time" 
       }, 
       yaxis : { 
        ticks : [], 
        autoscaleMargin : 0.1 
       }, 
       selection : { 
        mode : "x" 
       }, 
       legend : { 
        show : false 
       } 

      }); 

    mobileClippingStatistics.showPlots(); 

    $("#plot").bind(
      "plotselected", 
      function(event, ranges) { 
       // do the zooming 

       plot = $.plot($("#plot"), 
         mobileClippingStatistics.plotData, $.extend(true, 
           {}, mobileClippingStatistics.options, { 
            xaxis : { 
             min : ranges.xaxis.from, 
             max : ranges.xaxis.to 
            } 
           })); 

       // don't fire event on the overview to prevent eternal loop 
       overview.setSelection(ranges, true); 
      }); 

    $("#plotOverview").bind(
      "plotselected", 
      function(event, ranges) { 
       // plot.setSelection(ranges); 
       $("#plot").html(""); 
       $.plot($("#plot"), mobileClippingStatistics.plotData, $ 
         .extend(true, {}, mobileClippingStatistics.options, 
           { 
            xaxis : { 
             min : ranges.xaxis.from, 
             max : ranges.xaxis.to 
            } 
           })); 
      }); 

}, 

defineOptions : function() { 
    mobileClippingStatistics.options = { 
     lines : { 
      show : true 
     }, 
     points : { 
      show : true 
     }, 
     xaxis : { 
      mode : "time" 
     }, 
     yaxis : { 
      min : 0 
     }, 

     grid : { 
      markings : mobileClippingStatistics.weekendAreas 
     } 

    }; 

}, 

Le graphique ne rend pas, bien que les divs/checkboxs avec le nom de données rendent.

Ideias?

Answer 1

J'ai commencé à travailler.

Commencez par tracer le graphique sans données.

Ensuite, récupérez les données et replacez-les.

D'autres correctifs/modifications ont été effectués, il n'est donc pas facile de publier une seule modification qui a mis cela à l'œuvre.