Docker>> chartkick-ex>> 返回
项目作者： buren

项目描述 ：
Create beautiful Javascript charts with minimal code
高级语言： Elixir
项目地址: git://github.com/buren/chartkick-ex.git
创建时间： 2015-10-03T13:54:27Z
项目社区：https://github.com/buren/chartkick-ex
开源协议：MIT License
下载


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.

  1. raw_data = [[175, 60], [190, 80], [180, 75]]
  2. data = Poison.encode!(raw_data)
  3. # or if you are using Jason
  4. data = Jason.encode!(raw_data)

Line chart

  1. Chartkick.line_chart data

Pie chart

  1. Chartkick.pie_chart data

Column chart

  1. Chartkick.column_chart data

Bar chart

  1. Chartkick.bar_chart data

Area chart

  1. Chartkick.area_chart data

Scatter chart

  1. Chartkick.scatter_chart data

Geo chart

  1. Chartkick.geo_chart Poison.encode!("[[\"United States\",44],[\"Germany\",23]]")
  2. # or if you are using Jason
  3. Chartkick.geo_chart Jason.encode!("[[\"United States\",44],[\"Germany\",23]]")

Timeline

  1. Chartkick.timeline "[
  2.   [\"Washington\", \"1789-04-29\", \"1797-03-03\"],
  3.   [\"Adams\", \"1797-03-03\", \"1801-03-03\"],
  4.   [\"Jefferson\", \"1801-03-03\", \"1809-03-03\"]
  5. ]"

Say Goodbye To Timeouts

Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.

  1. Chartkick.line_chart "/path/to/chart.json"

And respond with data as JSON.

Options

:informationsource: _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

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

Min and max values

  1. 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

  1. Chartkick.line_chart data, colors: ["pink", "#999"]

Stacked columns or bars

  1. Chartkick.column_chart data, stacked: true

Discrete axis

  1. Chartkick.line_chart data, discrete: true

Axis titles

  1. Chartkick.line_chart data, xtitle: "Time", ytitle: "Population"

Straight lines between points instead of a curve

  1. Chartkick.line_chart data, curve: false

Hide points

  1. Chartkick.line_chart data, points: false

Show or hide legend

  1. Chartkick.line_chart data, legend: false

Specify legend position

  1. Chartkick.line_chart data, legend: "bottom"

Donut chart

  1. Chartkick.pie_chart data, donut: true

Prefix, useful for currency - Chart.js, Highcharts

  1. Chartkick.line_chart data, prefix: "$"

Suffix, useful for percentages - Chart.js, Highcharts

  1. Chartkick.line_chart data, suffix: "%"

Set a thousands separator - Chart.js, Highcharts

  1. Chartkick.line_chart data, thousands: ","

Set a decimal separator - Chart.js, Highcharts

  1. Chartkick.line_chart data, decimal: ","

Show insignificant zeros, useful for currency - Chart.js, Highcharts

  1. Chartkick.line_chart data, round: 2, zeros: true

Show a message when data is empty

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

Refresh data from a remote source every n seconds

  1. Chartkick.line_chart data, refresh: 60

You can pass options directly to the charting library with:

  1. 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:

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

Data

Pass data as a JSON string.

  1. Chartkick.pie_chart "{\"Football\" => 10, \"Basketball\" => 5}"
  2. Chartkick.pie_chart "[[\"Football\", 10], [\"Basketball\", 5]]"

For multiple series, use the format

  1. Chartkick.line_chart "[
  2.   {name: \"Series A\", data: []},
  3.   {name: \"Series B\", data: []}
  4. ]"

Times can be a time, a timestamp, or a string (strings are parsed)

  1. Chartkick.line_chart "{
  2.   1368174456 => 4,
  3.   \"2013-05-07 00:00:00 UTC\" => 7
  4. }"

Installation

You need to set JSON encoder in your config file. This encoder
is used to encode options passed to Chartkick.

  1. # config.exs
  2. 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.

  1. line_chart data, id: "my-line-chart", only: :html
  2. line_chart data, id: "my-line-chart", only: :script

For Google Charts, use:

  1. <script src="//www.google.com/jsapi"></script>
  2. <script src="path/to/chartkick.js"></script>

If you prefer Highcharts, use:

  1. <script src="/path/to/highcharts.js"></script>
  2. <script src="path/to/chartkick.js"></script>

Localization

To specify a language for Google Charts, add:

  1. <script>
  2.   var Chartkick = {"language": "de"};
  3. </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: