2016-11-07 91 views
0

所以基本上我做了一个cURL请求来获取JSON对象。这是我访问getdata.php文件:如何解析cURL响应为JSON谷歌图表读取

 <?php 

$ch = curl_init(); 

curl_setopt($ch, CURLOPT_URL, "https://mfdewfewffewfefef.com/api/dataout/IAfhAfTIUZrCje5q.json"); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET"); 


$headers = array(); 
$headers[] = "X-Apikey: xxxxxxxxxxxxxxxxxxxxx"; 
$headers[] = "X-Startdate: 2016-10-04 00:00:00"; 
$headers[] = "X-Enddate: 2016-10-08 15:00:00"; 
$headers[] = "X-Channelnum: 2"; 
$headers[] = "X-Reclimit: 50"; 
$headers[] = "User-Agent: cwfewfewf/1.0"; 
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); 
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); 


$result = curl_exec($ch); 
if (curl_errno($ch)) { 
    echo 'Error:' . curl_error($ch); 
} 

print_r($result); 

?> 

而且我得到了响应:https://i.imgur.com/5FcH3j9.png

基本上,这是用特马尔传感器测量值。 “ts”是测量的时间,“价值”是实际值。

现在我试图用这个信息绘制一个Google图表,但我无法做到。这是我的chart.html页:

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.charts.load('current', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
     var jsonData = $.ajax({ 
      url: "getData.php", 
      dataType: "json", 
      async: false 
      }).responseText; 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(jsonData); 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, {width: 400, height: 240}); 
    } 

    </script> 
    </head> 

    <body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div"></div> 
    </body> 
</html> 

我在做什么错?我只是得到一个空白页面。在Google Charts文档中,它表示getData.php可以是任何提供它的json格式的文件,以及我在getData.php上输出的curl响应都是JSON格式。

或者是否需要进行一些更改才能使图表只读取“ts”和“value”信息并绘制图表?

+0

给出网址https://xxx.sasasaas.pt/api/dataout/ffwefewfewff.json似乎无法获取任何数据 –

+0

使用正确的值编辑以获取数据。 @Kiran Muralee – user2535046

+0

将src =“// ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”替换为src =“http://ajax.googleapis.com/ajax/libs/ jquery/1/jquery.js“,然后再试一次 –

回答

0

由于每从OP要求我已更改chart.html如下

<html> 
    <head> 
     <!--Load the AJAX API--> 
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
     <script type="text/javascript"> 

      // Load the Visualization API and the piechart package. 
      google.charts.load('current', {'packages': ['corechart']}); 

      // Set a callback to run when the Google Visualization API is loaded. 
      google.charts.setOnLoadCallback(drawChart); 

      function drawChart() { 
       var jsonData = $.ajax({ 
        url: "getData.php", 
        dataType: "json", 
        async: false 
       }).responseText; 

       jsonData = JSON.parse(jsonData); 

       jsonData = jsonData.channels[2].values; 

       var dataArray = [['ts', 'values']]; 
       for (var i = 0; i < jsonData.length; i++) 
       { 
        var tempArray = [jsonData[i].ts, parseFloat(jsonData[i].value.replace(",", "."))]; 
        dataArray.push(tempArray); 
       } 

       // Create our data table out of JSON data loaded from server. 
       var data = google.visualization.arrayToDataTable(
         dataArray 
         );     

       var options = { 
        hAxis: {title: 'TIME-> "TS" Variable', titleTextStyle: {color: '#333'}}, 
        vAxis: {title: 'Values', titleTextStyle: {color: '#333'}} 

       }; 

       // Instantiate and draw our chart, passing in some options. 
       var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
       chart.draw(data, options); 
      } 

     </script> 
    </head> 

    <body> 
     <!--Div that will hold the pie chart--> 
     <div id="chart_div" style="width: 100%; height: 500px;"></div> 
    </body> 
</html> 

我在我的系统测试的代码,并绘制图表下方

enter image description here

+0

不工作。我得到“表没有列” – user2535046

+0

返回的数据不适合用于创建数据表。 –

+0

解释您需要构建数据表的返回JSON数据的值 –