Comments:"Chartkick"
URL:http://ankane.github.io/chartkick/
Simplify your admin dashboard - create new charts in seconds!
Works with Rails 3.1+ and most browsers (including IE 6)
A perfect companion to groupdate
Usage
Line chart
Loading...
<%=line_chartUser.group_by_day(:created_at).count%>
Pie chart
Loading...
<%=pie_chartGoal.group("name").count%>
Column chart
Loading...
<%=column_chartTask.group_by_day_of_week(:created_at).count%>
Multiple series (except pie chart)
Loading...
<%=line_chart@goals.map{|goal|{:name=>goal.name,:data=>goal.feats.group_by_week(:created_at).count}}%>
Say Goodbye To Timeouts
Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.
<%=line_chartcompleted_tasks_charts_path%>
And in your controller, pass the data as JSON.
classChartsController<ApplicationControllerdefcompleted_tasksrender:json=>Task.group_by_day(:completed_at).countendend
Note: This feature requires jQuery at the moment.
Options
id and height
<%=line_chartUser.group_by_day(:created_at).count,:id=>"users-chart",:height=>"500px"%>
min and max values (except pie chart)
<%=line_chartUser.group_by_day(:created_at).count,:min=>1000,:max=>5000%>
Note: min defaults to 0 - use :min => nil to allow the chart to choose the minimum.
Data
Pass data as a Hash or Array
<%=pie_chart({"Football"=>10,"Basketball"=>5})%><%=pie_chart[["Football",10],["Basketball",5]]%>
For multiple series, use the format
<%=line_chart[{:name=>"Series A",:data=>series_a},{:name=>"Series B",:data=>series_b}]%>
Times can be a time, a timestamp, or a string (strings are parsed)
<%line_chart({20.day.ago=>5,1368174456=>4,"2013-05-07 00:00:00 UTC"=>7})%>
Installation
Add this line to your application's Gemfile:
And add the javascript files to your views. chartkick.js runs as a Rails engine - no need to install it.
For Google Charts, use:
<%=javascript_include_tag"//www.google.com/jsapi","chartkick"%>
If you prefer Highcharts, use:
<%=javascript_include_tag"path/to/highcharts.js","chartkick"%>
No Ruby? No Problem
Chartkick doesn’t require Ruby.
<script src="/path/to/chartkick.js"></script><divid="chart-1"style="height: 300px;"></div><script>varchart=document.getElementById("chart-1");newChartkick.PieChart(chart,{"Football":45,"Soccer":56,"Basketball":98});// or remotenewChartkick.LineChart(chart,"/charts/stocks");</script>
Download chartkick.js