Chartkick-ex

Create beautiful Javascript charts with one line of Elixir.

Also available in Ruby, Python and pure JavaScript.

Line chart

Loading...


<% datetime_data = Poison.encode!(%{"2013-02-10 00:00:00 -0800": 11, ... }) %>
<%= raw Chartkick.line_chart datetime_data %>

Pie chart

Loading...
<% fruit_data = Poison.encode!([["Blueberry",44], ...]) %>
<%= raw Chartkick.pie_chart fruit_data %>

Column chart

Loading...
<% col_data = Poison.encode!([[0, 32], [1, 46], ...]) %>
<%= raw Chartkick.column_chart col_data %>

Bar chart

Loading...
<% bar_data = Poison.encode!([["X-Small", 5], ...]) %>
<%= raw Chartkick.bar_chart bar_data %>

Area chart

Loading...
<% area_data = Poison.encode!(%{"2013-07-27 07:00:00 UTC": 2, ... }) %>
<%= raw Chartkick.bar_chart area_data %>

Geo chart

Loading...
<% geo_data = Poison.encode!([["United States", 101], ["Russia", 63], ...]) %>
<%= raw Chartkick.bar_chart geo_data %>

Timeline

Loading...
<% timeline_data = Poison.encode!([["Washington", "1789-04-29", "1797-03-03"]], ...]) %>
<%= raw Chartkick.timeline timeline_data %>

Multi line series

Loading...
<% first_line_data = %{"name": "Eat breakfast", "data": %{ "2013-02-10 00:00:00 -0800": 3, ... }} %>
<% second_line_data = %{"name": "Call parents", "data": %{ "2013-02-10 00:00:00 -0800": 5, ... }} %>
<% series_data = Poison.encode!(%{[first_line_data, second_line_data]}) %>
<%= raw Chartkick.line_chart series_data %>

By @buren