Как сделать так чтоб даты ставились автоматически, а не вручную?

334
13 марта 2017, 08:34

Есть код вывода графика изменения цены на авиабилеты

<!DOCTYPE html>
<html lang="ru">
 <html>
    <head>
        <!-- For Joomla: remove <html><head> and <body> tags, jquery script reference.--> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <style type="text/css">
/* Keep the smaller device widths from breaking long 'categories' names by giving the chart more height at small widths */
@media (max-width: 551px) {
        #highchart_container {height: 3000px;}
}
@media (min-width: 550px) {
    #highchart_container {height: 1400px;}
}
        </style>
        <?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://api.travelpayouts.com/v1/prices/calendar?currency=RUB&origin=MOW&destination=AER&calendar_type=departure_date&&token=***********************");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_HEADER, FALSE);
curl_setopt($ch, CURLOPT_HTTPHEADER, array("X-Access-Token: ***************************"));
$response = curl_exec($ch);
curl_close($ch);
$day=json_decode($response,true);
?>
        <script type="text/javascript">
$(function () {
    $('#highchart_container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Динамика цен на авиабилет из Москвы в Адлер на 2 недели'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ['2017-03-11', '2017-03-12', '2017-03-13', '2017-03-14', '2017-03-15', '2017-03-16', '2017-03-17', '2017-03-18', '2017-03-19', '2017-03-20', '2017-03-21', '2017-03-22', '2017-03-23', '2017-03-24'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '*цена указана в рублях',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ''
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        /*
legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
*/
        credits: {
            enabled: false
        },
        series: [{
            data: [<? echo $day['data']['2017-03-11']['price'];?>,<? echo $day['data']['2017-03-12']['price'];?>,<? echo $day['data']['2017-03-13']['price'];?>,<? echo $day['data']['2017-03-14']['price'];?>,<? echo $day['data']['2017-03-15']['price'];?>,<? echo $day['data']['2017-03-16']['price'];?>,<? echo $day['data']['2017-03-17']['price'];?>,<? echo $day['data']['2017-03-18']['price'];?>,<? echo $day['data']['2017-03-19']['price'];?>,<? echo $day['data']['2017-03-20']['price'];?>,<? echo $day['data']['2017-03-21']['price'];?>,<? echo $day['data']['2017-03-22']['price'];?>, <? echo $day['data']['2017-03-23']['price'];?>,<? echo $day['data']['2017-03-24']['price'];?>],
name: 'авиабилет'
        }]
    });
});     </script>

    </head>
    <body>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="highchart_container" style="width: 100%; max-width: 800px; margin: 0 auto"></div>
    </body>
</html>

Как сделать так чтоб даты в разделе "categories" и в разделе "series: [{ data: " выстраивались автоматически yyyy-mm-dd. На данный момент я их вручную ставлю)) Вы всегда помогаете, поэтому обращаюсь к вам. Вот сам ответ Апи если нужно

{"success": true, "data": {"2017-03-11":{"origin":"MOW","destination":"AER","price":12704,"transfers":2,"airline":"SU","flight_number":1196,"departure_at":"2017-03-11T23:50:00Z","return_at":"2017-03-21T22:55:00Z","expires_at":"2017-03-11T23:50:00Z"},"2017-03-12":{"origin":"MOW","destination":"AER","price":28429,"transfers":1,"airline":"TK","flight_number":414,"departure_at":"2018-02-23T13:35:00Z","return_at":"2018-02-26T05:00:00Z","expires_at":"2017-03-14T17:04:02Z"}}}

Заранее спасибо, с уважением.

Answer 1

Как-то так

...
categories:[
  <?php
   $dates = '';
   $i = 0;
   foreach ($day['data'] as $key => $value) {
     $dates .= ($dates == '' ? '':',') . '"' . $key . '"';
     $i++;
     if($i == 13) {
       break;
     }
   }
   print($dates);
  ?>
],
...
series: [{
    data: [
    <?php
     $prices = '';
     $j = 0;
     foreach ($day['data'] as $value) {
       $prices .= ($prices == '' ? '':',') . $value['price'] ;
       $j++;
       if($j == 13) {
      break;
       }
     }
     print($prices);
    ?>
    ],
    name: 'авиабилет'
}]
READ ALSO
библиотека jquery.sliderPro.min.js и angular

библиотека jquery.sliderPro.min.js и angular

Не получается адекватно спарить слайдер и angularКогда я средствами asp при помощи Response

291
Разбивка файла на блоки при помощью FileStream (.NET 3.5)

Разбивка файла на блоки при помощью FileStream (.NET 3.5)

Нигде не могу найти правильного подхода:

312