Current section
7 Versions
Jump to
Current section
7 Versions
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, |