Create beautiful Javascript charts with minimal code.
Supports Google Charts and Highcharts and works with most browsers (including IE 6)
I would love to see this implemented in other languages too!!
Create a div for the chart
<div id="chart-1" style="height: 300px;"></div>Line chart
new Chartkick.LineChart("chart-1", {"2013-02-10 00:00:00 -0800": 11, "2013-02-11 00:00:00 -0800": 6});Pie chart
new Chartkick.PieChart("chart-1", [["Blueberry", 44],["Strawberry", 23]]);Column chart
new Chartkick.ColumnChart("chart-1", [["Sun", 32],["Mon", 46],["Tue", 28]]);Bar chart
new Chartkick.BarChart("chart-1", [["Work", 32],["Play", 1492]]);Area chart
new Chartkick.AreaChart("chart-1", {"2013-02-10 00:00:00 -0800": 11, "2013-02-11 00:00:00 -0800": 6});Multiple series (except pie chart)
data = [
{"name":"Workout", "data": {"2013-02-10 00:00:00 -0800": 3, "2013-02-17 00:00:00 -0800": 4}},
{"name":"Call parents", "data": {"2013-02-10 00:00:00 -0800": 5, "2013-02-17 00:00:00 -0800": 3}}
];
new Chartkick.LineChart("chart-1", data);Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.
new Chartkick.LineChart("chart-1", "/stocks");Note: This feature requires jQuery at the moment.
Min and max values (except pie chart)
new Chartkick.LineChart("chart-1", {"Football": 45, "Soccer": 56}, {"min": 1000, "max": 5000});You can pass options directly to the charting library with:
new Chartkick.LineChart("chart-1", {"Football": 45, "Soccer": 56}, {"library": {"backgroundColor": "pink"}});Pass data as a Hash or Array
new Chartkick.PieChart("chart-1", {"Blueberry": 44, "Strawberry": 23});
new Chartkick.PieChart("chart-1", [["Blueberry", 44],["Strawberry", 23]]);Times can be a Date, a timestamp, or a string (strings are parsed)
new Chartkick.LineChart("chart-1", [[new Date(), 5],[1368174456, 4],["2013-05-07 00:00:00 UTC", 7]]);For Google Charts, use:
<script src="//www.google.com/jsapi"></script>
<script src="chartkick.js"></script>If you prefer Highcharts, use:
<script src="/path/to/highcharts.js"></script>
<script src="chartkick.js"></script>Works with Highcharts 2.1+
To run the files in the examples directory, you'll need a web server. Run:
python -m SimpleHTTPServerand visit http://localhost:8000/examples/
Chartkick uses iso8601.js to parse dates and times.
View the changelog
Chartkick.js follows Semantic Versioning
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent