Exploring the world of Cordova, I have delved into utilizing canvas Js for visualizing data in chart format. Following a helpful tutorial, I created a Json file and inserted the specified data as instructed, following each step diligently. The outcome matched the expected results showcased in the image below:
https://i.sstatic.net/KsV5t.png
Now, my aim is to incorporate datetime values on the xAxis. Referring to this enlightening tutorial, successfully integrated datetime values on the xAxis as depicted in the image below:
https://i.sstatic.net/7yiad.png
However, upon attempting to include the same datetime format in my json and visualizing it on the chart, encountered an issue where the chart appeared empty. Below showcases the content of my json data:
[
[ 1088620200000, 71 ],
[ 1104517800000, 65 ],
[ 1112293800000, 72 ],
[ 1136053800000, 52 ],
[ 1157049000000, 49 ],
[ 1162319400000, 62 ],
[ 1180636200000, 78 ],
[ 1193855400000, 55 ],
[ 1209580200000, 22 ],
[ 1230748200000, 65 ],
[ 1241116200000, 100 ],
[ 1262284200000, 58 ],
[ 1272652200000, 74 ],
[ 1291141800000, 79 ],
[ 1304188200000, 58 ]
]
Provided below is my snippet of javascript code:
$(window).on('load', function () {
var dataPoints = [];
$.getJSON("data.json", function (data) {
$.each(data, function (key, value) {
dataPoints.push({ x: value[0], y: parseInt(value[1]) })
});
});
var chart = new CanvasJS.Chart("container", {
zoomEnabled: true,
zoomType: "xy",
animationEnabled: true,
animationDuration: 2000,
exportEnabled: true,
title: {
text: "Energy vs Date Time"
},
axisY: {
title: "EnergykWh",
interlacedColor: "#F8F1E4",
tickLength: 10,
suffix: "k",
},
data: [
{
type: 'column',
xValueType: "dateTime",
showInLegend: true,
name: "series1",
legendText: "EnergykWh",
dataPoints: dataPoints
}
]
});
chart.render();
});
In the aforementioned code, there exists a commented-out section within dataPoints that mirrors the data structure present in my Json. Removing the comments reveals the data on the chart correctly. However, when attempting to fetch the data from the json file, nothing appears on the chart.
It seems like something crucial is missing; any assistance or advice on resolving this issue would be greatly valued.