Библиотека для построения графиков. Библиотека визуализации Dygraphs
Графики являются отличным наглядным пособием при предоставлении данных. Без них невозможно создать качественную админ-панель. Их не так легко установить. Однако, существует новая библиотека, которая облегчает эту задачу - 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.Надеюсь вам понравилась эта статья. Хорошего дня.
Теги: Добавить метки
Вы узнали как устанавливать и использовать Chart.js. Также вы изучили некоторые глобальные параметры, с помощью которых можно изменять шрифт и всплывающие подсказки для различных графиков. Из этого руководства, вы знаете как создавать линейные и столбчатые диаграммы с использованием Chart.js.
Создание линейных диаграммЛинейные диаграммы полезны, когда вы хотите показать изменение значения данной переменной относительно изменений какой-либо другой переменной. Другая переменная - обычно временная. Например, линейные диаграммы могут использоваться для отображения скорости транспортного средства в определенные промежутки времени.
Chart.js позволяет создавать линейные диаграммы, если задать type как line . Вот пример:
Var lineChart = new Chart(speedCanvas, { type: "line", data: speedData, options: chartOptions });
Теперь мы предоставим данные, а также параметры конфигурации, которые нам нужны для построения линейной диаграммы.
Var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [{ label: "Car Speed", data: , }] }; var chartOptions = { legend: { display: true, position: "top", labels: { boxWidth: 80, fontColor: "black" } } };
В этой части мы сосредоточимся на различных опциях, специально предназначенных для изменения линейных диаграмм. Все параметры и данные, которые мы предоставили выше, создают следующую диаграмму.
Цвет области под кривой определяется ключом backgroundColor . Все линейные диаграммы, построенные с использованием этого метода, будут заполнены данным цветом. Вы можете установить значение ключа fill (заливка) равным false , если вы хотите просто нарисовать линию, без заполнения области по дней каким-либо цветом.
Еще одна вещь, которую вы могли заметить, это то, что для построения диаграммы мы используем отдельные указатели данных (точки). Библиотека автоматически интерполирует значения всех остальных точек с помощью встроенных алгоритмов.
По умолчанию точки строятся с использованием пользовательской взвешенной кубической интерполяции. Однако, вы можете установить значение ключа cubicInterpolationMode в monotone для более точного построения точек, если график, который вы создаете, определяется уравнением y = f (x) . Упругость кривой Безье определяется ключом lineTension . Вы можете установить его значение равным нулю, чтобы нарисовались прямые линии. Обратите внимание, что этот ключ игнорируется, если уже указано значение cubicInterpolationMode .
Вы также можете задать значения цвета границы и её ширины с помощью ключей borderColor и borderWidth . Если вы хотите построить диаграмму, используя пунктирную линию вместо сплошной линии, вы можете использовать ключ borderDash . Он принимает массив в качестве значений, элементы которого определяют длину и промежуток штрихов соответственно.
Появление построенных точек можно контролировать с помощью свойств pointBorderColor , pointBackgroundColor , pointBorderWidth , pointRadius и pointHoverRadius . Существует также ключ pointHitRadius , который определяет расстояние, с которого, точки на графике, начнут взаимодействовать с мышью.
Var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [{ label: "Car Speed", data: , lineTension: 0, fill: false, borderColor: "orange", backgroundColor: "transparent", borderDash: , pointBorderColor: "orange", pointBackgroundColor: "rgba(255,150,0,0.5)", pointRadius: 5, pointHoverRadius: 10, pointHitRadius: 30, pointBorderWidth: 2, pointStyle: "rectRounded" }] };
Указанный выше объект speedData отображает те же точки данных, что и предыдущий график, но с другими значениями, установленными для всех свойств.
Также вы можете построить несколько линий на одном графике и задать различные параметры, чтобы нарисовать каждый из них следующим образом:
Var dataFirst = { label: "Car A - Speed (mph)", data: , lineTension: 0.3, // Set More Options }; var dataSecond = { label: "Car B - Speed (mph)", data: , // Set More Options }; var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: }; var lineChart = new Chart(speedCanvas, { type: "line", data: speedData });
Создание столбчатых диаграммСтолбчатые диаграммы (или гистограммы) полезны, когда вы хотите сравнить одно измерение для разных объектов - например, количество автомобилей, продаваемых разными компаниями, или количество людей определенной возрастной группы в городе. Вы можете создать столбчатые диаграммы в Chart.js, установив ключ type в bar . По умолчанию это создаст диаграммы с вертикальными столбцами. Если вы хотите создать диаграммы с горизонтальными столбцами, вы должны установить type как horizontalBar .
Var barChart = new Chart(densityCanvas, { type: "bar", data: densityData, options: chartOptions });
Давайте создадим гистограмму, которая отображает плотность всех планет в нашей солнечной системе. Данные о плотности были взяты из Списка информации о Планетах , предоставленного NASA.
Var densityData = { label: "Density of Planets (kg/m3)", data: }; var barChart = new Chart(densityCanvas, { type: "bar", data: { labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], datasets: } });
Параметры, приведенные выше, создадут следующую диаграмму:
Так же как в линейных диаграммах, полосы заполнены светло-серым цветом. Вы можете изменить цвет полос, используя ключ backgroundColor . Аналогично, цвет и ширина границ разных полос могут быть заданы с помощью ключей borderColor и borderWidth .
Если вы хотите, чтобы библиотека не рисовала границы для определенной стороны, вы можете указать сторону в качестве значения для ключа borderSkipped . Вы можете установить следующие значение: top , left , bottom или right . Также вы можете изменить границы и цвет фона различных полос, которые вы увидите при наведении на них курсора мыши, с помощью hoverBorderColor и hoverBackgroundColor .
Размер столбцов в столбчатой диаграммы выше был вычислен автоматически. Однако вы можете контролировать ширину отдельных столбцов, используя свойства barThickness и barPercentage . Ключ barThickness используется для настройки толщины столбцов в пикселях, а barPercentage используется для настройки толщины в процентах от доступной ширины группы.
Давайте сделаем график плотности (планет) более интересным, переопределим значения по умолчанию для гистограмм, используя следующий код.
Var densityData = { label: "Density of Planets (kg/m3)", data: , backgroundColor: [ "rgba(0, 99, 132, 0.6)", "rgba(30, 99, 132, 0.6)", "rgba(60, 99, 132, 0.6)", "rgba(90, 99, 132, 0.6)", "rgba(120, 99, 132, 0.6)", "rgba(150, 99, 132, 0.6)", "rgba(180, 99, 132, 0.6)", "rgba(210, 99, 132, 0.6)", "rgba(240, 99, 132, 0.6)" ], borderColor: [ "rgba(0, 99, 132, 1)", "rgba(30, 99, 132, 1)", "rgba(60, 99, 132, 1)", "rgba(90, 99, 132, 1)", "rgba(120, 99, 132, 1)", "rgba(150, 99, 132, 1)", "rgba(180, 99, 132, 1)", "rgba(210, 99, 132, 1)", "rgba(240, 99, 132, 1)" ], borderWidth: 2, hoverBorderWidth: 0 }; var chartOptions = { scales: { yAxes: [{ barPercentage: 0.5 }] }, elements: { rectangle: { borderSkipped: "left", } } }; var barChart = new Chart(densityCanvas, { type: "horizontalBar", data: { labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], datasets: , }, options: chartOptions });
Объект densityData используется для установки границ и фонового цвета столбцов. В приведенном выше коде стоит обратить внимание на две вещи. Во-первых, значения свойств barPercentage и borderSkipped были установлены внутри объекта chartOptions вместо объекта dataDensity .
Во-вторых, на этот раз type диаграммы установлен в значение horizontalBar . Что также означает, что вам придется изменить значение barThickness и barPercentage для оси Y вместо оси X, чтобы эти значения имели хоть какой-либо эффект на столбцах.
Приведенные выше параметры создадут следующую гистограмму.
Вы также можете сделать графики из несколько наборов данных на одной и той же диаграмме, присвоив id (идентификатор) определенной оси конкретному набору данных. Ключ xAxisID используется для присвоения id любой оси X вашего набора данных. Аналогично, ключ yAxisID используется для присвоения идентификатора любой оси вашего набора данных. Обе оси также имеют ключ id , который вы можете использовать для назначения им уникальных идентификаторов.
Если последний абзац был немного запутанным, следующий пример поможет прояснить ситуацию.
Var densityData = { label: "Density of Planet (kg/m3)", data: , backgroundColor: "rgba(0, 99, 132, 0.6)", borderColor: "rgba(0, 99, 132, 1)", yAxisID: "y-axis-density" }; var gravityData = { label: "Gravity of Planet (m/s2)", data: , backgroundColor: "rgba(99, 132, 0, 0.6)", borderColor: "rgba(99, 132, 0, 1)", yAxisID: "y-axis-gravity" }; var planetData = { labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], datasets: }; var chartOptions = { scales: { xAxes: [{ barPercentage: 1, categoryPercentage: 0.6 }], yAxes: [{ id: "y-axis-density" }, { id: "y-axis-gravity" }] } }; var barChart = new Chart(densityCanvas, { type: "bar", data: planetData, options: chartOptions });
Здесь мы создали две оси Y с уникальными идентификаторами и они были назначены на отдельные наборы данных, используя ключ yAxisID . Ключи barPercentage и categoryPercentage используются, чтобы сгруппировать столбцы для отдельных планет. Настраиваем categoryPercentage на более низкое значение, чтобы увеличить расстояние между столбцами разных планет. Аналогичным образом, установив barPercentage на более высокое значение, мы уменьшим расстояние между столбцами одной и той же планеты.
На последокВ этом уроке мы рассмотрели все аспекты линейных и столбчатых диаграмм в Chart.js. Теперь вы должны уметь создавать базовые диаграммы, изменять их внешний вид и отображать несколько наборов данных на одном графике без каких-либо проблем. В следующей части серии вы узнаете о радиальных и полярных диаграммах в Chart.js.
Надеюсь, вам понравился этот урок. Если у вас есть какие-либо вопросы, пожалуйста, сообщите о них в комментариях.
В этой статье мы будем создавать интерактивный график, используя CSS3 и jQuery . Мы будем использовать популярную библиотеку для jQuery - Flot. Flot – это библиотека (на чистом javascript), предназначенная для рисования графиков, и используемая в jQuery. Этот плагин прост, но в то же время достаточно мощен, чтобы создавать красивые и интерактивные графики. Для большей информации о библиотеке обратитесь к официальной документации по flot.
Для начала создадим разметку HTML для графика. Создадим блок с классом graph-wrapper . Внутри этого блока расположим два блока. Первый блок с классом graph-info , будет содержать легенду графиков и кнопки для переключения между внешним видом графиков. Второй блок содержит графики (линейный и столбиковый).
HTML Visitors Returning Visitors jQuery и библиотека FlotДавайте подключим javascript. Сперва подключим библиотеку jquery (например, от google). Вы можете использовать ту же ссылку или загрузить файл c библиотекой jQuery на ваш сервер. Затем загрузите файлы Flot и подключите jquery.flot.min.js.
HTML $(document).ready(function () { // Graph scripts here }); Данные для графикаДанные для графика представляют собой массив вида: . Мы также установим пользовательские опции для каждого типа данных.
jQuery var graphData = [{ // Visits data: [ , , , , , , , , , ], color: "#71c73e" }, { // Returning Visits data: [ , , , , , , , , , ], color: "#77b7c5", points: { radius: 4, fillColor: "#77b7c5" } } ]; Загружаем графикиСейчас мы будем загружать два графика, один линейный, другой столбиковый. Оба имеют несколько пользовательских параметров (цвет, тень и т.д.). Также оба используют данные из переменной graphData .
jQuery // Линейный $.plot($("#graph-lines"), graphData, { series: { points: { show: true, radius: 5 }, lines: { show: true }, shadowSize: 0 }, grid: { color: "#646464", borderColor: "transparent", borderWidth: 20, hoverable: true }, xaxis: { tickColor: "transparent", tickDecimals: 2 }, yaxis: { tickSize: 1000 } }); // Bars $.plot($("#graph-bars"), graphData, { series: { bars: { show: true, barWidth: .9, align: "center" }, shadowSize: 0 }, grid: { color: "#646464", borderColor: "transparent", borderWidth: 20, hoverable: true }, xaxis: { tickColor: "transparent", tickDecimals: 2 }, yaxis: { tickSize: 1000 } }); Стили для блока-обертки и его потомковПредварительно сбросим стили по умолчанию для всех элементов в блоке-родителе графиков (хорошая практика начинать верстку сайта с подключений сброса стилей).
CSS /* Resets */ .graph-container, .graph-container div, .graph-container a, .graph-container span { margin: 0; padding: 0; } Добавим градиент и закругленные углы обертке, кнопкам и подсказкам. CSS /* Gradinet and Rounded Corners */ .graph-container, #tooltip, .graph-info a { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9)); background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: linear-gradient(to bottom, #ffffff 0%,#f9f9f9 100%); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }Наконец в следующем шаге мы добавим позиционирование блоку-родителю, а также назначим ему ширину, высоту и отступы. Не стесняйтесь экспериментировать этими значениями в зависимости от ваших предпочтений по дизайну и размеров графиков.
CSS /* Graph Container */ .graph-container { position: relative; width: 550px; height: 300px; padding: 20px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.1); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.1); box-shadow: 0px 1px 2px rgba(0,0,0,.1); } .graph-container > div { position: absolute; width: inherit; height: inherit; top: 10px; left: 25px; } .graph-info { width: 590px; margin-bottom: 10px; } 
Давайте начнем с добавления базовых стилей для ссылок. Для легенд графиков создадим небольшой круг с таким же цветом как у самих графиков (линейный/столбиковый). Чтобы создать круг будем использовать псевдо-селектор:before . Этот селектор позволит нам вставить контент до содержимого элемента, к которому он добавляется.
CSS .graph-info a { position: relative; display: inline-block; float: left; height: 20px; padding: 7px 10px 5px 30px; margin-right: 10px; text-decoration: none; cursor: default; } CSS /* Color Circles */ .graph-info a:before { position: absolute; display: block; content: ""; width: 8px; height: 8px; top: 13px; left: 13px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .graph-info .visitors { border-bottom: 2px solid #71c73e; } .graph-info .returning { border-bottom: 2px solid #77b7c5; } .graph-info .visitors:before { background: #71c73e; } .graph-info .returning:before { background: #77b7c5; }Затем добавим стили двум кнопкам, которые позволяют нам переключаться между линейным и столбиковым графиком.
Наконец предотвратим схлопывание блоков.
CSS /* Clear Floats */ .graph-info:before, .graph-info:after, .graph-container:before, .graph-container:after { content: ""; display: block; clear: both; } Переключатель графиковНа этом шаге добавим событие клика для кнопок “столбиковый” и “линейный”. При загрузке спрячем столбиковый график, затем при клике по “столбиковой” кнопке делаем график видимым. Чтобы увидеть линейный график, пользователь должен кликнуть по “линейной” кнопке.
jQuery $("#graph-bars").hide(); $("#lines").on("click", function (e) { $("#bars").removeClass("active"); $("#graph-bars").fadeOut(); $(this).addClass("active"); $("#graph-lines").fadeIn(); e.preventDefault(); }); $("#bars").on("click", function (e) { $("#lines").removeClass("active"); $("#graph-lines").fadeOut(); $(this).addClass("active"); $("#graph-bars").fadeIn().removeClass("hidden"); e.preventDefault(); }); ТекстДобавляем шрифт и стили для текста.
CSS #tooltip, .graph-info a { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; font-size: 12px; line-height: 20px; color: #646464; } .tickLabel { font-weight: bold; font-size: 12px; color: #666; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }Спрячем стили для первого и последнего значения по оси y:
CSS .yAxis .tickLabel:first-child, .yAxis .tickLabel:last-child { display: none; } ПодсказкаДобавим подсказку внутрь элемента body. Подсказка будет блоком с id равным tooltip . Позиция для подсказки будет вычисляться на основе позиции точек графика. Подсказка будет показываться лишь при наведении курсора на точки графиков.
jQuery function showTooltip(x, y, contents) { $("" + contents + "").css({ top: y - 16, left: x + 20 }).appendTo("body").fadeIn(); } var previousPoint = null; $("#graph-lines, #graph-bars").bind("plothover", function (event, pos, item) { if (item) { if (previousPoint != item.dataIndex) { previousPoint = item.dataIndex; $("#tooltip").remove(); var x = item.datapoint, y = item.datapoint; showTooltip(item.pageX, item.pageY, y + " visitors at " + x + ".00h"); } } else { $("#tooltip").remove(); previousPoint = null; } });Затем добавим подсказке абсолютное позиционирование, отступы, границы и установим display в none .
CSS #tooltip { position: absolute; display: none; padding: 5px 10px; border: 1px solid #e1e1e1; } 
На этом все. Мы закончили, используя CSS3 и плагин flot, настраивать графики. Успехов.