Rickshaw Graphs, или графики тепеь и на JavaScript

Добрый вечер!

Как-то вечером раздумывая о подключении графиков к сайту, невзначай нашел интересную библиотеку под названием Rickshaw.

В чем плюсы данного решения?

• Рисует самые разнообразные графики: от кривых, до интерактивных с историей.
• Имеет открытый исходный код, а это значит что мы можем посмотреть как устроено это все и даже поучаствовать там.

Так как его использовать?

На самом деле все довольно просто, так как Rickshaw основан на D3 (конкретней про него написано тут), что обязует нас подключить его на своей страничке. Возьмем к примеру популяцию населения США с 1910 года до 2010 года.

<!doctype>
<script src="../vendor/d3.min.js"></script>
<script src="../vendor/d3.layout.min.js"></script>
<script src="../rickshaw.min.js"></script>

<div id="chart"></div>

<script>

var data = [ { x: 1910, y: 92228531 }, { x: 1920, y: 106021568 }, { x: 1930, y: 123202660 }, { x: 1940, y: 132165129 }, { x: 1950, y: 151325798 }, { x: 1960, y: 179323175 }, { x: 1970, y: 203211926 }, { x: 1980, y: 226545805 }, { x: 1990, y: 248709873 }, { x: 2000, y: 281421906 }, { x: 2010, y: 308745538 } ];

var graph = new Rickshaw.Graph( {
        element: document.querySelector("#chart"),
        width: 580,
        height: 250,
        series: [ {
                color: 'steelblue',
                data: data
        } ]
} );

graph.render();

</script>

Что у нас получилось можно глянуть здесь.

В данном примере мы можем увидеть, что x — это год, а y — в свою очередь это население. Просто, не так ли?
Инициализацией графика занимается функция Rickshaw.Graph(), далее идет тип элемента, ширина, высота, цвет и данные.

На этом краткий обзор закончу парой полезных ссылок:

• Исходный код: Github
• Другие виды графиков: тут