Как перенести данные в диаграммы

Сегодня мы займемся визуализацией данных при помощи JavaScript. Для захвата и добавления данных нам потребуется Chart.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

Источник 1: таблица данных HTML

Добавьте JavaScript, и данные HTML-таблицы можно будет представить при помощи диаграммы. Взгляните на таблицу, приведенную ниже:

Год Продано(шт.) Оборот($) Доход($)
2016 10 200 89
2017 25 550 225
2018 55 1200 600
2019 120 2450 1100

В ней отображается информация о продажах. Но если представить данные в виде графика, то получим наглядную картину.

Для начала разберемся с функцией для диаграммы из библиотеки Chart.js. Ссылка на документацию, если вдруг что-то окажется непонятным. Ключевые моменты кода снабжены комментариями.

function BuildChart(labels, values, chartTitle) { var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: labels, // Наши метки datasets: [{ label: chartTitle, // Название рядов data: values, // Значения 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: {      responsive: true, // Даем Chart.js указание реагировать правильно.      maintainAspectRatio: false, // Добавляем эту строку, чтобы избежать переключения на полноразмерный вид(высоту/ширину)     }  });  return myChart;}

Сейчас, когда мы определились с функцией для создания диаграммы из табличных значений, переведем таблицу в HTML-код. Также добавим элемент canvas, который потребуется Chart.js для построения диаграмм. Это те же данные, что и в таблице, приведенной выше.

<table class="table" id="dataTable">  <thead>    <th>Год</th>    <th>Продано(шт)</th>    <th>Оборот($)</th>    <th>Прибыль($)</th>  </thead>  <tbody>    <tr>      <td>2016</td>      <td>10</td>      <td>200</td>      <td>89</td>    </tr>    <tr>      <td>2017</td>      <td>25</td>      <td>550</td>      <td>225</td>    </tr>    <tr>      <td>2018</td>      <td>55</td>      <td>1200</td>      <td>600</td>    </tr>    <tr>      <td>2019</td>      <td>120</td>      <td>2450</td>      <td>1100</td>    </tr>  </tbody></table><div class="chart">  <canvas id="myChart"></canvas></div>

Далее необходимо преобразовать данные таблицы в формат JSON при помощи Vanilla JS. Библиотека Chart.js использует следующую структуру для заполнения графиков и диаграмм.

var table = document.getElementById('dataTable');var json = []]; // Первая строка – это заголовки var headers =[];for(var i = 0; i < table.rows[0].cells.length; i++) {  headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');}// Перебор ячеек for(var i = 1; i < table.rows.length; i++) {  var tableRow = table.rows[i];  var rowData = {};  for(var j = 0; j < tableRow.cells.length; j++) {    rowData[headers[j]] = tableRow.cells[j].innerHTML;  }  json.push(rowData);}console.log(json);

Последнюю строку мы добавили для вывода результата в консоли DevTools. Вот, что выводится в логах консоли:

Как перенести данные в диаграммы

Заголовки таблицы стали переменными и сейчас выводятся в ячейках таблицы. Сейчас осталось поместить метки годов(year) и проданных товаров(items sold) в массив. Он нужен Chart.js для хранения объектов данных и передачи данных в возможность диаграммы.

Этот скрипт добавляет JSON-значения в массив с годами. Его можно без проблем прописать сразу же после предыдущей возможности.

// Добавляем JSON-значения в массив метокvar labels = json.map(function(e) {  return e.year;});console.log(labels); // ["2016", "2017", "2018", "2019"]// Добавляем JSON-значения в массив значенийvar values = json.map(function(e) {  return e.itemssold;});console.log(values); // ["10", "25", "55", "120"]

Вызываем возможность BuildChart из первого фрагмента кода(включая название диаграммы). Получается красивая визуализация данных из HTML-таблицы.

var chart = BuildChart(labels, values, "Продажи товаров за период");

Данные для диаграммы переданы JavaScript и представлены в графическом виде.

Источник 2: API в режиме реального времени

Рассмотрим, как воспользоваться данными, обновляемыми в режиме реального времени, для заполнения диаграммы с использованием API. Я воспользуюсь Forbes 400 Rich List API и выведу ТОП-10 самых богатых людей на планете при помощи диаграммы.

Из API мы будем запрашивать данные для создания диаграммы с именами и актуальным доходом. Для начала необходимо заново определить возможность chart.

function BuildChart(labels, values, chartTitle) {  var data = {    labels: labels,    datasets: [{      label: chartTitle, // Названия рядов data: values,      backgroundColor: ['rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',      ],    }],  };  var ctx = document.getElementById("myChart").getContext('2d');  var myChart = new Chart(ctx, {    type: 'horizontalBar',    data: data,    options: {      responsive: true, // Даем Chart.JS указание реагировать правильно.      maintainAspectRatio: false, // Добавляем эту строку, чтобы избежать стандартного переключения на полноразмерный вид(высоту/ширину)       scales: {        xAxes: [{          scaleLabel: {            display: true,            labelString: '$ Billion'          }        }],        yAxes: [{          scaleLabel: {            display: true,            labelString: 'Name'          }        }]      },    }  });  return myChart;}

Далее нам потребуется тот же HTML-элемент canvas для области, в которой будет выводиться диаграмма:

<div class="chart" style="position: relative; height:80vh; width:100vw">  <canvas id="myChart"></canvas></div>

Сейчас выполним захват данных в режиме реального времени. Посмотрим, что возвращается в консоль после вызова Forbes API:

Как перенести данные в диаграммы

При помощи несложного JavaScript-кода можно запрашивать данные из API, преобразовать нужные значения. А также передавать информацию для представления в диаграмме.

var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {  if(this.readyState == 4 && this.status == 200) {    var json = JSON.parse(this.response);    // Добавление JSON-меток(labels) в массив значений var labels = json.map(function(e) {      return e.name;    });    // Добавление JSON-значений(values) в массив значений var values = json.map(function(e) {      return(e.realTimeWorth / 1000); // Разделяем миллиардное состояние на значения, кратные десяти    });    BuildChart(labels, values, "Актуальные данные по состоянию знаменитостей в режиме реального времени"); // Передаем данные и вызываем chart  }};xhttp.open("GET", "https://forbes400.herokuapp.com/api/forbes400?limit=10", false);xhttp.send();

Результат

Источник 3: Google-таблица

Но что, если есть готовая Google-таблица с нужными данными? С ее помощью тоже можно легко создать диаграмму!

Основные требования к Google-таблице:

  • Она должна быть опубликована.
  • Должна быть публично доступной(не должно быть ограничений на просмотр).

При соблюдении данных условий можно обратиться к Google-таблице в формате JSON и графически представить содержащиеся в ней данные.

Вот Google-таблица с абстрактными данными. Я опубликовал ее в открытом доступе. В таблице содержится три поля ввода: MachineId(ID машины), Date(дата) и ProductsProduced(произведено изделий).

Сейчас посмотрим на URL-адрес таблицы. Нам нужна его часть после последнего слэша(«/»).

https://docs.google.com/spreadsheets/d/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg

Это идентификатор таблицы. Он понадобится для GET запроса, который отправляется в Google. Для его создания мы берем идентификатор из адреса таблицы и добавляем в другой URL.

https://spreadsheets.google.com/feeds/list/[ID GOES HERE]/od6/public/full?alt=json

Сейчас URL выглядит так.

https://spreadsheets.google.com/feeds/list/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg/od6/public/full?alt=json

А вот ответ, который мы получаем из консоли.

Как перенести данные в диаграммы

Самое важное здесь – массив объектов feed.entry. Он включает ключевую информацию из таблицы:

Как перенести данные в диаграммы

Обратите внимание на элементы, выделенные красным цветом. API Google-таблиц добавляет перед каждым названием столбцов gsx$(например, gsx$date). Именно так мы и будем вытаскивать данные из объектов – при помощи уникальных сгенерированных имен. Сейчас пора добавить данные в массивы и передать их в возможность chart.

function BuildChart(labels, values, chartTitle) {  var data = {    labels: labels,    datasets: [{      label: chartTitle, // Названия рядов data: values,      backgroundColor: ['rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',        'rgb(54, 162, 235)',      ],    }],  };  var ctx = document.getElementById("myChart").getContext('2d');  var myChart = new Chart(ctx, {    type: 'bar',    data: data,    options: {      responsive: true, // Даем Chart.JS указание реагировать правильно.      maintainAspectRatio: false, // Добавляем эту строку, чтобы избежать стандартного переключения на полноразмерный вид (высоту/ширину)        scales: {        xAxes: [{          scaleLabel: {            display: true,            labelString: 'Date'          }        }],        yAxes: [{          scaleLabel: {            display: true,            labelString: 'Produced Count'          }        }]      },    }  });  return myChart;}

Далее идет элемент canvas:

<div class="chart" style="position: relative; height:80vh; width:100vw">  <canvas id="myChart"></canvas></div>

Далее – GET запрос, отображающий массивы labels и values. После чего выводим диаграмму, передавая в нее данные.

var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {  if (this.readyState == 4 && this.status == 200) {    var json = JSON.parse(this.response);    console.log(json);  // Вывод JSON-меток в массиве значений var labels = json.feed.entry.map(function (e) {    return e.gsx$date.$t;  });        // Вывод JSON-значений в массиве значений var values = json.feed.entry.map(function (e) {    return e.gsx$productsproduced.$t;  });  BuildChart(labels, values, "Данные по производству");  }};xhttp.open("GET", "https://spreadsheets.google.com/feeds/list/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg/od6/public/full?alt=json", false);xhttp.send();

Результат

Что можно легко делать с данными?

В данной статье мы познакомили вас не со всеми возможными методами выведения данных в графиках и диаграммах. Вот пару ресурсов, которые пригодятся вам для этого:

Библиотеки для создания диаграмм:

  • Chart.js ;
  • NVD3 (для D3.js );
  • amCharts ;
  • CanvasJS .

Платформы для хранения данных:

  • Airtable ;
  • Notion ;
  • Trello .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *