/chartkick

Create beautiful JavaScript charts with one line of Clojure

Primary LanguageClojureEclipse Public License 1.0EPL-1.0

Chartkick

Chartkick example

Create beautiful Javascript charts with one line of Clojure. No more fighting with charting libraries!

See it in action.

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

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: