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});
Geo chart
new Chartkick.GeoChart("chart-1", [["United States",44],["Germany",23],["Brazil",22]]);
Timeline
new Chartkick.Timeline("chart-1", [["Washington", "1789-04-29", "1797-03-03"],["Adams", "1797-03-03", "1801-03-03"]]);
Multiple series
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 or Zepto at the moment.
Min and max values
new Chartkick.LineChart("chart-1", data, {"min": 1000, "max": 5000});
min
defaults to 0 for charts with non-negative values. Use null
to let the charting library decide.
Colors
new Chartkick.LineChart("chart-1", data, {"colors": ["pink", "#999"]});
Stacked columns or bars
new Chartkick.ColumnChart("chart-1", data, {"stacked": true});
Discrete axis
new Chartkick.LineChart("chart-1", data, {"discrete": true});
Preferred adapter
new Chartkick.LineChart("chart-1", data, {"adapter": "google"});
adapter
defaults to what you have loaded in the page. If both Highcharts and Google Charts are loaded, use this parameter to choose between either 'google' or 'highcharts' adapater.
You can pass options directly to the charting library with:
new Chartkick.LineChart("chart-1", data, {"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 specify a language for Google Charts, add:
<script>
var Chartkick = {"language": "de"};
</script>
before the javascript files.
To run the files in the examples
directory, you'll need a web server. Run:
python -m SimpleHTTPServer
and visit http://localhost:8000/examples/
Chartkick uses iso8601.js to parse dates and times.
View the changelog
Chartkick.js follows Semantic Versioning
Everyone is encouraged to help improve this project. Here are a few ways you can help:
- Report bugs
- Fix bugs and submit pull requests
- Write, clarify, or fix documentation
- Suggest or add new features