Строим редактируемые графики с помощью JavaScript
И снова я продолжаю тему графиков 
Кстати, в том, что от twitter’а есть польза я недавно убедился на личном опыте . В ленте b1shop проскочила ссылка на очень интересный плагин для jQuery, предназначенный для создания графиков.
О том как нарисовать график с помощью JavaScript я писал в статье JavaScript библиотеки для создания графиков и в ней же сделал некоторые выводы.
В одном из них было утверждение о том, что JS библиотеки серьезно уступают Flash аналогам в плане функциональности. По большому счету это правильно… но библиотека jqPlot имеет ряд возможностей, которые, как я считал раньше доступны только во flash.
Кроме того, jqPlot позволяет подключать дополнительные плагины, точнее большинство функций реализовано с помощью плагинов. Таким образом, подключая только необходимые JS-файлы вы можете уменьшить размер страницы.
Возможностей у jqPlot много, но мне сразу бросились в глаза редактируемые графики. На них вы можете перемещать точки с помощью мышки.
Пример создания такого графика я и хочу показать в этой статье.
Как он работает вы можете увидеть на демонстрационной страничке
А если есть желание поэкспериментировать – качайте архив.
Нам потребуется всего одна html старинца.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
-
<head>
-
<title>jqPlot Test</title>
-
-
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
-
<meta http-equiv="Content-Style-Type" content="text/css" />
-
-
<!–[if IE]>
-
<script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]–>
-
-
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
-
</head>
-
-
<body>
-
-
<div id="myPlot" style="width:500px; height:400px;"></div>
-
-
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
-
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
-
<script type="text/javascript" src="js/jqplot.dragable.min.js"></script>
-
<script type="text/javascript">
-
$(function() {
-
var data = [[0,0], [0.5,0.5], [1,0.3], [1.5,1]];
-
var plot1 = $.jqplot('myPlot', [data], {
-
title: "Перемещающиеся точки"
-
, axes: {
-
xaxis: {
-
tickOptions: {
-
formatString: '%.1f'
-
}
-
}
-
, yaxis: {
-
tickOptions: {
-
formatString: '%.1f'
-
}
-
}
-
}
-
});
-
});
-
</script>
-
</body>
-
</html>
На этой странице мы размещаем один блок под названием myPlot (строка 18). Именно в нём и будет размещен график.
Затем подключаем файл со стилями (строка 13), библиотеку jQuery и файлы jqPlot (строки 20-22). Тут нужно обратить внимание на порядок подключения скриптов.
jQuery должна идти первой, т.к. jqPlot является плагином для неё.
Затем подключаем jquery.jqplot.min.js – это основной файл плагина.
Файл jqplot.dragable.min.js является плагином для jqPlot и поэтому подключается последним. Кстати, именно с его помощью мы делаем график редактируемым.
Теперь нам нужно написать скрипт, который создаст график (строки 24-41).
В начале мы создаём массив с точками и сохраняем его в переменной data.
После этого, с помощью метода jqplot строим график. В первом параметре передаём id блока в который нужно поместить график, во втором – массив с данными, в третьем – объект с настройками.
Настроек, конечно, очень много. Я даже не буду пытаться перечислять их, для этого существует документация. В данном случае указаны только название графика (строка 27) и форматы осей (строки 31 и 36).
formatString: '%.1f' означает, что значение будет показано с точностью до одного знака после запятой.
Всё. График готов!
Всем, кого заинтересовала эта библиотека очень рекомендую посмотреть демонстрационные примеры на сайте jqPlot. Уверен, вы найдете много интересного 
До встречи!
Понравилась статья? Подписывайтесь на продолжение 
!
Или на мой твиттер 
Добавьте эту страницу в 
Опубликовано в HTML, JavaScript, Web разработка Комментарии (15) »
Комментарии (15)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Прикольно, редактируемые графики – не видел ещё такого (-: да ещё на жабаскрипте (-:
всё-таки жабаскрипт мне ближе и понятнее флеша (-:
Выглядит красиво, но так сходу и не придумаешь зачем может понадобиться редактируемый график.
Хотя, при желании, можно что-нибудь необычное придумать.
Использую Open Flash Chart (http://teethgrinder.co.uk/open-flash-chart/). Пока все устраивает.
Не вижу смысла в возможности редактирования.
Open Flash Chart хорош, сам когда-то использовал, но уже давно доступна новая версия – Open Flash Chart 2, в которой автор таки перешел на использование JSON'а (http://teethgrinder.co.uk/open-flash-chart-2/).
Ну а смысл в возможности редактирования есть при создании визивига для построения диаграмм
С редактированием всё просто. Оно либо нужно, либо нет
Если не нужно, то и добавлять его поддержку нет смысла, лучше выбрать библиотеку размером по-меньше, без возможно редактирования.
https://developer.mozilla.org/ru/%D0%9E%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_canvas
https://developer.mozilla.org/en/Canvas_tutorial (побольше информации, но на англ.)
+ познания в js (+ vml сами знаете для чего) и можно будет не такие вещи творить
Это пример того, что войдет в html5 и скорее всего потеснит флеш/сильверлайт (если еще теги видео/аудио и svg приплюсовать, то и вовсе вытеснит).
Да на просто красота,хороший пост!
Про jQuery раньше слышал, а вот про jPlot первый раз от вас услышал, отличная статья, думаю многим пригодится, тем более использовать его довольно легко.
Самое то для чиновников! Под каждую проверку можно все подредактировать так "как нужно".
В данном случае можно график сделать, чтобы сразу в одном графике было две синусоиды, для вывода графиков о сравнении категорий людей, одни из которых употребляли лекарство, а другие нет ? И вставить его в пост на cms wordpress. Не поможете ?
Сделать так вполне возможно. Правда я бы вставлял в пост скриншот графика. Не очень правильно грузить посетителям js библиотеку когда нужно показать только один график, который не изменяется.
Давайте сделаем так. Вы создадите график по этой инструкции, а если будут проблемы с подключением к WP я помогу разобраться.
Но ведь это приведет к задержкам загрузки страниц.
К задержке загрузки страницы приведет любая информация, размещенная на ней. Т.е. быстрее всего загрузится пустая страница
Поэтому вам решать нужен график или нет. Очень часто график намного предпочтительнее для посетителя чем цифры в таблице
Вопрос, а есть ли на jQuery или JavaScript (бесплатная) библиотека для создания измерительных приборов? Примерно, как здесь – http://www.maani.us/gauge/index.php?menu=Gallery ?
И ещё небольшой вопрос, как сделать в JavaScript наложение одного изображения на другое, в зависимости от параметров (точка начала (x1,y1) на исходном изображении точка до куда заполнить (x2,y2) с прозрачностью) ?