Построение диаграмм и графиков с помощью jQuery Visualize

Статья от 08.07.09 в категории jQuery
Теги: jQuery, vizualize, графики, диаграммы

jQuery Visualize Plugin это, вероятно, самый простой способ построения графиков и диаграмм из таблицы HTML с помощью HTML5 canvas. Плагин достаточно гибко настраивается. Кроме того jQuery Visualize полностью протестирован в IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 и 4, Opera 9.
cover
Посмотреть пример Cкачать архив

Создать график или диаграмму с помощью jQuery Visualize очень просто. Для начала вам нужно создать таблицу, используя заголовки столбцов (это важно).
Например так:

<table >
	<caption>Стоимость услуг веб-студий моего города</caption>
	<thead>
		<tr>
			<td></td>
			<th>сайт-визитка</th>
			<th>корпоративный сайт</th>
			<th>интернет-магазин</th>
			<th>поддержка</th>
			<th>хостинг</th>
			<th>продвижение</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Моя студия</th>
			<td>10</td>
			<td>30</td>
			<td>70</td>
			<td>5</td>
			<td>3</td>
			<td>10</td>
		</tr>
		<tr>
			<th>Р*МЕДИЯ</th>
			<td>19</td>
			<td>50</td>
			<td>90</td>
			<td>6</td>
			<td>3</td>
			<td>15</td>
		</tr>
		<!-- и так далее -->
	</tbody>
</table>

Подключить нужные файлы:

<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
 <!--[if IE]>
  <script type="text/javascript" src="excanvas.compiled.js"></script>
 <![endif]-->
<script type="text/javascript" src="js/visualize.jQuery.js"></script>
<script type="text/javascript" src="js/editabletable.js"></script>

и вызвать метод visualize() например так:

$('table').visualize();

Ниже таблицы будет построен соответствующий график/диаграмма. Кроме того ячейки таблицы можно редактировать.

Плагин разработан Filament Group.
Дополнительную информацию о jQuery Visualize вы можете найти
на сайте плагина.

Посмотреть пример Cкачать архив

Подпишись на обновления

Если вам понравилась статья, подпишитесь на обновления через RSS (?), чтобы не пропустить новые интересные статьи. Также Вы можете зафолловить меня в Twitter или подписаться на обновления по email.

Закладки

111
24/07/09 в 15:24

Установил все значения = 5…
В вертикальной шкале последние значения стали 5 – 5 (т.е. повтор)

а так очень даже прикольно.
Иван
24/09/09 в 15:07

Всё отлично, супер, спасибо!

Единственное – в коде и в архиве неправильно прописан путь для файла для IE

Вот так работает

Обязательно воспользуюсь
Креативщик
22/12/09 в 20:02

Пожалуй лучший способ построить график из тех что я нашёл…

Надо только проверить как он будет реагировать на динамически созданную таблицу значений..
dima
15/03/10 в 11:27

спасибо, очень полезнаяи инфомрация!
dima
20/07/10 в 11:43

мне больше понравились вот эти граифики и диаграммы
http://www.jscharts.com/home
Dzantiev
31/07/11 в 15:14

недавно написал подобный плагин, графики строятся на HTML5 если кому то интересно вот ссылка graph.prootime.ru

Оставить комментарий

Подпишись на обновления
через rss или email.

WEBduty.ru css html javascript jquery