Как построить график, используя библиотеку Chart.js?

Question

[agroshel]

Хочу построить график индекса RGBITR, используя библиотеку Chart.js.
Делаю запросы на Мосбиржу, в консоли вижу значения для построения графика. Подставляю их в labels и data, но график не строится.
Подскажите, как правильно сделать?

Сам я насочинял так:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
<canvas id="myChart"></canvas>

<script>

var labelsOld, labelsNew, dataOld, dataNew, xhr, xhr1;    

// Создаём Get запрос TRADEDATE
xhr = new XMLHttpRequest();
xhr.open('GET', 'https://iss.moex.com//iss/history/engines/stock/markets/index/securities/RGBITR.json?sort_order=desc&iss.meta=off&iss.only=history&history.columns=TRADEDATE');
xhr.responseType = 'json'; // указать ожидаемый тип ответа
xhr.send(); // посылаем запрос
// Слушать события на xhr, чтобы получить ответ.
xhr.onload = function() {
labelsOld = xhr.response; // labelsOld это объект
labelsNew = labelsOld.history.data, labelsNew.length = 5; // labels это массив
console.log(labelsNew); // вывести в консоль
}; 
// Создаём Get запрос CLOSE
xhr1 = new XMLHttpRequest();
xhr1.open('GET', 'https://iss.moex.com//iss/history/engines/stock/markets/index/securities/RGBITR.json?sort_order=desc&iss.meta=off&iss.only=history&history.columns=CLOSE');
xhr1.responseType = 'json'; // указать ожидаемый тип ответа
xhr1.send();
// Слушать события на xhr, чтобы получить ответ.
xhr1.onload = function() {
dataOld = xhr1.response;
dataNew = dataOld.history.data,  dataNew.length = 5; // labels это массив
console.log(dataNew); // вывести в консоль
}; 
// график
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: { 
    labels: labelsNew, //  название данных по оси Х
    datasets: [{
        label: 'RGBITR', //  Характеристика данных.
        data: dataNew,// Данные по оси У ( массив чисел, который должен иметь такое же количество значений, как и количество столбиков
        backgroundColor:  'rgba(255, 99, 132, 0.2)', // Цвет фона 
        borderColor:  'rgba(255, 99, 132, 1)', // Цвет границ
   }]  
},
});
</script>
</html>

Comments

[Дмитрий Кузнецов]

но график не строится

Что значит не строится? Какие-то ошибки в консоли?

[agroshel]

Дмитрий Кузнецов, Ошибок в консоли нет. "Не видит" мои данные.

[Вадим]

agroshel, в песочницу

[agroshel]

Вадим, Извините, я не знаю, что такое песочница. Мне оформить свой вопрос в виде статьи?

[Вадим]

agroshel,
Правила сервиса:

3.8. Использовать для демонстрации фрагментов кода только специальный тег <code> или специальные демонстрационные ресурсы (например, JsFiddle - https://jsfiddle.net/). Размещение фрагментов кода в виде изображений запрещено.

Вы не нарушили правил, однако, когда вопрос из разряда "Я сделал, но почему то не работает" или "У меня при *какое-то действие* возникает ошибка, помогите" - то удобнее и быстрее решать вопрос, когда код перенесён в так называемую песочницу - собственно, то место, где не весь проект воспроизведён, а лишь тот кусочек, с которым Вам нужна помощь.
Там не только можно прочитать предоставленный Вами код, но и потыкать его, провести отладку и так далее.

[agroshel]

Вадим, Всё понятно, мне как раз дали ответ в JsFiddle.

Answer 1

[0xD34F]

Предлагаю погуглить, что такое асинхронность.

Сейчас у вас так: запросили данные, построили график, получили данные.

А надо так: запросили данные, получили данные, построили график.

const baseURL = 'https://iss.moex.com//iss/history/engines/stock/markets/index/securities/RGBITR.json';

const params = new URLSearchParams([
  [ 'sort_order', 'desc' ],
  [ 'iss.meta', 'off' ],
  [ 'iss.only', 'history' ],
  [ 'history.columns', 'TRADEDATE,CLOSE' ],
]);

fetch(`${baseURL}?${params}`)
  .then(r => r.json())
  .then(r => {
    new Chart(document.querySelector('#chart'), {
      type: 'line',
      data: { 
        labels: r.history.data.map(n => n[0]),
        datasets: [ {
          label: 'hello, world!!',
          data: r.history.data.map(n => n[1]),
        } ],
      },
    });
  });

https://jsfiddle.net/1vp2a8x0/

Или, можно дополнить вашу схему ещё одним пунктом - обновление графика.

fetch(`${baseURL}?${params}`)
  .then(r => r.json())
  .then(({ history: { data } }) => {
    chart.data.labels = data.map(n => n[0]);
    chart.data.datasets[0].data = data.map(n => n[1]);
    chart.update();
  });

const chart = new Chart(document.querySelector('#chart'), {
  type: 'line',
  data: { 
    labels: [],
    datasets: [ {
      label: 'hello, world!!',
      data: [],
    } ],
  },
});

Comments

[agroshel]

Благодарю, буду разбираться.

[agroshel]

Добавил ещё reverse() , чтобы даты шли как везде слева направо.