Create beautiful Javascript charts with one line of Elixir. No more fighting with charting libraries!
See it in action, you can find the example phoenix app that generates that page here.
Works with Phoenix, plain Elixir and most browsers (including IE 6).
I'm very new to Elixir, so if you have any feedback, suggestions or comments please open an issue or PR!
All charts expect a JSON string.
data = Poison.encode!([[175, 60], [190, 80], [180, 75]])Line chart
Chartkick.line_chart dataPie chart
Chartkick.pie_chart dataColumn chart
Chartkick.column_chart dataBar chart
Chartkick.bar_chart dataArea chart
Chartkick.area_chart dataScatter chart
Chartkick.scatter_chart dataGeo chart
Chartkick.geo_chart Poison.encode!("[[\"United States\",44],[\"Germany\",23]]")Timeline
Chartkick.timeline "[
[\"Washington\", \"1789-04-29\", \"1797-03-03\"],
[\"Adams\", \"1797-03-03\", \"1801-03-03\"],
[\"Jefferson\", \"1801-03-03\", \"1809-03-03\"]
]"Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.
Chartkick.line_chart "/path/to/chart.json"And respond with data as JSON.
Id and height
Chartkick.line_chart data, id: "users-chart", height: "500px"Min and max values
Chartkick.line_chart data, min: 1000, max: 5000min defaults to 0 for charts with non-negative values. Use nil to let the charting library decide.
Colors
Chartkick.line_chart data, colors: ["pink", "#999"]Stacked columns or bars
Chartkick.column_chart data, stacked: trueDiscrete axis
Chartkick.line_chart data, discrete: trueAxis titles
Chartkick.line_chart data, xtitle: "Time", ytitle: "Population"The current implementation does unfortunately not allow you to pass options directly to the charting library yet.. PRs are welcome!
See the documentation for Google Charts and Highcharts for more info.
Pass data as a JSON string.
Chartkick.pie_chart "{\"Football\" => 10, \"Basketball\" => 5}"
Chartkick.pie_chart "[[\"Football\", 10], [\"Basketball\", 5]]"For multiple series, use the format
Chartkick.line_chart "[
{name: \"Series A\", data: []},
{name: \"Series B\", data: []}
]"Times can be a time, a timestamp, or a string (strings are parsed)
Chartkick.line_chart "{
1368174456 => 4,
\"2013-05-07 00:00:00 UTC\" => 7
}"Add the following to your project :deps list:
{:chartkick, "~>0.0.2"}By default when you render a chart it will return both the HTML-element and JS that initializes the chart.
This will only work if you load Chartkick in the <head> tag.
You can chose to render the JS & HTML separately using the only: :html or only: :script option.
Note that if you use those options you need to pass id otherwise it wont work.
line_chart data, id: "my-line-chart", only: :html
line_chart data, id: "my-line-chart", only: :scriptFor Google Charts, use:
<script src="//www.google.com/jsapi"></script>
<script src="path/to/chartkick.js"></script>If you prefer Highcharts, use:
<script src="/path/to/highcharts.js"></script>
<script src="path/to/chartkick.js"></script>To specify a language for Google Charts, add:
<script>
var Chartkick = {"language": "de"};
</script>before the javascript files.
Check out
- JS chartkick.js
- Ruby chartkick
- Python chartkick.py
View the changelog
Chartkick 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent