Create beautiful Javascript charts with minimal code
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
config Initial commit Sep 30, 2015
lib Add option to defer chart creation until after page load Sep 30, 2018
test Add more tests for chart options Sep 30, 2018
.gitignore Add build files to gitignore Mar 11, 2018
.travis.yml Add TravisCI configuration & README badge Sep 30, 2018
CHANGELOG.md Bump version from 0.2.0 to 0.3.0 Sep 30, 2018
LICENSE Add LICENSE file (MIT) Aug 2, 2018
README.md
mix.exs Bump version from 0.2.0 to 0.3.0 Sep 30, 2018
mix.lock

README.md

Chartkick Build Status

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.

Any feedback, suggestions or comments please open an issue or PR.

Charts

All charts expect a JSON string.

data = Poison.encode!([[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 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\"]
]"

Say Goodbye To Timeouts

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.

Options

ℹ️ This implementation aims to support all options that chartkick.js supports. If there are any missing, please open an issue or a PR.

Id, width and height

Chartkick.line_chart data, id: "users-chart", height: "500px", width: "50%"

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"

Straight lines between points instead of a curve

Chartkick.line_chart data, curve: false

Hide points

Chartkick.line_chart data, points: false

Show or hide legend

Chartkick.line_chart data, legend: false

Specify legend position

Chartkick.line_chart data, legend: "bottom"

Defer chart creation until after the page loads

Chartkick.line_chart data, defer: true

Donut chart

Chartkick.pie_chart data, donut: true

Prefix, useful for currency - Chart.js, Highcharts

Chartkick.line_chart data, prefix: "$"

Suffix, useful for percentages - Chart.js, Highcharts

Chartkick.line_chart data, suffix: "%"

Set a thousands separator - Chart.js, Highcharts

Chartkick.line_chart data, decimal: ","

Show a message when data is empty

Chartkick.line_chart data, messages: %{ empty: "My message.."}

Refresh data from a remote source every n seconds

Chartkick.line_chart data, refresh: 60

You can pass options directly to the charting library with:

Chartkick.line_chart data, library: %{ backgroundColor: "#eee" }

See the documentation for Google Charts and Highcharts for more info.

To customize datasets in Chart.js, use:

Chartkick.line_chart data, dataset: %{ borderWidth: 10 }

Data

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
}"

Installation

Add the following to your project :deps list:

{:chartkick, "~>0.3.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.

line_chart data, id: "my-line-chart", only: :html
line_chart data, 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, 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>
  var Chartkick = {"language": "de"};
</script>

before the javascript files.

No Elixir? 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: