Has anyone already used Flot in Android?
I’ve been reading this http://rapidandroid.org/wiki/Graphing and i’ve re-used a code that i had that is working on a web site.
The problem is that the graphic doesn’t render.
Something like this:
————– JAVASCRIPT THAT GETS THE DATA ——————–
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...");
}
});
}
————- OTHER METHODS ———-
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
}
};
},
The graphic doesn’t render, although the divs/checkboxs with the data name render.
Ideias?
Got this to work.
First plot the graphic without data.
Then get the data, and replot it.
Some other fixes/modifications were done so I isn’t easy to post a single modification that put this to work.