faisal1208 faisal1208 - 6 days ago 5
Javascript Question

JavaScript Charts from JSON using AJAX in Cordova

I am new to

Cordova
, i am using
canvas Js
for displaying data in chart. Following this tutorial i created a
Json
file and inserted the same data as it is mentioned in the tutorial, followed each step and run the code things work perfect as shown in the bellow image.

enter image description here

Now i want to display
datetime
on
xAxis
, for this i followed this tutorial and i am able to view the chart with date time on xAxis as shown in bellow image

enter image description here

But when i insert the same date time format in my json and want to see my chart the chart is empty, bellow is 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 ]
]


Bellow is my
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",
//xValueFormat: "YYYY-MM-DD",
showInLegend: true,
name: "series1",
legendText: "EnergykWh",
dataPoints: dataPoints
// [
// { x: 1088620200000, y: 71 },
// { x: 1104517800000, y: 55 },
// { x: 1112293800000, y: 50 },
// { x: 1136053800000, y: 65 },
// { x: 1157049000000, y: 95 },
// { x: 1162319400000, y: 68 },
// { x: 1180636200000, y: 28 },
// { x: 1193855400000, y: 34 },
// { x: 1209580200000, y: 14 },
// { x: 1230748200000, y: 34 },
// { x: 1241116200000, y: 44 },
// { x: 1262284200000, y: 84 },
// { x: 1272652200000, y: 4 },
// { x: 1291141800000, y: 44 },
// { x: 1304188200000, y: 11 }
//]
}
]
});

chart.render();
});


In above code there is a
commented
section in
dataPoints
which is the same as in my Json, when i remove the comment mark and run the code i can see data in chart perfectly, but when i want to retrieve it from
json
file i won't be able to see any thing on chart

I must be missing some thing, any help would be highly appreciated

Answer

The easiest way is to store json data into a javascript file while storing data into a variabe and then include it in your html page. After that use the variable, which is in the .js file, and perform a for loop, this for loop will get your data and then you can view it in chart(s). See bellow code for more understanding.

Save the json data into javascript file

var jsonData = [{ "x": "2016-06-25 12:58:52", "y": 10.22 }, { "x": "2016-14-25 14:42:47", "y": 24.73 },
            { "x": "2016-07-25 13:33:23", "y": 11.14 }, { "x": "2016-15-25 15:07:26", "y": 26.58 },
            { "x": "2016-08-25 13:49:18", "y": 13.58 }, { "x": "2016-16-25 15:14:49", "y": 27.66 },
            { "x": "2016-09-25 13:55:01", "y": 15.25 }, { "x": "2016-17-25 15:32:51", "y": 28.68 },
            { "x": "2016-10-25 14:00:15", "y": 17.25 }, { "x": "2016-18-25 15:40:32", "y": 30.73 },
            { "x": "2016-11-25 14:23:31", "y": 19.99 }, { "x": "2016-19-25 15:58:07", "y": 32.46 },
            { "x": "2016-12-25 14:30:36", "y": 21.78 }, { "x": "2016-20-25 16:21:25", "y": 34.79 },
            { "x": "2016-13-25 14:34:23", "y": 23.45 }];

Include your javascript file in html page

<script type="text/javascript" src="scripts/json.js"></script>

Use a for loop to get x and y data

for (var i = 0; i < jsonData.length; i++) {
           dataPoints.push({
              x: new Date(jsonData[i].x),
              y: jsonData[i].y
          });
        }

Pass this dataPoints in canvasJs

     data: [
            {
                type: 'column',
                xValueType: "dateTime",// no use for it
                //xValueFormat: "YYYY-MM-DD",// use xValueFormat 
                showInLegend: true,
                name: "series1",
                legendText: "EnergykWh",
                dataPoints: dataPoints

            }
        ]

I hope this will works

Comments