Chartkick.js

Create beautiful Javascript charts with minimal code.

See it in action

Supports Google Charts and Highcharts and works with most browsers (including IE 6)

Server-side Integration

• Ruby
• Python

I would love to see this implemented in other languages too!!

Usage

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);

Say Goodbye To Timeouts

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.

Options

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});

You can pass options directly to the charting library with:

new Chartkick.LineChart("chart-1", data, {"library": {"backgroundColor": "pink"}});

Data

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]]);

Installation

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+

Localization

To specify a language for Google Charts, add:

<script>
  var Chartkick = {"language": "de"};
</script>

before the javascript files.

Adapter

If both Google Charts and Highcharts are loaded, choose between them with:

new Chartkick.LineChart("chart-1", data, {"adapter": "google"}); // or highcharts

Examples

To run the files in the examples directory, you'll need a web server. Run:

python -m SimpleHTTPServer

and visit http://localhost:8000/examples/

Credits

Chartkick uses iso8601.js to parse dates and times.

History

View the changelog

Chartkick.js follows Semantic Versioning

Contributing

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