Bar Chart.js не отображает значения с PHP, MySQL, AJAX

Я использую плагин Chart.js для создания гистограммы со значениями продаж и покупок по годам. Эти значения хранятся в базе данных mysql, и я привожу их через PHP / AJAX.

HTML

<canvas id = "mybarChart"></canvas>

PHP

$sql = "SELECT YEAR(date) as years, SUM(amount) AS total FROM purchases GROUP BY YEAR(date)";
$res = mysql_query($sql);
$totalpurchases = [];

$sqll = "SELECT YEAR(date) as years, SUM(amount) AS total FROM sales GROUP BY YEAR(date)";
$ress = mysql_query($sqll);
$totalsales = [];

while($row = mysql_fetch_array($res)){
    $totalpurchases[] = [$row['total']];
}

while($roww = mysql_fetch_array($ress)){
    $totalsales[] = [$roww['total']];
}

echo json_encode(array($totalpurchases,$totalsales));

И я сделал свой код JS следующим образом:

function show_chartbar(lbl01,lbl02){
    var ctx = document.getElementById("mybarChart");
    var mybarChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["2013", "2014", "2015", "2016", "2017"],
            datasets: [{
            label: '# Total Purchase',
            backgroundColor: "#26B99A",
            data: lbl01
            }, {
            label: '# Total Sales',
            backgroundColor: "#03586A",
            data: lbl02
            }]
        },

        options: {
            scales: {
               yAxes: [{
                ticks: {
                    beginAtZero: true
                     }
                }]
            }
        }
    });
}

if ($('#mybarChart').length ){    

    $.ajax({
        url: "scripts/values.php",
        type: "GET",                    
        dataType: "json",               
        success: function(resp)
        {
            var totpurchases = resp[0];
            var totsales = resp[1];
            console.info("Total Purchases: "+totpurchases);
            console.info("Total Sales: "+totsales);
            show_chartbar(totpurchases,totsales);
        }
    });

}

В консоли он показывает значения правильно, но не отображается на диаграмме:

Bar Chart.js не отображает значения с PHP, MySQL, AJAX

Я попытался добавить дополнительные скобки в параметр данных, но он показывает то же самое.

ОБНОВИТЬ

console.dir(resp);

Bar Chart.js не отображает значения с PHP, MySQL, AJAX

Как я могу это исправить? Мне нужна помощь.

Я бы предположил, что ваши данные ищут массив, а вы возвращаете объект из json_encode, поскольку массивы работают с парами значений ключа. Можете ли вы использовать console.dir(resp) в своей функции успеха ajax и показать нам результаты. Спасибо.

mattdevio 02.04.2018 20:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
605
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы создаете массив массивов. Я считаю, что это решит эту проблему.

while($row = mysql_fetch_array($res)){
    $totalpurchases[] = $row['total'];
}

while($roww = mysql_fetch_array($ress)){
    $totalsales[] = $roww['total'];
}

Другие вопросы по теме