Comment analyser la réponse de cURL en JSON pour que les graphiques de Google lisent

Donc, fondamentalement, je fais une requête cURL pour obtenir un objet JSON. Ceci est mon fichier getData.php:Comment analyser la réponse de cURL en JSON pour que les graphiques de Google lisent

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

?>

Et j'obtenir la réponse: https://i.imgur.com/5FcH3j9.png

Fondamentalement, ce sont des valeurs mesurées avec un capteur de Termal. Le "ts" est le temps où il a été mesuré, et "valeur" la valeur réelle.

Maintenant j'essaye de dessiner un graphique de Google avec cette information, mais je ne peux pas le faire. Ceci est ma page 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>

Qu'est-ce que je fais mal? Je viens d'avoir une page blanche. Dans la documentation de Google Maps, il est indiqué que le fichier getData.php peut être fourni à condition que son format json soit activé et que la réponse curl que je produise sur getData.php soit au format JSON.

Ou ai-je besoin d'apporter des modifications pour que le graphique ne lise que les informations "ts" et "value" et dessine le graphique?

Source

2016-11-07 user2535046

L'URL https://xxx.sasasaas.pt/api/dataout/ffwefewfewff.json ne semble pas récupérer de données –

Modifier avec les valeurs correctes pour récupérer les données. @Kiran Muralee – user2535046

remplacer src = "// ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" avec src = "http://ajax.googleapis.com/ajax/libs/ jquery/1/jquery.js "et essayez à nouveau –

Selon l'exigence de OPi ont apporté des modifications au chart.html comme suit

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

J'ai testé le code dans mon système et la carte est tracée comme indiqué ci-dessous

Source

2016-11-07 01:41:00

Ne fonctionne pas. Je reçois "Table n'a pas de colonnes" – user2535046

les données retournées ne sont pas adaptés pour être utilisés pour créer une table de données. –

expliquez les valeurs des données JSON renvoyées dont vous avez besoin pour construire votre table de données –

Comment analyser la réponse de cURL en JSON pour que les graphiques de Google lisent

Répondre

Questions connexes