Chartkick
Create beautiful Javascript charts with one line of Clojure. No more fighting with charting libraries!
Any feedback, suggestions, comments or PRs are welcome.
Charts
(require '[chartkick.core :as chartkick])
(def data [[175 60] [190 80] [180 75]])
Line chart
(chartkick/line-chart data)Pie chart
(chartkick/pie-chart data)Column chart
(chartkick/column-chart data)Bar chart
(chartkick/bar-chart data)Area chart
(chartkick/area-chart data)Scatter chart
(chartkick/scatter-chart data)Geo chart
(chartkick/geo-chart [["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"]])Options
Id and height
(chartkick/line-chart data {:id "the-chart-id" :height "500px"})Min and max values
(chartkick/line-chart data {:min 1000 :max 5000})
min 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 true})Discrete axis
(chartkick/line-chart data {:discrete true})Axis 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.
Data
Pass data as a Map or Array
(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 [["Football" 10] ["Basketball" 5]] }
{:name "Series B", :data [["Baseball" 2] ["Pingpong" 3]]}])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
(new java.util.Date) 10})Installation
Add the following to your project :deps list:
[chartkick "0.1.0"]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.
(chartkick/line-chart [] {:id "my-line-chart" :only :html})
(chartkick/line-chart [] {:id "my-line-chart" :only :script})For Google Charts, use:
<script src="//www.google.com/jsapi"></script>
<script src="/path/to/chartkick.js"></script>If you prefer Highcharts, download highcharts.js and use:
<script src="/path/to/highcharts.js"></script>
<script src="/path/to/chartkick.js"></script>Localization
To specify a language for Google Charts, add:
<script>
Chartkick.configure({language: "de"});
</script>after the JavaScript files and before your charts.
JavaScript API
Access a chart with:
var chart = Chartkick.charts["chart-id"];Get the underlying chart object with:
chart.getChartObject();You can also use:
chart.getElement();
chart.getData();
chart.getOptions();No Clojure? No Problem
Check out
- JS chartkick.js
- Ruby chartkick
- Python chartkick.py
History
View the changelog
Chartkick 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