Как сделать столбчатый график/диаграмму онлайн.

Как "сделать столбчатую диаграмму онлайн"? Столбчатая диаграмма, она же столбчатый график - будем строить онлайн! Вы сможете посмотреть реальный пример столбчатой диаграмм/графика на моём сайте! С примерами и объяснениями! Погнали!

Пошаговое создание столбчатой диаграммы/графика онлайн!

1. Создадим столбчатую диаграмму/график онлайн!
2. Редактирование столбчатой диаграммы/графика онлайн.
3. Добавление столбца в столбчатую диаграмму/график онлайн.
4. Удаление столбца в столбчатую диаграмму/график онлайн.
5. Добавление строки в столбчатую диаграмму/график онлайн.
6. Удаление строки в столбчатую диаграмму/график онлайн.
7. Как встроить ваш график на сайт?

Создадим столбчатую диаграмму/график онлайн!

Прежде чем переходить к первому шагу... давайте посмотрим, что же вы собираетесь строить!

А именно "пример столбчатой диаграммы" см. здесь


Пошаговое создание столбчатой диаграммы/графика:

Придется зарегистрироваться:

https://dwweb.ru/registration.html

После регистрации проходим на страницу создания "столбчатой диаграммы/графика":

https://dwweb.ru/chart/add_chart.html

Заполняем обязательные поля:

№1, №3, №4

Поля для заполнения в столбчатой диаграмме/графике:

Поле №1(обязательно) - заголовок, пишем на кириллице, например :

Популярность браузеров по годам.

Заголовок будет отображаться на странице + присутствовать(после транслита) в адресе страницы:

https://dwweb.ru/aminev_marat/chart/populyarnost_brauzerov_po_godam.html

Поле №2(не обязательно и не для всех типов) - подзаголовок, пишем на кириллице, например :

Статистика популярных браузеров с 2013 года до 2023

Отображается на странице

Поле №3(обязательно) - "Тип доступа" - кому будет доступна страница с диаграммой.

Поле №4(обязательно) - "Тип диаграммы/графика" - отвечает за начертание "диаграммы".

Поле №5(не обязательно) - "Источник", любой произвольный текст:

Личный опыт...

Поле №6(не обязательно) - "адрес источника", например, адрес на страницу с данными :

https://dwweb.ru/samyiy_populyarnyiy_brauzer.html

После заполнения всех полей, нажимаем кнопку "сохранить".

Если столбчатая диаграмма/график благополучно создан, то вам перместят на страницу грациа, и ваша даигармма быдет выглядщеть по умолчанию вот так:

Пример графика.

Редактирование столбчатой диаграммы/графика онлайн.

После того, как вы попали на страницу графика, справа вверху есть три полоски - нажимаем.

Выбираем редактировать.

Нажмите, чтобы открыть в новом окне.



Далее попадаем на страницу для редактирования столбчатой диаграммы/графика онлайн.

Здесь ... собственно, что объяснять... все те поля которые вы заполняли ранее здесь они могут быть отредактированы кроме заголовка!

После внесения изменений нажимаем сохранить!



Добавление столбца в столбчатую диаграмму/график онлайн.

Для того, чтобы добавить столбец вам потребуется:

Нажимаем по любой кнопке с "плюсами и минусами", сверху первой линии!

Нажимаем, например по первом плюсу, в новом окне видим строку "добавить столбец", если нажмете кнопку с плюсом и минусом, то будет вторая строка будет "удалить столбец".



Удаление столбца в столбчатую диаграмму/график онлайн.

Сверху я добавлял столбец... теперь, предположим, что вам потребовалось удалить столбец.

Для удаления столбца в столбчатой диаграмме/графике онлайн вам потребуется:

В первой линии кнопок выбираем любую кнопку с "плюсами и минусами" того столбца, который хотим удалить!

Нажимаем.

Выбираем строку удалить столбец.

Нажмите, чтобы открыть в новом окне.



Добавление строки в столбчатую диаграмму/график онлайн.

Сверху я добавлял столбцы и удалял... теперь, предположим, что вам потребовалось добавить строку.

Для добавления строки в столбчатой диаграмме/графике онлайн вам потребуется:

В первом столбце кнопок выбираем любую кнопку с "плюсами и минусами" той линии, за которой хотим добавить новую строку!

Нажимаем.

Выбираем строку добавить строку.

Нажмите, чтобы открыть в новом окне.



Удаление строки в столбчатую диаграмму/график онлайн.

Предположим, что вам потребовалось удалить строку.

Для удаления строки в столбчатой диаграмме/графике онлайн вам потребуется:

В первом столбце кнопок выбираем любую кнопку с "плюсами и минусами" той линии, которую хотим удалить!

Нажимаем.

Выбираем строку удалить строку.

Нажмите, чтобы открыть в новом окне.



Как встроить ваш график на сайт?

Созданный график здесь нка сайте можно встроить с помощью iframe.

Разберем пример встраивания графика на сайт...

Предположим, что вот ваш график.

Помещаем эту страницу в код "iframe" таким образом:

<iframe style ="width:750px;height:650px;border:none;margin:20px 0;" src="https://dwweb.ru/aminev_marat/chart/populyarnost_brauzerov_po_godam.html"></iframe>

И далее разместим выше приведенный код встраивания графика на сайт:

Марат 20.04.2026 22:36

Позавчера пытаясь добавить новую инфу(за два последних года) в график, график поломался...
Посмотрел я этот код - мне опять чуть плохо не стало - неужели это написал я!?
Полностью переписал все скрипты создания графиков за 2 дня...

---

Вообще... первый график был сделан здесь на сайте в 2023.
Скрипту, как минимум 3 года.
И даже может быть больше поскольку скрипт перекочевал с другого сайта.
Почти всё... протестировал, чуток осталось - завтра.
Сегодня всё - пошел спать!

Ответить Отправить

Марат 20.04.2026 17:11

Добавил два года 2024 +2025 в график браузеров по годам с 2013года...

Ответить Отправить