Search code examples
javascriptjsonajaxcordovacanvasjs

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

Solution

  • 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