buren / Chartkick Ex
Programming Languages
Labels
Projects that are alternatives of or similar to Chartkick Ex
Chartkick 
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.
raw_data = [[175, 60], [190, 80], [180, 75]]
data = Poison.encode!(raw_data)
# or if you are using Jason
data = Jason.encode!(raw_data)
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]]")
# or if you are using Jason
Chartkick.geo_chart Jason.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
You need to set JSON encoder in your config file. This encoder is used to encode options passed to Chartkick.
# config.exs
config :chartkick, json_serializer: Jason
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:
- Report bugs
- Fix bugs and submit pull requests
- Write, clarify, or fix documentation
- Suggest or add new features