2016-11-07 11 views
0

Так что в основном я делаю запрос cURL, чтобы получить объект JSON. Это мой getData.php файл:Как разобрать ответ cURL в JSON для графиков Google, чтобы читать

 <?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 и ответ curl, который я выводил на getData.php, находятся в формате JSON.

Или мне нужно внести некоторые изменения, чтобы диаграмма только считывала информацию о «ts» и «value» и рисовала диаграмму?

+0

URL 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 необходимо построить для вашей таблицы данных. –

 Смежные вопросы

  • Нет связанных вопросов^_^