2016-12-06 68 views
1

我是cordova的新手,所以我正在学习它的语法。现在我已经手动输入了json data并创建了一个应用程序,其中每当用户从dropdown中选择serial number时,所选的序列号将被传递给我的json对象并与序列号匹配,然后它将数据显示在图表上。在科尔多瓦使用php和mysql

现在我创建了一个php页面,其中我完成了相同的操作,即按照我的要求创建了一个json数据。下面是PHP代码

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

上面的代码返回我下面的数据

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 } 
    ] 
    } 

,我将这些数据块到我json.js文件,对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 }); 
     }); 

然后在我的图表上通过这个dataPoints

现在我想要执行相同的功能,但通过使用get'后'方法。我不想使用我想要的手动数据,只要我选择一个序列号,它会发送请求到我的PHP页面,并给我我想要在图表上显示的数据。

更新的代码

下面是我对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; 

更新2

下面的代码是我的代码我在哪里生成图表

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); 
     }); 

在运行它我得到在控制台

enter image description here

任何帮助的错误都会被高度赞赏。

回答

1

在您的JavaScript代码中,您需要向服务器发出请求。我建议您使用jQueryjQuery.ajax()函数。它应该像这样的:

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); 
    }); 
}; 

在您需要修改你的PHP文件,该参数(序列号)使用的服务器,您发送:

// 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; 

这应该工作良好。祝你好运;)

+0

我面临一个问题,请亲切看到更新的代码。 – faisal1208

+0

你能解释一下你想对数据做什么?你可以创建jsfiddle吗? –

+0

请看更新后的代码,我使用本地的'php'和'mysql'来从中获取数据 – faisal1208