Как разобрать ответ cURL в JSON для диаграмм Google для чтения

Question

Как разобрать ответ cURL в JSON для диаграмм Google для чтения

В общем, я делаю запрос cURL, чтобы получить объект JSON. Это мой файл getData.php:

     <?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» — это время, когда оно было измерено, а «value» — фактическое значение.

Сейчас я пытаюсь нарисовать график 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

charts curl draw json php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

В соответствии с требованием от 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>

Я проверил код в моей системе, и график нарисован, как показано ниже

0