Как создать график, принимающий данные из таблицы?

Question

[Елена Соколова]

Надо создать график такого типа: https://codepen.io/adrianparr/pen/GZebqK
, но так, чтобы он показывал данные из таблицы. На codeopen много решений, но ни одного с таблицей. И на чем лучше это сделать?

Сайт создан на чистом HTML+CSS+ php форма обратной связи. Есть какие-то готовые решения для такого графика? В таблице должен отображаться рост количества заявок, то есть по оси y - заявки, по оси x - месяцы.

Comments

[Сергей Соколов]

Что за таблицу имеете в виду: пользователь заполняет прямо на странице данные в табличке, или загружает файл?

[Елена Соколова]

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

[Сергей Соколов]

Елена Соколова, пример данных не помешал бы.

Answer 1

[Сергей Соколов]

Графики → d3js

Потребуется знать основы JS и SVG.

Данные удобнее вставлять в формате JSON: прямо в тело веб-страницы (костыль) или запрашивать ajax-запросом с сервера. Из полученных данных уже и рисовать график и рендерить таблицу.

Примеры.

• отрисовка таблицы из данных с помощью D3js
  
• отрисовка простого линейного графика с помощью D3js