Chart вывод графика

@Radioaktiv · Регистрация: 09.10.2015

Студворк — интернет-сервис помощи студентам

Формирую вывод графика

PHP
1
2
3
4
5
6
7
8
9
10
11
$sql = $modx->query("SELECT SUM(mp.cost) as cost, MONTH(mo.createdon) as m FROM `modx_ms2_orders` mo
                                left join `modx_ms2_order_products` mp on mp.order_id = mo.id and mp.product_id=".$_POST['pid']."
                                WHERE DATE_FORMAT(`createdon`, '%Y') = ".$_POST['pyear']." GROUP by MONTH(mo.createdon)");
       $orders = $sql->fetchAll(PDO::FETCH_ASSOC);
            foreach($orders as $order){
                array_push($months,$_monthsList[$order['m']]);
                array_push($data,$order['cost']);
            }
            $arrDatasets = array('label' => 'Продано','borderColor' => "#000", 'backgroundColor' => "transparent", 'pointBorderColor' => "#000", 'pointBackgroundColor' => "#000", 'pointRadius' => "5", 'pointHoverRadius' => "10",'data'=>$data);
            $arrReturn = array(array('labels' => $months, 'datasets' => $arrDatasets));
            print (json_encode($arrReturn, JSON_UNESCAPED_UNICODE));

и пытаюсь вывести график

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function statOne(pid,pyear){
        $.post("assets/ajax.php", { action:"statone", pid,pyear})
        .done(function(data) {
           if(data){
                lineChartData = JSON.parse(data);
                var ctx = document.getElementById('myChart').getContext('2d');
                var myLineChart = new Chart(ctx, {
                    type: 'line',
                    data: lineChartData
                });
                window.myLineChart;
                
           }else $('body').append('<ul class="alert-data error">Произошла ошибка. Повторите попытку или обратитесь в службу поддержки!</ul>');
           
           setTimeout(function () {
                $('.alert-data').remove();
            }, 8000)
        });
    }

но выводит пустой график как на фото

@tarasalk · 21.02.2019, 17:37

В консоле браузера смотрите. Какие ошибки, какие данные вернул запрос.

@Radioaktiv · 21.02.2019, 17:56 **[ТС]**

в консоле ничего не выдает, если я уберу parse, то такая

JavaScript
1
2
3
4
Uncaught TypeError: Cannot create property 'datasets' on string '[{"labels":["Январь","Февраль"],"datasets":{"label":"Продано","borderColor":"#000","backgroundColor":"transparent","pointBorderColor":"#000","pointBackgroundColor":"#000","pointRadius":"5","pointHoverRadius":"10","data":["7750.00","15345.00"]}}]'
    at t.construct (libs.min.js:1)
    at new t (libs.min.js:1)
    at Object.<anonymous> (common.js:439)

вот на эту ругается

JavaScript
1
2
3
4
var myLineChart = new Chart(ctx, {
                    type: 'line',
                    data: lineChartData
                });

@tarasalk · 21.02.2019, 21:17

Сообщение от Radioaktiv

в консоле ничего не выдает, если я уберу parse, то такая

Ну так конечно делать не надо.
Видимо вы неверные данные передаете в виджет.
Я не знаю какой формат там ожидает этот Chart, но первая и последняя квадратная скобка мне кажется лишними.

@Radioaktiv · 22.02.2019, 10:37 **[ТС]**

График вывожу вот так пытаюсь подставить такие же данные, но ничего

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            options: {
                legend: {
                  display: false
                },
                scales: {
                  xAxes: [{
                    gridLines: {
                      display: false
                    }
                  }],
                  yAxes: [{
                    gridLines: {
                      display: false
                    }
                  }]
                },
                tooltips: {
                  mode: false,
                  callbacks: {
                    title: function() {},
                    label: function() {}
                  }
                }
              },
            type: 'line',
              data: {
                labels: ["янв.", "фев.", "март", "апр.", "май", "июнь", "июль", "авг.", "сент.", "окт.","нояб.","дек."],
                datasets: [{
                label: 'Продано',
                data: [400, 50, 100, 200, 230, 300, 120, 500, 600, 700, 800, 900],
                borderColor: '#000',
                backgroundColor: 'transparent',
                pointBorderColor: '#000',
                pointBackgroundColor: '#000',
                pointRadius: 5,
                pointHoverRadius: 10,
                }]
              }
        });

@tarasalk · 22.02.2019, 10:58

Я вставил ваш код на js.do и все заработало.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
 var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            options: {
                legend: {
                  display: false
                },
                scales: {
                  xAxes: [{
                    gridLines: {
                      display: false
                    }
                  }],
                  yAxes: [{
                    gridLines: {
                      display: false
                    }
                  }]
                },
                tooltips: {
                  mode: false,
                  callbacks: {
                    title: function() {},
                    label: function() {}
                  }
                }
              },
            type: 'line',
              data: {
                labels: ["янв.", "фев.", "март", "апр.", "май", "июнь", "июль", "авг.", "сент.", "окт.","нояб.","дек."],
                datasets: [{
                label: 'Продано',
                data: [400, 50, 100, 200, 230, 300, 120, 500, 600, 700, 800, 900],
                borderColor: '#000',
                backgroundColor: 'transparent',
                pointBorderColor: '#000',
                pointBackgroundColor: '#000',
                pointRadius: 5,
                pointHoverRadius: 10,
                }]
              }
        });
</script>

@Radioaktiv · 22.02.2019, 11:12 **[ТС]**

последний код, это просто вывод на страницу, а после ajax

если делаю так, то работает

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var ctx = document.getElementById('myChart').getContext('2d');
                var myLineChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ["янв.", "фев.", "март", "апр.", "май", "июнь", "июль", "авг.", "сент.", "окт.","нояб.","дек."],
                        datasets: [{
                        label: 'Продано',
                        data: [400, 50, 100, 200, 230, 300, 120, 500, 600, 700, 800, 900],
                        borderColor: '#000',
                        backgroundColor: 'transparent',
                        pointBorderColor: '#000',
                        pointBackgroundColor: '#000',
                        pointRadius: 5,
                        pointHoverRadius: 10,
                        }]
                      }
                });
                myLineChart.update;

если подставляю lineChartData = JSON.parse(data); то не работает

хотя json вот так формирую

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 $_monthsList = array(
                            "1"=>"Январь","2"=>"Февраль","3"=>"Март",
                            "4"=>"Апрель","5"=>"Май", "6"=>"Июнь",
                            "7"=>"Июль","8"=>"Август","9"=>"Сентябрь",
                            "10"=>"Октябрь","11"=>"Ноябрь","12"=>"Декабрь");
        $months = array();
        $data = array();
        if (!empty($_POST['pid']) && !empty($_POST['pyear'])){
            $sql = $modx->query("SELECT SUM(mp.cost) as cost, MONTH(mo.createdon) as m FROM `modx_ms2_orders` mo
                                left join `modx_ms2_order_products` mp on mp.order_id = mo.id and mp.product_id=".$_POST['pid']."
                                WHERE DATE_FORMAT(`createdon`, '%Y') = ".$_POST['pyear']." GROUP by MONTH(mo.createdon)");
            $orders = $sql->fetchAll(PDO::FETCH_ASSOC);
            foreach($orders as $order){
                array_push($months,$_monthsList[$order['m']]);
                array_push($data,$order['cost']);
            }
            $arrDatasets = array(
                'label' => "Продано",
                'borderColor' => "#000",
                'backgroundColor' => "transparent", 
                'pointBorderColor' => "#000", 
                'pointBackgroundColor' => "#000",
                'pointRadius' => "5", 
                'pointHoverRadius' => "10",
                'data'=>$data
          );
            $arrReturn = array(array('labels' => $months, 'datasets' => $arrDatasets));
            print (json_encode($arrReturn, JSON_UNESCAPED_UNICODE));

Добавлено через 5 минут
решил, вот здесь был косяк, не хватало скобок квадратных

PHP
1
$arrReturn = array('labels' => $months, 'datasets' => [$arrDatasets]);

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@tarasalk 1992 / 1216 / 440 Регистрация: 13.06.2013 Сообщений: 4,115
	21.02.2019, 17:37
	В консоле браузера смотрите. Какие ошибки, какие данные вернул запрос. 0

Chart вывод графика

Решение