RGraph - графическая библиотека HTML5 canvas для построения графиков



RGraph — js библиотека, с помощью которой можно быстро и удобно строить графики и диаграммы на html5 canvas. Из особенностей можно выделить интеграцию c server-side скриптами и дополнительные возможности вроде zoom, tooltips и пр. Виды графиков:

  • круговые
  • столбиковые(вертик. и горизонтальные)
  • цилиндрические
  • кольцевые
  • линейные
  • диаграмма Gantt'a
  • в виде прогрес бара и др.

Поддерживается браузерами:

  • Mozilla Firefox 3.0+
  • Google Chrome 1+
  • Apple Safari 3+
  • Opera 9.5+
  • Microsoft Internet Explorer 8+ (see note)
  • iPhone (text support from iOS v4+)
  • iPad (text support from iOS v4.2+)


Zoom и аннотация



ToolTip

Давайте сделаем первый график


1ый шаг
<script src="RGraph.common.core.js"></script>

<script src="RGraph.common.adjusting.js"></script> <!-- Требуется только для adjusting -->
<script src="RGraph.common.annotate.js"></script>  <!-- Требуется только для annotating -->
<script src="RGraph.common.context.js"></script>   <!-- Требуется только для context menus -->
<script src="RGraph.common.resizing.js"></script>  <!-- Требуется только для resizing -->
<script src="RGraph.common.tooltips.js"></script>  <!-- Требуется только для tooltips -->
<script src="RGraph.common.zoom.js"></script>      <!-- Требуется только для zoom -->

<script src="RGraph.bar.js"></script>              <!-- Требуется только для bar graphs -->
<script src="RGraph.bipolar.js"></script>          <!-- Требуется только для bi-polar graphs -->
<script src="RGraph.funnel.js"></script>           <!-- Требуется только для funnel charts -->
<script src="RGraph.gantt.js"></script>            <!-- Требуется только для gantt charts -->
<script src="RGraph.hbar.js"></script>             <!-- Требуется только для horizontal bar charts -->
<script src="RGraph.hprogress.js"></script>        <!-- Требуется только для horizontal progress bars -->
<script src="RGraph.led.js"></script>              <!-- Требуется только для LED charts -->
<script src="RGraph.line.js"></script>             <!-- Требуется только для line graphs -->
<script src="RGraph.meter.js"></script>            <!-- Требуется только для meter charts -->
<script src="RGraph.odo.js"></script>              <!-- Требуется только для odometers -->
<script src="RGraph.pie.js"></script>              <!-- Требуется только для pie AND donut charts -->
<script src="RGraph.rose.js"></script>             <!-- Требуется только для rose charts -->
<script src="RGraph.rscatter.js"></script>         <!-- Требуется только для rscatter charts -->
<script src="RGraph.scatter.js"></script>          <!-- Требуется только для scatter graphs -->
<script src="RGraph.tradar.js"></script>           <!-- Требуется только для traditional radar charts -->
<script src="RGraph.vprogress.js"></script>        <!-- Требуется только для vertical progress bars -->


Инклюдим Js, примечательно то что, если вы используете только один тип графика, то и инклюдить вам нужно будет только его библиотеку и core(ядро). Так же если хотите добавить аннотацию либо подсказку, вам нужно будет подключить и его библиотеку.

2ой шаг
<canvas id="myCanvas" width="600" height="250">[No canvas support]</canvas>


Собственно вставляем код самого графика, туда где он должен быть расположен.

3ий шаг
<script>
    window.onload = function ()
    {
        var data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89];

        var bar = new RGraph.Bar('myCanvas', data);
        bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
        bar.Set('chart.gutter', 35);
        bar.Draw();
    }
</script>

Определяем свойства нашего графика и что он будет отображать, в данном случае динамику помесячно. Все

Результат

Docs

3 комментария

avatar
Круто. Ожидал нечто подобное в ближайшее время, но минус в том, что не даёт сохранить как картинку. Это было бы реально полезной функцией.
  • huze
  • +1
avatar
Да, еще бы экспорт в xml не помешал бы, надеюсь библиотека будет развиваться
avatar
Спасибо за статью ) Как раз хотел что нить подобное. Думал уже на HTML чистом делать ))
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.