@SteepNET

Цикл в JavaScript как правильно реализовать Chart.js?

На Битриксе хочу реализовать вывод графиков через Chart.js
Записываю в БД данные ,затем достаю их и хотел бы строить график.
Не хватает знаний в js, прошу помощи.

Получение из базы данных
$result = $connection->query('SELECT OLD_PRICE,NEW_PRICE,DATE_OLD_PRICE,DATE_NEW_PRICE FROM b_aa_price_metric WHERE ELEMENT_ID = '.$arResult["ID"].'');
            while($ar=$result->fetch())
            {
                $GLOBALS['DATE_OLD_PRICE'] = $ar['DATE_OLD_PRICE'];
                $GLOBALS['DATE_NEW_PRICE'] = $ar['DATE_NEW_PRICE'];
                $GLOBALS['OLD_PRICE'] = $ar['OLD_PRICE'];
                $GLOBALS['NEW_PRICE'] = $ar['NEW_PRICE'];
            }


На выходе получаю если в БД две записи о ценах и датах
Старая цена: 93.00
Новая цена: 92.00
Старая дата: 02.03.2020 23:26:08
Новая дата: 02.03.2020 23:27:23
Старая цена: 92.00
Новая цена: 95.25
Старая дата: 02.03.2020 23:27:23
Новая дата: 02.03.2020 23:58:04


Далее уже нужно построить графики
<script>
    var DATE_OLD_PRICE = '<? echo $GLOBALS['DATE_OLD_PRICE'];?>';
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [DATE_OLD_PRICE, 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: 'Цена',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>


Где в labels: должны быть все даты из БД ($GLOBALS['DATE_NEW_PRICE'] )
А в data: Все цены из БД ( $GLOBALS['NEW_PRICE'] )
  • Вопрос задан
  • 330 просмотров
Решения вопроса 1
@Evanescing
В первую очередь использование глобальных переменных в битрикс очень часто говорит о некорректной структуре. Передачу данных между разными страницами лучше оганизовывать запросами. Если выборка и построение графика находятся на одной странице, то можно использовать обычные переменные.
Чтобы в массиве накапливались элементы, необходимо к переменной массива добавлять квадратные скобки [] $GLOBALS['DATE_NEW_PRICE'][]
www.php.su/articles/?cat=vars&page=014
Дополнительно, необходимо сконвертировать массив php в скриптовый, метод битрикс:
var arr = <?=CUtil::PhpToJSObject($array, false, true)?>;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы