Построить график на основе данных из базы

178

27 февраля 2019, 13:10

Есть график,отлично строится, все работает.

new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: ['2018-10-01','2018-10-02','2018-10-03','2018-10-04','2018-10-05','2018-10-06','2018-10-07','2018-10-08','2018-10-09','2018-10-10','2018-10-11','2018-10-12','2018-10-13','2018-10-14','2018-10-15','2018-10-16','2018-10-17','2018-10-18','2018-10-19',],
    datasets: [{ 
        data: [181,221,222,209,266,649,725,434,249,232,176,271,418,354,189,154,202,187,222,],
        label: "Карпы",
        borderColor: "#3e95cd",
        fill: false
      },  
      { 
        data: [100,14,16,247],
        label: "Пескари",
        borderColor: "#333333",
        fill: false
      }
    ]
  }
});

Формирую данные на сервере

$X_date="";
            $Y_du="";
                while($row = $STH->fetch()) {  
                    $X_date.="'".$row['date']."',";
                    $Y_du.=$row['new_users_count'].",";
                    }   
                        echo $data ;
        echo json_encode(array('X_date'=>$X_date, 'Y_dau'=>$Y_dau));

Строю график на основе данных

$.ajax({
          type: "POST",
          dataType:'json',
          url: "serverscript/output.php",
          success: function(json) {
            console.log(json.X_date);
            new Chart(document.getElementById("line-chart"), {
                  type: 'line',
                  data: {
                    labels: [json.X_date],
                    datasets: [{ 
                        data: [json.Y_dau],
                        label: "Карпы",
                        borderColor: "#3e95cd",
                        fill: false
                      }
                    ]
                  }
                })
          },
          error: function() {
            console.log("ERROR", this);
          }
        });

Криво и не работает, вставляю в ручную данные из echo json_encode(array('X_date'=>$X_date, 'Y_du'=>$Y_du)); все работает,код выше нет. В первом куске кода данные как раз формата ,что выводятся на php я их просто вручную вставил для проверки и все работает

Понимаю,что косяк тут,но где именно не понимаю

               data: {
                        labels: [json.X_date],
                        datasets: [{ 
                            data: [json.Y_dau],
                            label: "Карпы",
                            borderColor: "#3e95cd",
                            fill: false
                          }

Вот так в консоли выглядит

console.log("X_date"+json.X_date);
    console.log("Y_dau"+json.Y_dau);
X_date'2018-10-01','2018-10-02','2018-10-03','2018-10-04','2018-10-05','2018-10-06','2018-10-07','2018-10-08','2018-10-09','2018-10-10','2018-10-11','2018-10-12','2018-10-13','2018-10-14','2018-10-15','2018-10-16','2018-10-17','2018-10-18','2018-10-19',
Y_dau181,221,222,209,266,649,725,434,249,232,176,271,418,354,189,154,202,187,222,

console.log("json.X_date", typeof json.X_date, json.X_date);
console.log("json.Y_du", typeof json.Y_dau, json.Y_dau);
json.X_date string '2018-10-01','2018-10-02','2018-10-03','2018-10-04','2018-10-05','2018-10-06','2018-10-07','2018-10-08','2018-10-09','2018-10-10','2018-10-11','2018-10-12','2018-10-13','2018-10-14','2018-10-15','2018-10-16','2018-10-17','2018-10-18','2018-10-19',
json.Y_du string 181,221,222,209,266,649,725,434,249,232,176,271,418,354,189,154,202,187,222,


    $X_date = array();      
                $Y_dau  = array();              
                    while($row = $STH->fetch()) {  
                        array_push($X_date, $row['date']);
                        array_push($Y_dau, $row['new_users_count']);
                        }   
json.X_date object ["2018-10-01", "2018-10-02", "2018-10-03", "2018-10-04", "2018-10-05", "2018-10-06", "2018-10-07", "2018-10-08", "2018-10-09", "2018-10-10", "2018-10-11", "2018-10-12", "2018-10-13", "2018-10-14", "2018-10-15", "2018-10-16", "2018-10-17", "2018-10-18", "2018-10-19"]
json.Y_du object ["181", "221", "222", "209", "266", "649", "725", "434", "249", "232", "176", "271", "418", "354", "189", "154", "202", "187", "222"]

Answer 1

Потому что Ваши серверные переменные $X_date и $Y_du - не массивы, а конкатенированные строки.

console.log("json.X_date", typeof json.X_date, json.X_date);
console.log("json.Y_dau", typeof json.Y_dau, json.Y_dau);

Что в консоли?

Теперь Вы видите, что обе переменные не массивы, а строки?

Еще мы с Павлом Игоревичем заметили:

в одном месте -

'Y_du'=>$Y_du

в другом -

data: [json.Y_dau],

Y_du или Y_dau?

Если Вы не хотите чинить серверный код (как написано в начале ответа), то можете сделать так:

              data: {
                labels: JSON.parse("["+json.X_date+"]"),
                datasets: [{ 
                    data: JSON.parse("["+json.Y_dau+"]"),
                    label: "Карпы",
                    borderColor: "#3e95cd",
                    fill: false
                  }
                ]
              }