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

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

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

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

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

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

На самом деле все довольно просто, так как Rickshaw основан на D3 (конкретней про него написано тут ^[1]), что обязует нас подключить его на своей страничке. Возьмем к примеру популяцию населения США с 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>

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

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

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

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