Packages

Create beautiful JavaScript charts with one line of Elixir

Current section

7 Versions

Jump to

Compare versions

5 files changed
+111 additions
-15 deletions
  @@ -1,5 +1,9 @@
1 1 ### HEAD
2 2
3 + ### 0.4.0
4 +
5 + * JSON serializer can be optionally configured in Aplication env
6 +
3 7 ### 0.3.0
4 8
5 9 * Support `defer` option [PR#8](https://github.com/buren/chartkick-ex/pull/8)
  @@ -120,10 +120,86 @@ Axis titles
120 120 Chartkick.line_chart data, xtitle: "Time", ytitle: "Population"
121 121 ```
122 122
123 - The current implementation does unfortunately not allow you to pass options directly to the charting library yet.. PRs are welcome!
123 + Straight lines between points instead of a curve
124 +
125 + ```elixir
126 + Chartkick.line_chart data, curve: false
127 + ```
128 +
129 + Hide points
130 +
131 + ```elixir
132 + Chartkick.line_chart data, points: false
133 + ```
134 +
135 + Show or hide legend
136 +
137 + ```elixir
138 + Chartkick.line_chart data, legend: false
139 + ```
140 +
141 + Specify legend position
142 +
143 + ```elixir
144 + Chartkick.line_chart data, legend: "bottom"
145 + ```
146 +
147 + Defer chart creation until after the page loads
148 +
149 + ```elixir
150 + Chartkick.line_chart data, defer: true
151 + ```
152 +
153 + Donut chart
154 +
155 + ```elixir
156 + Chartkick.pie_chart data, donut: true
157 + ```
158 +
159 + Prefix, useful for currency - _Chart.js, Highcharts_
160 +
161 + ```elixir
162 + Chartkick.line_chart data, prefix: "$"
163 + ```
164 +
165 + Suffix, useful for percentages - _Chart.js, Highcharts_
166 +
167 + ```elixir
168 + Chartkick.line_chart data, suffix: "%"
169 + ```
170 +
171 + Set a thousands separator - _Chart.js, Highcharts_
172 +
173 + ```elixir
174 + Chartkick.line_chart data, decimal: ","
175 + ```
176 +
177 + Show a message when data is empty
178 +
179 + ```elixir
180 + Chartkick.line_chart data, messages: %{ empty: "My message.."}
181 + ```
182 +
183 + Refresh data from a remote source every `n` seconds
184 +
185 + ```elixir
186 + Chartkick.line_chart data, refresh: 60
187 + ```
188 +
189 + You can pass options directly to the charting library with:
190 +
191 + ```elixir
192 + Chartkick.line_chart data, library: %{ backgroundColor: "#eee" }
193 + ```
124 194
125 195 See the documentation for [Google Charts](https://developers.google.com/chart/interactive/docs/gallery) and [Highcharts](http://api.highcharts.com/highcharts) for more info.
126 196
197 + To customize datasets in Chart.js, use:
198 +
199 + ```elixir
200 + Chartkick.line_chart data, dataset: %{ borderWidth: 10 }
201 + ```
202 +
127 203 ### Data
128 204
129 205 Pass data as a JSON string.
  @@ -156,7 +232,14 @@ Chartkick.line_chart "{
156 232 Add the following to your project :deps list:
157 233
158 234 ```elixir
159 - {:chartkick, "~>0.3.0"}
235 + {:chartkick, "~>0.4.0"}
236 + ```
237 +
238 + Optionally, you can set different JSON encoder, by default it's Poison.
239 + It's used to encode options passed to Chartkick.
240 + ```
241 + # config.exs
242 + config :chartkick, json_serializer: Jason
160 243 ```
161 244
162 245 By default when you render a chart it will return both the HTML-element and JS that initializes the chart.
  @@ -21,4 +21,4 @@
21 21 {<<"optional">>,false},
22 22 {<<"repository">>,<<"hexpm">>},
23 23 {<<"requirement">>,<<"~> 1.1">>}]]}.
24 - {<<"version">>,<<"0.3.0">>}.
24 + {<<"version">>,<<"0.4.0">>}.
  @@ -1,5 +1,11 @@
1 1 defmodule Chartkick do
2 2 require EEx
3 + Module.put_attribute(
4 + __MODULE__,
5 + :poison,
6 + if(Code.ensure_loaded?(Poison), do: Poison, else: nil)
7 + )
8 + @json_serializer Application.get_env(:chartkick, :json_serializer) || @poison
3 9
4 10 gen_chart_fn = fn (chart_type) ->
5 11 def unquote(
  @@ -24,10 +30,10 @@ defmodule Chartkick do
24 30 defer = Keyword.get(options, :defer, false)
25 31 case only do
26 32 :html -> chartkick_tag(id, height, width)
27 - :script -> chartkick_script(klass, id, data_source, options_json(options), defer)
33 + :script -> chartkick_script(klass, id, data_source, options, defer)
28 34 _ -> """
29 35 #{ chartkick_tag(id, height, width) }
30 - #{ chartkick_script(klass, id, data_source, options_json(options), defer) }
36 + #{ chartkick_script(klass, id, data_source, options, defer) }
31 37 """
32 38 end
33 39 end
  @@ -37,13 +43,13 @@ defmodule Chartkick do
37 43 :chartkick_script,
38 44 ~s[<script type="text/javascript">
39 45 <%= if defer do
40 - chartkick_defer_create_js(klass, id, data_source, options_json)
46 + chartkick_defer_create_js(klass, id, data_source, options)
41 47 else
42 - chartkick_create_js(klass, id, data_source, options_json)
48 + chartkick_create_js(klass, id, data_source, options)
43 49 end
44 50 %>
45 51 </script>],
46 - ~w(klass id data_source options_json defer)a
52 + ~w(klass id data_source options defer)a
47 53 )
48 54
49 55 EEx.function_from_string(
  @@ -56,8 +62,8 @@ defmodule Chartkick do
56 62 EEx.function_from_string(
57 63 :def,
58 64 :chartkick_create_js,
59 - ~s[new Chartkick.<%= klass %>('<%= id %>', <%= data_source %>, <%= options_json %>);],
60 - ~w(klass id data_source options_json)a
65 + ~s[new Chartkick.<%= klass %>('<%= id %>', <%= data_source %>, <%= options_json(options) %>);],
66 + ~w(klass id data_source options)a
61 67 )
62 68
63 69 EEx.function_from_string(
  @@ -65,7 +71,7 @@ defmodule Chartkick do
65 71 :chartkick_defer_create_js,
66 72 ~s[
67 73 (function() {
68 - var createChart = function() { <%= chartkick_create_js(klass, id, data_source, options_json) %> };
74 + var createChart = function() { <%= chartkick_create_js(klass, id, data_source, options) %> };
69 75 if (window.addEventListener) {
70 76 window.addEventListener("load", createChart, true);
71 77 } else if (window.attachEvent) {
  @@ -75,15 +81,18 @@ defmodule Chartkick do
75 81 }
76 82 })();
77 83 ],
78 - ~w(klass id data_source options_json)a
84 + ~w(klass id data_source options)a
79 85 )
80 86
81 87 @options ~w(colors curve dataset decimal discrete donut download label legend library max messages min points prefix refresh stacked suffix thousands title xtitle xtype ytitle)a
82 - defp options_json(opts) do
88 + defp options_json(opts) when is_list(opts) do
83 89 opts
84 90 |> Keyword.take(@options)
85 91 |> Enum.into(%{})
86 - |> Poison.encode!()
92 + |> @json_serializer.encode!()
87 93 end
88 94
95 + defp options_json(opts) when is_bitstring(opts) do
96 + opts
97 + end
89 98 end
  @@ -3,7 +3,7 @@ defmodule Chartkick.Mixfile do
3 3
4 4 def project do
5 5 [app: :chartkick,
6 - version: "0.3.0",
6 + version: "0.4.0",
7 7 elixir: "~> 1.0",
8 8 build_embedded: Mix.env == :prod,
9 9 start_permanent: Mix.env == :prod,