Как изменить кодировку json в строку массива

Question

У меня есть задача решить, как изменить кодировку JSON в строку массива, посмотрите мой код ниже: У меня есть

["11:00"]["09:00"]["01:00"]["12:00"]["11:00"]["10:00"]["01:00"]["00:00"]["23:00"]["22:00"]

как изменить его, чтобы он стал

["11:00","09:00","01:00","11:00","10:00","01:00","00:00","23:00","22:00"]

Мой stats.php выглядит так:

out .=  '         <div class="col-lg-5 col-md-5 col-sm-5 col-lg-offset-1 col-md-offset-1 col-sm-offset-1" style="height: 300px">';
        $out .=  '          <div class="chartjs-size-monitor">';
        $out .=  '              <div class="chartjs-size-monitor-expand">';
        $out .=  '                  <div class=""></div>';
        $out .=  '              </div>';
        $out .=  '              <div class="chartjs-size-monitor-shrink">';
        $out .=  '                  <div class=""></div>';
        $out .=  '              </div>';
        $out .=  '         </div>';
        $out .=  '         <canvas id="myChart2" class="canpas chartjs-render-monitor" style="display: block; width: 454px; height: 300px;" width="454" height="300"></canvas>';
        $out .=  '        </div>';

$graph_query = mssql_query("SELECT TOP 100 Convert(nvarchar,dtDate,108) AS Date, serial, nAverageUser, nMaxUser FROM tbl_ServerUser_Log ORDER BY serial DESC");

            $i = 1;
            while ($graph = mssql_fetch_array($graph_query)) {
                $graph['nMaxUser'] = round($graph['nMaxUser'] * $percent_inc);
                $graph['nAverageUser'] = round($graph['nAverageUser'] * $percent_inc);
                $serie1->addPoint(new Point($graph['Date'], $graph['nMaxUser']));
                $serie2->addPoint(new Point($graph['Date'], $graph['nAverageUser']));
                $date = date('H:i', strtotime($graph['Date']));
                $convert = json_encode(str_split($date, 5));
                // $convert = str_replace('][','',$convert);

                echo $convert;

            }

Я хочу показать диаграмму и отправить значение в HTML. HTML будет выглядеть так:

<script type="text/javascript">
    var ctx = document.getElementById('myChart2').getContext('2d');
    var myChart2 = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'], //Jamnya
            datasets: [{
                backgroundColor: 'rgba(232,72,163,0.2)',
                borderColor: '#e848a3',
                label: '29 May 2020',
                data: [807,657,600,578,565,576,611,855,625,573,571,584,607,647,771,943,920,647,622,608,722,832,902,1062],
                fill: true,
                pointRadius: 5,
                pointHoverRadius: 10,
                showLine: true
            }]
        }, options: {
            responsive: true,
            maintainAspectRatio: false,
            title: {
                display: true,
                text: 'Total Online Yesterday',
                position: 'top',
                fontSize: 15,
                fontStyle: 'bold'
            },
            legend: {
                display: false
            },
            elements: {
                point: {
                    pointStyle: 'circle'
                }
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'TIME'
                    },
                    ticks: {
                        major: {
                            fontStyle: 'bold',
                            fontColor: '#FF0000'
                        }
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'TOTAL ONLINE'
                    }
                }]
            },
            tooltips:{
                callbacks: {
                    title: function(tooltipItem, data) {
                      return '29 May 2020 '+data['labels'][tooltipItem[0]['index']];
                    },
                    label: function(tooltipItem, data) {
                      return 'TOTAL : '+data['datasets'][0]['data'][tooltipItem['index']]+'';
                    },
                },
                titleFontSize: 15,
                bodyFontSize: 15,
                displayColors: false
            }
        }
    });
</script>

Я просто хочу показать свою диаграмму от ручного значения до значения запроса, которое я улавливаю с сервера SQL.

Заранее спасибо за ответ на мой вопрос.

Answer 1

Не повторять JSON каждый раз через l oop. Поместите время в один массив и повторите JSON в конце.

$dates = [];
while ($graph = mssql_fetch_array($graph_query)) {
    $graph['nMaxUser'] = round($graph['nMaxUser'] * $percent_inc);
    $graph['nAverageUser'] = round($graph['nAverageUser'] * $percent_inc);
    $serie1->addPoint(new Point($graph['Date'], $graph['nMaxUser']));
    $serie2->addPoint(new Point($graph['Date'], $graph['nAverageUser']));
    $date = date('H:i', strtotime($graph['Date']));
    $dates[] = $date;
    echo $convert;
}
echo json_encode($dates);