Working with php and mysql in cordova

Question

I am new to cordova , so i am learning syntax for it. For now i have manually entered json data and created an app in which whenever user selects a serial number from dropdown the selected serial number is then passed to my json object and matches with the serial number and then it displays the data on chart.

Now i have created a php page in which i have done the same i.e. created a json data as per my requirement. Below is the php code

$json = json_encode($data, JSON_PRETTY_PRINT);
echo "var jsonData = " . $json;
return $json;

The above code is returning me below data

var jsonData = {
"11111111":
    [
        { "x": "2016-12-06 01:22:25", "y": 3.28 },
        { "x": "2016-12-06 12:44:00", "y": 3.14 },
        { "x": "2016-12-06 01:50:50", "y": 3.56 },
        { "x": "2016-12-06 02:12:22", "y": 4 },
        { "x": "2016-12-06 03:23:59", "y": 3.75 },
        { "x": "2016-12-06 04:10:15", "y": 4.12 },
        { "x": "2016-12-06 04:50:36", "y": 4.65 },
        { "x": "2016-12-06 06:26:33", "y": 4.99 },
        { "x": "2016-12-06 07:36:23", "y": 5.32 },
        { "x": "2016-12-06 09:22:45", "y": 5.76 }
    ],
"22222222":
    [
        { "x": "2016-12-06 02:36:38", "y": 7.02 },
        { "x": "2016-12-06 03:30:52", "y": 7.11 },
        { "x": "2016-12-06 05:53:22", "y": 6.36 },
        { "x": "2016-12-06 06:37:32", "y": 6.95 },
        { "x": "2016-12-06 07:22:45", "y": 7.36 },
        { "x": "2016-12-06 08:45:45", "y": 7.12 },
        { "x": "2016-12-06 09:12:36", "y": 7.56 },
        { "x": "2016-12-06 10:54:54", "y": 8.65 },
        { "x": "2016-12-06 11:42:12", "y": 8.12 },
        { "x": "2016-12-06 12:39:45", "y": 8.78 }
    ],
"33333333":
    [
        { "x": "2016-12-06 12:12:39", "y": 4.14 },
        { "x": "2016-12-06 01:45:39", "y": 4.69 },
        { "x": "2016-12-06 02:36:47", "y": 4.25 },
        { "x": "2016-12-06 04:46:39", "y": 4.78 },
        { "x": "2016-12-06 05:50:39", "y": 5.02 },
        { "x": "2016-12-06 06:36:15", "y": 5.19 },
        { "x": "2016-12-06 07:52:39", "y": 5.29 },
        { "x": "2016-12-06 09:23:22", "y": 5.75 },
        { "x": "2016-12-06 10:25:25", "y": 5.6 },
        { "x": "2016-12-06 11:10:39", "y": 5.45 }],
"44444444":
    [
        { "x": "2016-12-06 01:15:23", "y": 8.1 },
        { "x": "2016-12-06 02:25:36", "y": 8.32 },
        { "x": "2016-12-06 02:35:29", "y": 8.96 },
        { "x": "2016-12-06 03:33:36", "y": 7.95 },
        { "x": "2016-12-06 05:36:36", "y": 8.03 },
        { "x": "2016-12-06 06:45:39", "y": 8.22 },
        { "x": "2016-12-06 07:39:29", "y": 8.36 },
        { "x": "2016-12-06 08:19:59", "y": 8.69 },
        { "x": "2016-12-06 09:49:59", "y": 8.98 },
        { "x": "2016-12-06 10:48:59", "y": 8.78 }
    ],
"55555555":
    [
        { "x": "2016-12-06 03:15:45", "y": 5.21 },
        { "x": "2016-12-06 04:49:36", "y": 5.89 },
        { "x": "2016-12-06 05:55:45", "y": 5.99 },
        { "x": "2016-12-06 06:20:30", "y": 6.12 },
        { "x": "2016-12-06 07:59:59", "y": 6.56 },
        { "x": "2016-12-06 08:28:46", "y": 5.59 },
        { "x": "2016-12-06 09:45:45", "y": 5.78 },
        { "x": "2016-12-06 10:50:45", "y": 6.23 },
        { "x": "2016-12-06 11:25:45", "y": 6.43 },
        { "x": "2016-12-06 11:56:12", "y": 6.89 }
    ]
    }

I pasted this piece of data into my json.js file and performed the following operation on index change of drop-down

 var dataPoints = [];
    function SrNo() {
        var e = document.getElementById("dd");
        var selectedVal = e.options[dd.selectedIndex].text;
        //alert(selectedVal);
        //selectedIndex = selectedVal;
        dataPoints = [];
        jsonData[selectedVal].forEach(function (data) {
            dataPoints.push({ x: new Date(data.x), y:  data.y });
        });

And then passed this dataPoints on my chart.

Now i want is to perform same functionality but by using get 'post' method. I don't want to use the manual data i want whenever i select a serial number it will send request to my php page and gives me the data which i want to show on chart.

Updated Code

Below is my code for php

  $result = mysqli_query($con,$sql);
  $data = [];

  if($result)
  {
     while($row = mysqli_fetch_array($result))
     {
        $serial = $row['Device_Serial_Number'];
        $x = $row['Data_Datetime'];
        $y = $row['Energy_kwh'];

        // tried to add $parameter = $_GET["Device_Serial_Number"]; here and passed it in data

        if(!isset($data[$serial]))
        {
           $data[$serial] = [];
        }
          $data[$serial][] = ['x' => $x , 'y' => (float)$y];

     }

       mysqli_free_result($result);

     }
       // it doesn't gives me any thing
       $json = json_encode($data[$parameter], JSON_PRETTY_PRINT);
       echo "var jsonData = " . $json;

Update 2

Below is my code where i am generating the chart

var e = document.getElementById("dd");
        var selectedVal = e.options[dd.selectedIndex].text;
        //alert(selectedVal);
        //selectedIndex = selectedVal;

        // Send your request on server
        $.ajax({
            method: "GET",
            url: "index.php", // url to the server
            data: { Device_Serial_Number : selectedVal }
        })
        .done(function (server_data) {
            // Decode the data from server 
            var result = jQuery.parseJSON(server_data);
            alert(server_data);
            dataPoints = [];
            result.forEach(function (data) {
                dataPoints.push({ x: new Date(data.x), y: data.y });
            });
        })
        .fail(function (jqXHR, textStatus) {
            // In case of any error
            alert("Request failed: " + textStatus);
        });

While running it i am getting errors in console

Any help would be highly appreciated.

Hristo Eftimov · Accepted Answer

In your javascript code you need to make a request to the server. I recommend you to use jQuery and the jQuery.ajax() function. It should like like this:

 var dataPoints = [];
 function SrNo() {
    var e = document.getElementById("dd");

    // Get the selected value
    var selectedVal = e.options[dd.selectedIndex].text;

    // Send your request to the server
    $.ajax({
        method: "GET",
        url: "some.php", //your url to the server
        data: { serialNumber: selectedVal }
    })
    .done(function( server_data ) {

         // Decode the data from the server
         var result = jQuery.parseJSON( server_data );

         // Now you can do anything you want:
         result.forEach(function (data) {
             dataPoints.push({ x: new Date(data.x), y:  data.y });
         });
    })
    .fail(function( jqXHR, textStatus ) {
         // In case of error
         alert( "Request failed: " + textStatus );
    });
 };

On the server you need to modify your php file to work with the parameter ( serial number ) that you send:

// Get the parameter
$parameter = $_GET["serialNumber"];

// Select the object for the selected serial number and return it
$json = json_encode($data[$parameter], JSON_PRETTY_PRINT);
return $json;

This should work good. Good luck ;)

Working with php and mysql in cordova

Answers (1)

Related Questions