Html график по точкам готовое. Данные из массива
Графики являются отличным наглядным пособием при предоставлении данных. Без них невозможно создать качественную админ-панель. Их не так легко установить. Однако, существует новая библиотека, которая облегчает эту задачу - xCharts . Сегодня мы собираемся использовать эту программу вместе с палитрой Date Range для Twitter Bootstrap , чтобы создать красивый AJAX-график для вашего веб-приложения, который извлекает данные из таблицы MySQL.
HTMLДемо-структура этого языка довольно проста - мы должны добавить элементы на странице для начала построения графика и для выбора информации. Поскольку в любом случае мы включаем загрузку на странице, можно использовать ее стилевые формы и значки, чтобы придать этой структуре хороший вид.
index.php
Pretty Charts with jQuery and AJAX | Tutorialzine Demo
Здесь используется немало внешних ресурсов. В основной секции у нас есть файлы таблицы каскадных стилей для xCharts , сортировщик чисел, загрузка (интегрированная из супер быстрого CDN CloudFlare) , и наш файл style.css.
Перед тем, как закрыть ярлык таблицы, у нас есть библиотека JQuery , d3.js (требуемые программой xсharts), xcharts , библиотека с удобным интерфейсом sugar.js (которая требует плагин в диапазоне «дат»), плагин в диапазоне «дат» и файл script.js. Далее вы увидите, как все это работает сообща.
MySQLКак я уже упоминал во введении, скрипт, которым мы пишем, будет получать данные из таблицы MySQL и отображать их в диаграмме. Вы можете найти код SQL , который создаст таблицу в schema.sql в сжатом файле, доступном для загрузки с помощью верхних кнопок. Таблица будет выглядеть следующим образом:
Она имеет только три колонки. Колонке «дата» присваивается уникальный индекс, что означает, что не может быть повторяющихся записей в один и тот же день. В колонку «записей о продажах» указывается количество продаж в течение дня. Ваша база данных будет, безусловно, другой, но, пока вы получите правильный ответ в формат для структурирования данных в простой текстовый формат, используемый для обмена информацией JSON из PHP-скрипта, уже не будет никаких проблем (подробнее об этом в следующем разделе) .
Примечание : Не забудьте ввести свои данные подключения MySQL в setup.php . Затем вы должны будете создать новую базу данных MySQL и импортировать schema.sql из системы PHPMyAdmin или из выбранной вами системы управления.
PHPВ нашем скрипте PHP мы выберем записи из таблицы, которые соответствуют переданной начальной и конечной информации, соберем все данные массив, и выведем их в текстовом формате обмена данными (JSON):
ajax.php
Header("Content-Type: application/json"); // настройка библиотеки require_once("setup.php"); if (isset($_GET["start"]) AND isset($_GET["end"])) { $start = $_GET["start"]; $end = $_GET["end"]; $data = array(); // выбираем результаты $results = ORM::for_table("chart_sales") ->where_gte("date", $start) ->where_lte("date", $end) ->order_by_desc("date") ->find_array(); // создаем новый массив с данными foreach ($results as $key => $value) { $data[$key]["label"] = $value["date"]; $data[$key]["value"] = $value["sales_order"]; } echo json_encode($data); }
Здесь я использую мою любимую библиотеку - Idiorm . Раньше я использовал ее в консультациях на сайте (и во многих личных проектах). Это только один файл (находится в библиотека/папки) и весьма облегчает работу с базами данных. Все, что я делаю, это выбираю все результаты из базы данных, которые имеют временное значение между начальной и конечной метками времени, согласованными с запросом о получении информации.
Полученный ответ от JSON выглядит примерно так:
[{ "label": "2013-01-07", "value": "4" }, { "label": "2013-01-06", "value": "65" }, { "label": "2013-01-05", "value": "96" }]
Свойства ярлыка содержат значения чисел MySQL в соответствующей строке, а столбцы - количество продаж за этот день. Это зависит только от кода JavaScript, чтобы правильно обрабатывать эти данные и переделать их в формат, подходящий для совместного использования с плагином xCharts .
Весь код JS заключается в assets/js/script.js. Код немного длинный, и, чтобы сделать легче его выполнение, я представлю его вам частями.
Сначала мы установим несколько переменных и инициализируем date range picker плагин. Обратите внимание, что диапазон dat, который я использовал, - это ответвление от первоначального плагина. Я решил работать с этой версией, поскольку оригинал зависит от date.js - библиотеки с устаревшей данными, которая конфликтует с xCharts. Вместо нее используется sugar.js - прекрасная полезная библиотека с достоверной и современной информацией.
assets/ js/ script. js
$(function() { // установка стандартных дат, используя функции shugar var startDate = Date.create().addDays(-6), // 6 дней назад endDate = Date.create(); // сегодня var range = $("#range"); // показ дат в порядке ввода range.val(startDate.format("{MM}/{dd}/{yyyy}") + " - " + endDate.format("{MM}/{dd}/{yyyy}")); // загружаем график ajaxLoadChart(startDate,endDate); range.daterangepicker({ startDate: startDate, endDate: endDate, ranges: { "Today": ["today", "today"], "Yesterday": ["yesterday", "yesterday"], "Last 7 Days": , "Last 30 Days": // You can add more entries here } },function(start, end){ ajaxLoadChart(start, end); });
Как вы можете видеть, мы удачно применили информацию и методы sugar.js ", чтобы определить начальную и конечную точку диапазона. Я ввел в сценарий результаты последних 7 дней, и обновил поле ввода диапазона.
Теперь давайте создадим график:
// подсказка когда наводишь на график var tt = $("").appendTo("body"), topOffset = -32; var data = { "xScale" : "time", "yScale" : "linear", "main" : [{ className: ".stats", "data" : }] }; var opts = { paddingLeft: 50, paddingTop: 20, paddingRight: 10, axisPaddingLeft: 25, tickHintX: 9, // How many ticks to show horizontally dataFormatX: function(x) { // здесь конвертируется временной штамп пришедший с // ajax.php в соответствующий JavaScript Date объект return Date.create(x); }, tickFormatX: function(x) { // устанавливаем формат лейблов для оси x return x.format("{MM}/{dd}"); }, "mouseover": function (d, i) { var pos = $(this).offset(); tt.text(d.x.format("{Month} {ord}") + ": " + d.y).css({ top: topOffset + pos.top, left: pos.left }).show(); }, "mouseout": function (x) { tt.hide(); } }; // Создаем новую xChart инстанцию, передавая тип // графика, набор дат и дополнительные функции var chart = new xChart("line-dotted", data, "#chart" , opts);
Сначала я определяю объект конфигурации xСharts с его свойствами и обратными функциями. В собственности dataFormatX я трансформирую yyyy-mm-dd строки, возращенные из запроса AJAX , в надлежащие объекты JavaScript Date, так чтобы плагин мог правильно отобразить их и произвести свои расчеты.
Я также использую обработчик информации для плагина mouseover/mouseout, и применяю его, чтобы показать подсказку (плагин не поставляется с одним из модулей).
Наконец, вот функция JavaScript для загрузки данных через AJAX:
// функция загрузки данных через AJAX и вывод их на график function ajaxLoadChart(startDate,endDate) { // если нету данных, график будет пуст if(!startDate || !endDate){ chart.setData({ "xScale" : "time", "yScale" : "linear", "main" : [{ className: ".stats", data: }] }); return; } // в противном случае, формируем ajax запрос $.getJSON("ajax.php", { start: startDate.format("{yyyy}-{MM}-{dd}"), end: endDate.format("{yyyy}-{MM}-{dd}") }, function(data) { var set = ; $.each(data, function() { set.push({ x: this.label, y: parseInt(this.value, 10) }); }); chart.setData({ "xScale" : "time", "yScale" : "linear", "main" : [{ className: ".stats", data: set }] }); }); } });
xCharts предоставляет метод установки данных (the setData), так что вы можете легко переместить или заменить отображенные данные. Атрибут the className важен, так как его использует плагин для определения вашего графика. Если вы проигнорируете его, могут случиться всевозможные виды странных ошибок (поверьте мне, я знаю).
На этом мы завершили создание нашей красивой диаграммы!
Конец!Вы можете использовать этот пример, чтобы улучшить ваши области управления и визуализировать статистические данные в красивом интерфейсе.
- Перевод
Практически невозможно представить себе информационную панель без диаграмм и графиков. Они быстро и эффективно отображают сложные статистические данные. Более того, хорошая диаграмма также улучшает общий дизайн вашего сайта.
В этой статье я покажу вам некоторые из лучших JavaScript библиотек для построения диаграмм/схем (и сводных таблиц). Эти библиотеки помогут вам в создании красивых и настраиваемых графиков для ваших будущих проектов.
Хотя большинство библиотек являются бесплатными и свободно распространяемыми, для некоторых из них есть платные версии с дополнительным функционалом.
D3.js – документы, ориентированные на данные Сегодня, когда мы задумываемся о графиках, то первое, что приходит в голову – это D3.js Являясь open source проектом, D3.js, вне всякого сомнения, дарит много полезных возможностей, которых не хватает большинству существующих библиотек. Такие возможности как “Enter and Exit”, мощные переходы, и синтаксис, схожий с jQuery или Prototype, делают его одной из лучших JavaScript библиотек для создания графиков и диаграмм. В D3.js они генерируются посредством HTML, SVG и CSS.В отличие от многих других JavaScript библиотек, D3.js не поставляется с заранее созданными графиками прямо из коробки. Однако вы можете взглянуть на перечень графиков, созданных на D3.js , чтобы получить общее представление.
D3.js не работает должным образом со старыми браузерами, такими как IE8. Но вы всегда можете применить такие плагины как aight plugin для кроссбраузерной совместимости.
D3.js ранее широко использовался на таких вебсайтах как NYTimes , Uber и Weather.com
Google Charts
Google Charts – JavaScript библиотека, которую я регулярно использую для простого и лёгкого создания графиков. Предоставляет множество предварительно созданных диаграмм, таких как комбинированные гистограммы, столбчатые диаграммы, календарные графики, секторные диаграммы, гео схемы, и др.
В Google charts также имеется множество конфигурационных настроек, которые помогают изменить внешний вид графика. Графики формируются с помощью HTML5/SVG добы обеспечить кроссбраузерную совместимость и кроссплатформенную портируемость на IPhone, IPad и Android. Также содержит VML для поддержки старых IE версий.
Highcharts JS
Highcharts JS – ещё одна весьма популярная библиотека для построения графиков. Комплектуется большим количеством анимации разнообразного типа, способной привлечь множество внимания к вашему сайту. Как и другие библиотеки, HighchartsJS содержит множество предварительно созданных диаграмм: сплайновых, фигурных, комбинированных, столбчатых, гистограмм, круговых, точечных и пр.
Одно из самых больших преимуществ применения HighchartsJS – совместимость со старыми браузерами, такими как Internet Explorer 6. Стандартные браузеры используют SVG для рендеринга графиков. В устаревшем IE графики строятся через VML.
Хотя HighchartsJS и бесплатен для персонального использования, вам необходимо приобрести лицензию для коммерческого применения.
Fusioncharts
Fusioncharts – одна из наиболее старых JavaScript библиотек, которая была впервые выпущена в 2002 году. Графики генерируются посредством HTML5/SVG и VML для лучшей портируемости и совместимости.
В отличие от множества библиотек, Fusioncharts предоставляет возможность парсинга как JSON данных, так и XML. Вы также можете экспортировать эти графики в 3 разных формата: PNG, JPG и PDF.
Fusioncharts хорошо совместим со старыми браузерами, такими как IE6. И по этой причине он стал одной из наиболее предпочитаемых библиотек во множестве торговых организаций.
Вы можете бесплатно использовать версию Fusioncharts с водяным знаком как в личных так и в коммерческих проектах. Однако, вам необходимо приобрести лицензию , чтобы избавиться от водяного знака.
Flot
Flot – JavaScript библиотека для JQuery, позволяющая создавать графики/диаграммы. Одна из старейших и наиболее популярных диаграммных библиотек.
Flot поддерживает линейчатые, точечные, гистограммы, столбчатые и любые комбинации из этих видов диаграмм. Также совместим со старыми браузерами, такими как IE 6 и Firefox 2.
Flot полностью бесплатен, коммерческая поддержка предоставляется по специальному запросу разработчику. Вот список примеров с графиками , созданных на Flot.
amCharts
amCharts , несомненно, одна из наиболее красивых диаграммных библиотек. Она в полной мере разделилась на 3 независимых вида: JavaScript Charts, Maps Charts (amMaps) и Stock charts.
AmMaps – мой любимый из этих трёх, что указаны выше. Предоставляет такие возможности, как теплокарты, рисование линий, добавление текста на карту, загрузка иконок или фотографий в верхнюю часть вашей карты, изменение масштаба и пр.
amCharts использует SVG для рендеринга графиков который работает только в современных браузерах. Графики могут не правильно отображаться в IE ниже 9й версии.
EJS Chart предоставляется в бесплатной и платной версиях. Бесплатная версия имеет ограничение, не позволяющее вам использовать более 1 графика на странице и более двух (числовых) последовательностей на графике. Ознакомьтесь с ценовыми подробностями .
uvCharts
uvCharts – JavaScript библиотека с открытым исходным кодом, заявляется о наличии более 100 конфигурационных опций. У неё имеются графики 12 различных стандартов прямо из коробки.
UvCharts построен на D3.js библиотеке. Этот проект обещает устранить все сложные нюансы кодинга D3.js и обеспечить лёгкую реализацию графиков стандартного вида. uvCharts генерируется посредством SVG, HTML и CSS.
Заключение Теперь выбор наилучшей диаграммной библиотеки для своих будущих проектов остаётся только за вами. Разработчики, которым нужен полный контроль над графиками, определённо выберут D3.js Практически все вышеуказанные библиотеки обзавелись хорошей поддержкой на форумах Stackoverflow.Надеюсь вам понравилась эта статья. Хорошего дня.
Теги: Добавить метки
Если Вашим покупателям или же клиентам нужно передать какую либо отчётность, а так же некоторые сравнения, Вам очень сильно помогут самые обычные графики. В общем они и созданы для этого. Чтобы как всегда облегчить Вам задачу поисков, представляю Вам подборку из 9 библиотек различных графиков на Javascript. Данные графики достаточно функциональны, а так же имеют красивую анимацию, которая будет приятна любому пользователю.
2. Chartist.JSБольшая библиотека графиков с поддержкой адаптивного дизайна. Так же в графиках используется SVG.
Отличная библиотека с огромным количеством примеров. В основном данные графики просты как на вид так и в установке, но основную свою задачу они полностью выполняют.
Это JQuery плагин для создания интерактивных графиков на сайт. В данном случае тут можно масштабировать, добавлять и удалять различные элементы, панорамировать и многое другое. Этот плагин поставляется с большим количеством типов уже встроенных диаграмм.
Это огромная и обширная библиотека графиков и диаграмм созданная китайцами. Она поддерживает огромное количество информации.
Простая библиотека с помощью которой Вы очень просто и быстро можете добавить на веб страницу обычный график или какую нибудь диаграмму.
Ещё одна отличная библиотека, которая делает то, что от неё и требуется. Присутствует красивая анимация, функциональность и простота установки.
Вы можете создавать интерактивные графики с помощью API Google. Так же есть галереи с уже созданными диаграммами, чтобы посмотреть на что возможна данная библиотека.
Простая в установке и настройке библиотека графиков и диаграмм. Просто взяли и установили.
Если вы работали с любыми видами данных, вы знаете, какими мучительными могут быть цифры. Непросто пробраться через все эти цифры и понять, что они означают. Это случай, когда визуализация приходит на помощь. Визуализация проясняет данные и помогает лицам, принимающим решения извлечь из них действенные идеи.
“Dataviz” является аббревиатурой “визуализации данных”, основной задачей которой является четкая и эффективная передача информации пользователям с помощью статистических графиков, диаграмм, информационной графики и таблиц.
Как разработчики, мы должны использовать правильные инструменты для создания выразительных диаграмм из данных, обеспечивая соответствующее количество деталей, не отвлекая от картины в целом.
Есть много доступных jQuery плагинов, которые могут помочь вам создать интерактивную dataviz для вашей веб-страницы. Но какие из них действительно полезны? В этой статье я назвал своих фаворитов, и выделил их уместность в определенных ситуациях. Таким образом, вы не потратите время и усилия на поиски, и у вас будет представление текущих возможностей выбора.
1. FusionCharts
Помимо JavaScript Charts, FusionCharts также предлагает плагин jQuery, который упаковывает все добро FusionCharts - смарт-дизайн, анимацию и богатый интерактивный опыт. Графики плавно работают плавно на всех типах устройств, включая ПК, Mac, Android устройства, а также iPads и iPhones. Он также обратно совместим с браузерами до IE6.
Этот плагин jQuery имеет некоторые действительно мощные функции. Графики могут быть представлены данными JSON, XML данными или таблицами HTML. Представлены многие распространенные события, которые происходят в графике (здесь полный список), у вас будет больше шансов, что слушатели выполнят определенные действия.
Здесь удобное руководство по использованию, которое поможет вам начать работу с плагином и реальными фрагментами кода, которые можно использовать. Образцы плагина и кода также доступны на Github.
В датском языке, flot (рифмуется с “plot”) означает элегантный, привлекательный, впечатляющий и это именно то, что библиотека Flot стремится сделать. Они сконцентрированы на создании простых в использовании, привлекательных и интерактивных диаграмм и графиков. Интерактивные функции включают в себя включение и выключение циклов, панорамирование и масштабирование, взаимодействие с данными и автоматическое изменение размера. Другие особенности включают поддержку нескольких осей, многоярусные диаграммы и текст рендеринга с Canvas вместо HTML. Многие другие функции доступны как плагины.
Есть ряд видео, рассказывающих о том, как использовать Flot, и много иллюстративных примеров, к которым вы также можете обратиться.
Лицензия: С открытым исходным кодом. Бесплатно для любых применений.
3. Highcharts
Highcharts является еще одной популярной JavaScript библиотекой для построения диаграмм. Она была выпущена в 2009 году и использование до сих пор набирает обороты. Она предлагает общие схемы, карты и биржевые диаграммы.
Вы можете скачать адаптер jQuery с главной страницы загрузки вместе с самой библиотекой Highcharts. Это позволяет изучить все мощные функции, без необходимости иметь дело с vanilla JavaScript.
Как FusionCharts, она также поддерживает все браузеры (в том числе IE6), устройства и платформы. Сообщество очень поддерживает Highcharts и вы можете найти все плагины, разработанные сообществом на этой странице. Еще одной крутой особенностью Highcharts является демо раздел, который позволяет вам очень быстро начать работу.
Лицензия: Бесплатно для некоммерческих целей, платно для коммерческих.
4. Morris.js
Morris.js это мощная библиотека с чистым интерфейсом. Она основана на jQuery и библиотеке Raphaël JavaScript. Основная цель заключается в предоставлении красивых диаграмм, которые легко использовать. Типы диаграмм по умолчанию включают линейную, брусковую, диаграмму с областями и кольцевую. В библиотеке есть несколько примеров, на которые вы можете взглянуть при помощи кода, и которые покажут, как начать и создать привлекательные диаграммы в течение нескольких минут.
Лицензия: Упрощенная лицензия BSD.
5. CanvasJS jQuery
CanvasJS jQuery - jQuery плагин графиков, который поставляется с CanvasJS. При применении этого jQuery плагина, вы можете использовать все стандартные функции CanvasJS, наряду с расширенным набором функций, который включает динамические обновления, панорамирование и масштабирование, события и экспорт в виде изображений. Графики достаточно хороши для больших наборов данных и базовый пакет включает в себя 24 различных типов диаграмм, и все они являются отзывчивыми.
Вот некоторые хорошие примеры с исходным кодом, которые наглядно демонстрируют особенности построения диаграмм, а также интеграцию jQuery UI.
Лицензия: Бесплатно для некоммерческих целей, платно для коммерческих..
6. Cytoscape.js
Cytoscape.js не похожа на обычную библиотеку графиков, но она достаточно внушительна и заслуживает включения в этот список. В отличие от других плагинов, которые мы обсуждали до сих пор, Cytoscape - действительно библиотека графиков jQuery (т.е. помогает визуализировать графики или сети). Она оптимизирована, если дело касается преобразования сырых сетевых данных в графы и также может обрабатывать большие объемы данных. Совместима со всеми современными браузерами, CommonJS/NodeJS, jQuery и Meteor/Atmosphere. Она также поддерживает сенсорные события и стандартные жесты. Для более полного списка функций, пожалуйста, обратитесь к странице Cytoscape.js.
Документация Cytoscape.js включает в себя примеры реального кода, даже для интерактивных случаев и полный набор модульных тестов.
Лицензия: С открытым исходным кодом. Бесплатно для всех пользователей. (LGPL3+)
7. Peity
Иногда нужны просто небольшие графы с вашим контентом, а Peity является идеальным решением для таких ситуаций. Она позволяет с легкостью конвертировать небольшие объемы данных в линейные, брусковые, кольцевые диаграммы с одной строкой кода. Они в виде svg и, следовательно, совместимы с любым браузером, поддерживающим svg элемент, в том числе Chrome, Opera, Firefox, IE9+ и Safari. Вы также можете настроить визуальные элементы диаграммы и установить динамические цвета. Графики могут быть обновлены, чтобы отразить изменения в данных. События также поддерживаются. Прилагаются многие примеры с реальным кодом на странице Github.
8. Easy Pie Chart
Говоря о простоте и эффективности, я должен упомянуть Easy Pie Chart. Это плагин jQuery, который выполняет только одну функцию - он создает простые круговые диаграммы для отдельных значений. Он использует элемент canvas, чтобы сделать эти диаграммы. Графики легко настроить, для этого требуется всего несколько строк кода. Они также отзывчивы и масштабируются в соответствии с разрешением экрана, чтобы предоставить четкие графики, даже на дисплеях retina.
Плагин совместим со всеми современными браузерами, которые поддерживают элемент canvas. На IE 8 и более старых версиях, вы можете создать диаграммы, используя excanvas. Вы можете посмотреть некоторые интересные демо на Github.
Лицензия: С открытым исходным кодом под лицензией MIT.
9. jqPlot
jqPlot это плагин jQuery, который позволяет вставлять чистые клиентские диаграммы в веб-страницы. jqPlot может похвастаться сильной ‘pluggability’ заключающейся в том, что все расчеты и чертежи - линии, оси, тени, сетки и так далее - сделаны с помощью подключаемых визуализаторов. Вы можете расширить функциональные возможности для обработки пользовательских событий, добавления новых типов графиков и других дополнительных функций.
Подробные уроки использование jqPlot доступны здесь. Также доступны примеры графиков и некоторых модульных тестов.
Лицензия: Проект с открытым исходным кодом. Двойная лицензия - MIT и GPL версия 2.
10. jQuery Sparklines
1436351687jQuery-sparklines
jQuery Sparklines (похоже на Peity) позволяет создавать небольшие встроенные диаграммы с данными, которые поставляются непосредственно в HTML или через встроенный JavaScript. Создание каждого примера на картинке выше занимает всего одну строку кода. Вам даже не нужно писать код самостоятельно. Существует генератор кода (под заголовком “Попробуйте его”), где вы можете ввести данные и установить параметры и получить сгенерированный для вас код. Обратите внимание, что вы не можете добавить текст или метки в спарклайны. Они предназначены для того, чтобы показывать соответствия с вашим текстом. Если вам нужны аннотации или другие функции, вам лучше использовать один из плагинов, о которых мы рассказывали выше.
В случае если вы хотите использовать этот плагин, есть подробная документация вариантов, синтаксиса и использования.
Лицензия: С открытым исходным кодом. Бесплатно для всех применений.
11. jQuery.Gantt
До сих пор мы говорили о плагинах, которые создают привычные графики и диаграммы, плагины, которые помогут вам с сетевыми графиками, а также некоторые для встроенных мини-графиков и диаграмм. Но если вам нужна панель с функциями управления проектами, вам понадобятся графики Gantt. Плагин jQuery.Gantt позволяет визуализировать диаграммы Gantt, используя Ajax для получения данных в формате JSON. Функции включают в себя панорамирование, масштабирование, поиск, несколько задач, различные цвета для каждой задачи, маркировка праздников и другое. Чтобы узнать больше об этом плагине, вы можете прочитать его подробную документацию, которая расскажет о его параметрах и о том, как его использовать.
Если вам нравятся диаграммы Gantt, то я предлагаю вам прочитать статью “Создание собственного графика Gantt с Webix”, написанную Sergey Laptick, о том, как создать приложение диаграммы Gantt, используя фреймворк Webix в сочетании с открытым исходным кодом диаграммы JavaScript Gantt, называемый dhtmlxGantt. Ее стоит прочесть.
Лицензия: Проект с открытым исходным кодом. Двойная лицензия - MIT и GPL.
Выводы
Список моих любимых jQuery-библиотек для построения графиков - по крайней мере, тех, которые я использовал - подошел к концу. Они охватывают почти каждый тип диаграммы, функциональность и настройки, которые могут вам понадобиться.
Высоких конверсий!
Использование графиков и диаграмм имеет очень широкое применение. С их помощью можно показать много информации в удобном и понятном виде, и соответственно быстрее понять и разобраться в ней.
Есть несколько способов добавить график или диаграмму на веб-страницу. Первый, о котором вы, вероятно, уже подумали, это нарисовать его в любом графическом редакторе. Но это не самый удобный и быстрый вариант. Куда проще и быстрее сделать график на JavaScript, где всего то придется задать необходимые параметры, вид и поместить его на страницу.
В этой статье, мы расскажем вам о 10 сервисах и инструментах , которые помогут в создании графиков и диаграмм на JavaScript. Другие способы создания вы найдете в рубрике « ».
Bluff
Чтобы нарисовать линейный график с помощью этого сервиса нужно всего лишь скопировать несколько строчек кода, задать нужные параметры и добавить текст. Код настолько прост и понятен, что разобраться в нем вы сможете буквально за несколько секунд.
С помощью PlotKit можно строить диаграммы и графики, которые будут корректно отображаться во всех браузерах. На сайте вы найдете документацию, примеры видов графиков и краткое руководство (с описанием всех параметров и настроек), чтобы быстро начать работу.
Этот сервис позволяет делать великолепные визуальные функций. Вводите уравнение, например 2*sin(4*x)^(x+4), нажимаете «Enter» и функция готова. После этого вам остается только скопировать url и вставить его на свою страницу.
Мощнейший инструмент для построения таблиц, графиков и диаграмм на jQuery. На сайте вы найдете примеры всех видов графиков, а так же подробное описание параметров и этапов настройки.
Flot
jQuery библиотека для построения графиков от Google. На этом можно больше ничего не писать, все уже и так понятно (: Но все же отметим, что сервис предлагает огромное количество красивых примеров с гибкой и простой настройкой.
Позволяет создавать диаграммы и таблицы гистограмм данных. Для построения нужно ввести необходимые данные и нажать на кнопку «Calculate». Далее скопировать код и скачать небольшой скрипт. При желании все данные можно вводить в самом коде.
Сервис предоставляет 6 видов диаграмм (круговая диаграмма, линейный график, динамическая диаграмма и 3 вида гистограмм). Есть описание настроек, параметров и подробные примеры всех видов диаграмм.
Raphaël
Raphaël - это небольшая JavaScript библиотека, которая значительно упрощает работу при создании графиков и диаграмм. Это самый мощный инструмент из всех представленных в этом обзоре. Вам будет проще посмотреть возможности библиотеки самим, чем читать описание о ее возможностях.
Plotr
Библиотека для построения диаграмм на Mootools. Отличный инструмент, который представляет информацию и красивом и понятном виде. А для его настройки нужно только изменить или добавить значения.
Возможности этого сервиса позволяют строить 3D графики. Из функционала стоит выделить простую настройку, быструю работу скрипта и возможность построения графиков косинусного и синусного видов.