Cordova canvasjs show data on chart while selecting from a dropdown list

Question

I am new to cordova, i am making a simple app which gets data from json and then displays it on chart. But for getting data the user should select a serial number then that serial number matches the serial number placed in json, fetch it's data, store it in a variable and then displays it on chart. Bellow is my drop-down created in html

<select class="dropdown" id="dd">
        <option value="" selected="selected">Select Serial Number</option>
        <option value="11111111">11111111</option>
        <option value="22222222">22222222</option>
        <option value="33333333">33333333</option>
        <option value="44444444">44444444</option>
        <option value="55555555">55555555</option>
    </select>

Bellow is my json data placed in .js file

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

Now i want is to select the serial number which matches with the above serial number and stores it in a variable named var dataPoints = []; and then i will pass it to the chart

Bellow is my chart code where i want to put my data

 $(window).on('load', function () {// i haven't place all my chart code but just the **data** section
data: [{
                //legendText: "EngergykWh",
                showInLegend: true,
                    type: 'column',
                    //xValueType: "dateTime",
                    xValueFormatString:"D/MM h:mm",
                    //xValueFormatString: "YYYY-MM-DD hh:mm:ss TT",
                    showInLegend: true,
                    name: "series1",
                    legendText: "EnergykWh",
                    dataPoints: dataPoints // this should contain only specific serial number data

                }]
chart.render();
});

I am stuck to it, any help would be highly appreciated

Answer 1

You can use jQuery to read selected value and perform required action on change of selected value.

$( ".dropdown" ).change(function() {
    chart.options.data[0].dataPoints = [];
    var e = document.getElementById("dd");
    var selected = e.options[e.selectedIndex].value;
    dps = jsonData[selected];
    for(var i in dps) {
        var xVal = dps[i].x;
        chart.options.data[0].dataPoints.push({x: new Date(xVal), y: dps[i].y});
    }
    chart.render();
});

See an example here .

You should probably consider checking your JSON value. Months should be indexed from 0-11 in JS or you should handle it outside JSON before rendering chart.