I'm new diving into the whole mobile app development so I've been using the tutorials from framework7 and testing the app on my phone with PhoneGap but I've encountered an issue that I simply can't understand what's happening.
About the app: I'm using Flot to display a bar chart. (I have a functional chart coded already so I'm reusing that code) but the problem is when I want to use a JSON string to pass it to Flot.
To make things clearer, here's the code.
Ajax call to get the json string
$$.ajax({
url: "php/grafica2.php?id=14&tipo=watts&fecha=2016-05-03",
dataType: "json",
success: function(data) {
onDataReceived(data); //this is a function that contains the flot code
}
});
PHP json string I receive through ajax (data)
[{"label":"kWh","color":"#9EC485","data":[[1462147200000,19.31675],[1462233600000,15.083416666667],[1462320000000,17.978833333333],[1462406400000,20.4195],[1462492800000,8.2081083333333],[1462579200000,22.394],[1462665600000,23.445666666667],[1462752000000,13.1724],[1462838400000,16.047933333333],[1462924800000,17.391666666667],[1463011200000,6.2165166666667],[1463097600000,1.7152833333333],[1463184000000,22.048083333333],[1463270400000,15.552825],[1463356800000,0.50152083333333],[1463443200000,2.5424583333333],[1463529600000,9.0519],[1463616000000,5.3256333333333],[1463702400000,10.64955],[1463788800000,10.9358],[1463875200000,19.499916666667],[1463961600000,9.2917083333333],[1464048000000,8.8524],[1464134400000,11.613316666667],[1464220800000,14.547891666667],[1464307200000,0],[1464393600000,8.1566916666667],[1464480000000,8.998325],[1464566400000,11.784241666667],[1464652800000,8.0039666666667],[0,7.423675]]}]
Flot function call ("data" passed is the json code above)
$.plot("#graficaEnergia", data, {
grid: {
hoverable: true,
borderColor: "#f3f3f3",
borderWidth: 1,
tickColor: "#f3f3f3"
},
series: {
bars: {
show: true,
align: 'center',
barWidth: 31600000,
lineWidth: 0,
fillColor: {
colors: [{
opacity: 0.7
}, {
opacity: 0.7
}]
}
}
},
lines: {
fill: true, //Converts the line chart to area chart
color: "#235601"
},
yaxis: {
min: 0,
show: true,
labelWidth: 30
},
xaxis: {
mode: "time",
tickFormatter: function (val, axis) {
//return dayOfWeek[new Date(val).getDay()];
dia = monthSpanish[new Date(val).getMonth()]
dia2 = new Date(val).getDate();
return dia+" "+dia2;
},
tickSize: [1, "day"],
min: (new Date(2016, 4, 0)).getTime(),
max: (new Date(2016, 5, 0)).getTime(),
labelHeight: 30
},
legend: {
show: true
}
});
Now. I've tried a few things and this is how I know there's an issue with JSON in general which I'm not sure if it's Framework7 or PhoneGap fault.
I deleted the 'dataType: "json"' line from the ajax call and when I tested it on phonegap, it actually showed me the flot chart template but without any data.
So, since now I'm not getting the json object from the ajax call, I tried parsing the string I get with either $.parseJSON(data); and JSON.parse(data); But whenever I use these functions the chart breaks again and it just doesn't show it at all.
Finally, just to make sure my code is right and the issue is the json object, I went and put my json string directly on the flot call like so:
$.plot("#graficaEnergia", [{"label":"kWh","color":"#9EC485","data":[[1462147200000,19.31675],[1462233600000,15.083416666667],[1462320000000,17.978833333333],[1462406400000,20.4195],[1462492800000,8.2081083333333],[1462579200000,22.394],[1462665600000,23.445666666667],[1462752000000,13.1724],[1462838400000,16.047933333333],[1462924800000,17.391666666667],[1463011200000,6.2165166666667],[1463097600000,1.7152833333333],[1463184000000,22.048083333333],[1463270400000,15.552825],[1463356800000,0.50152083333333],[1463443200000,2.5424583333333],[1463529600000,9.0519],[1463616000000,5.3256333333333],[1463702400000,10.64955],[1463788800000,10.9358],[1463875200000,19.499916666667],[1463961600000,9.2917083333333],[1464048000000,8.8524],[1464134400000,11.613316666667],[1464220800000,14.547891666667],[1464307200000,0],[1464393600000,8.1566916666667],[1464480000000,8.998325],[1464566400000,11.784241666667],[1464652800000,8.0039666666667],[0,7.423675]]}], {
grid: {
hoverable: true,
borderColor: "#f3f3f3",
borderWidth: 1,
tickColor: "#f3f3f3"
},
series: {
bars: {
show: true,
align: 'center',
barWidth: 31600000,
lineWidth: 0,
fillColor: {
colors: [{
opacity: 0.7
}, {
opacity: 0.7
}]
}
}
},
lines: {
fill: true, //Converts the line chart to area chart
color: "#235601"
},
yaxis: {
min: 0,
show: true,
labelWidth: 30
},
xaxis: {
mode: "time",
tickFormatter: function (val, axis) {
//return dayOfWeek[new Date(val).getDay()];
dia = monthSpanish[new Date(val).getMonth()]
dia2 = new Date(val).getDate();
return dia+" "+dia2;
},
tickSize: [1, "day"],
min: (new Date(2016, 4, 0)).getTime(),
max: (new Date(2016, 5, 0)).getTime(),
labelHeight: 30
},
legend: {
show: true
}
});
And it actually worked when I tested it on my phone, the chart was there with all the data and the bars looking pretty.
So, I'm completely lost on how to fix this, since I can't receive the data as json on the ajax call nor I can parse the string before sending the data to Flot.
Any thoughts or ideas to help me fix this will be truly appreciated. Thanks for reading up to this point!
