Делаем графики при помощи jQuery
Дорогие читатели, прошу меня извинить, долго не писал — отдыхал на природе: шашлычки, банька, солнышко, позитив, романтика :-)
Будем наверстывать!
Сегодня я расскажу о библиотеки для построения простеньких графиков при помощи jQuery.
Для этого мы будем использовать небольшое(в сравнении с аналогами) дополнение «fgCharting», который использует canvas для рисования графиков.
Для начала, создадим таблицу с необходимыми данными:
<table id="dataTable" summary="Member Data from 2000 to 2006">
<caption>Member Data from 2000 to 2006</caption>
<thead>
<tr>
<td></td>
<th id="2000">2000</th>
<th id="2001">2001</th>
<th id="2002">2002</th>
<th id="2003">2003</th>
<th id="2004">2004</th>
<th id="2005">2005</th>
<th id="2006">2006</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<th headers="members">Mary</th>
<td headers="2000">150</td>
<td headers="2001">160</td>
<td headers="2002">40</td>
<td headers="2003">120</td>
<td headers="2004">30</td>
<td headers="2005">70</td>
<td headers="2006">70</td>
</tr>
<tr>
<th headers="members">Tom</th>
<td headers="2000">3</td>
<td headers="2001">40</td>
<td headers="2002">30</td>
<td headers="2003">45</td>
<td headers="2004">35</td>
<td headers="2005">49</td>
<td headers="2006">70</td>
</tr>
<tr>
<th headers="members">Brad</th>
<td headers="2000">10</td>
<td headers="2001">00</td>
<td headers="2002">10</td>
<td headers="2003">85</td>
<td headers="2004">25</td>
<td headers="2005">79</td>
<td headers="2006">70</td>
</tr>
<tr>
<th headers="members">Kate</th>
<td headers="2000">40</td>
<td headers="2001">80</td>
<td headers="2002">90</td>
<td headers="2003">25</td>
<td headers="2004">15</td>
<td headers="2005">119</td>
<td headers="2006">200</td>
</tr>
</tbody>
</table>Теперь создадим сам график:
<canvas id="chart1" class="fgCharting_src-dataTable_type-pie"></canvas>Нужно обратить внимание на строчку class="fgCharting_src-dataTable_type-pie" именно в ней настраивается наш график, таким образом fgCharting_src-ID таблицы_type-Тип графика.
Сама функция вызывается, таким образом:
$.fgCharting();Вот и всё!
Подводный камень
Проблема, как многие уже догадались, в нашем любимом Internet Explorer’е который не умеет работать с canvas, гореть ему в аду.
Решение этой проблемы в маленьком JavaScript’е — ExplorerCanvas, который добавляет поддержку canvas.
СПасиба!
я эту штуку немного под себя переделал -)
люди а обьясните почему тут нету готового нтмл текста ?
Хреново, штука пытается выпрямить график по значениям (типа закруглений но тупое)!
А линейные графики может строить эта штука ? Или «барные» например …
Чуть переделал, рисует почти все виды диаграм.
Хорошо работает на моем сайте
недавно написал подобный плагин, графики строятся на HTML5 если кому то интересно вот ссылка