govuk_publishing_components 44.4.0 → 44.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/chartkick/LICENSE.txt +22 -0
- data/node_modules/chartkick/README.md +593 -0
- data/node_modules/chartkick/chart.js/chart.esm.js +5 -0
- data/node_modules/chartkick/chart.js/package.json +6 -0
- data/node_modules/chartkick/dist/chartkick.esm.js +2562 -0
- data/node_modules/chartkick/dist/chartkick.js +2570 -0
- data/node_modules/chartkick/dist/chartkick.min.js +2 -0
- data/node_modules/chartkick/highcharts/highcharts.esm.js +4 -0
- data/node_modules/chartkick/highcharts/package.json +6 -0
- data/node_modules/chartkick/package.json +50 -0
- metadata +11 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 03e23c3d08539cc78a6885528be7099e0b51ecb14cf07bbdbba63423efa7dab5
|
|
4
|
+
data.tar.gz: 3c73f4b0792536700425c873c987154e63fd4effa58df6942c9906b0f19fdd81
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 370b141dcced2433adeaefa9a367e1f9d42c3b4df99893849fdbc5e99611bd57cde80aa23f81a6e0833336183239f26da717589c6eb864739bb58eb1beb7b833
|
|
7
|
+
data.tar.gz: 1378a24ec8d2042c698857de2eed671348cb09b42d6a44fcad8bca34433295ff6cf2ad8e6da74468c4d5eedde925f75775a67ff99987eff4f79dabde3662a1d3
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
Copyright (c) 2013-2023 Andrew Kane
|
|
2
|
+
|
|
3
|
+
MIT License
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
6
|
+
a copy of this software and associated documentation files (the
|
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
|
11
|
+
the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be
|
|
14
|
+
included in all copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
@@ -0,0 +1,593 @@
|
|
|
1
|
+
# Chartkick.js
|
|
2
|
+
|
|
3
|
+
Create beautiful charts with one line of JavaScript
|
|
4
|
+
|
|
5
|
+
[See it in action](https://ankane.github.io/chartkick.js/examples/)
|
|
6
|
+
|
|
7
|
+
Supports [Chart.js](https://www.chartjs.org/), [Google Charts](https://developers.google.com/chart/), and [Highcharts](https://www.highcharts.com/)
|
|
8
|
+
|
|
9
|
+
Also available for [React](https://github.com/ankane/react-chartkick), [Vue.js](https://github.com/ankane/vue-chartkick), [Ruby](https://github.com/ankane/chartkick), [Python](https://github.com/mher/chartkick.py), [Elixir](https://github.com/buren/chartkick-ex), and [Clojure](https://github.com/yfractal/chartkick)
|
|
10
|
+
|
|
11
|
+
[](https://github.com/ankane/chartkick.js/actions)
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
Run
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
npm install chartkick chart.js
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
And add
|
|
22
|
+
|
|
23
|
+
```javascript
|
|
24
|
+
import Chartkick from "chartkick"
|
|
25
|
+
import "chartkick/chart.js"
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
This sets up Chartkick with Chart.js. For other charting libraries, see [detailed instructions](#installation).
|
|
29
|
+
|
|
30
|
+
## Charts
|
|
31
|
+
|
|
32
|
+
Create a div for the chart
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<div id="chart" style="height: 300px;"></div>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Line chart
|
|
39
|
+
|
|
40
|
+
```javascript
|
|
41
|
+
new Chartkick.LineChart("chart", {"2021-01-01": 11, "2021-01-02": 6})
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Pie chart
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
new Chartkick.PieChart("chart", [["Blueberry", 44], ["Strawberry", 23]])
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Column chart
|
|
51
|
+
|
|
52
|
+
```javascript
|
|
53
|
+
new Chartkick.ColumnChart("chart", [["Sun", 32], ["Mon", 46], ["Tue", 28]])
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Bar chart
|
|
57
|
+
|
|
58
|
+
```javascript
|
|
59
|
+
new Chartkick.BarChart("chart", [["Work", 32], ["Play", 1492]])
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Area chart
|
|
63
|
+
|
|
64
|
+
```javascript
|
|
65
|
+
new Chartkick.AreaChart("chart", {"2021-01-01": 11, "2021-01-02": 6})
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Scatter chart
|
|
69
|
+
|
|
70
|
+
```javascript
|
|
71
|
+
new Chartkick.ScatterChart("chart", [[174.0, 80.0], [176.5, 82.3], [180.3, 73.6]])
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Geo chart - *Google Charts*
|
|
75
|
+
|
|
76
|
+
```javascript
|
|
77
|
+
new Chartkick.GeoChart("chart", [["United States", 44], ["Germany", 23], ["Brazil", 22]])
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Timeline - *Google Charts*
|
|
81
|
+
|
|
82
|
+
```javascript
|
|
83
|
+
new Chartkick.Timeline("chart", [["Washington", "1789-04-29", "1797-03-03"], ["Adams", "1797-03-03", "1801-03-03"]])
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Multiple series
|
|
87
|
+
|
|
88
|
+
```javascript
|
|
89
|
+
data = [
|
|
90
|
+
{name: "Workout", data: {"2021-01-01": 3, "2021-01-02": 4}},
|
|
91
|
+
{name: "Call parents", data: {"2021-01-01": 5, "2021-01-02": 3}}
|
|
92
|
+
]
|
|
93
|
+
new Chartkick.LineChart("chart", data)
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Multiple series stacked and grouped - *Chart.js or Highcharts*
|
|
97
|
+
|
|
98
|
+
```javascript
|
|
99
|
+
data = [
|
|
100
|
+
{name: "Apple", data: {"Tuesday": 3, "Friday": 4}, stack: "fruit"},
|
|
101
|
+
{name: "Pear", data: {"Tuesday": 1, "Friday": 8}, stack: "fruit"},
|
|
102
|
+
{name: "Carrot", data: {"Tuesday": 3, "Friday": 4}, stack: "vegetable"},
|
|
103
|
+
{name: "Beet", data: {"Tuesday": 1, "Friday": 8}, stack: "vegetable"}
|
|
104
|
+
]
|
|
105
|
+
new Chartkick.BarChart("chart", data, {stacked: true})
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## Data
|
|
109
|
+
|
|
110
|
+
Data can be an array, object, callback, or URL.
|
|
111
|
+
|
|
112
|
+
#### Array
|
|
113
|
+
|
|
114
|
+
```javascript
|
|
115
|
+
new Chartkick.LineChart("chart", [["2021-01-01", 2], ["2021-01-02", 3]])
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
#### Object
|
|
119
|
+
|
|
120
|
+
```javascript
|
|
121
|
+
new Chartkick.LineChart("chart", {"2021-01-01": 2, "2021-01-02": 3})
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
#### Callback
|
|
125
|
+
|
|
126
|
+
```javascript
|
|
127
|
+
function fetchData(success, fail) {
|
|
128
|
+
success({"2021-01-01": 2, "2021-01-02": 3})
|
|
129
|
+
// or fail("Data not available")
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
new Chartkick.LineChart("chart", fetchData)
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
#### URL
|
|
136
|
+
|
|
137
|
+
Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.
|
|
138
|
+
|
|
139
|
+
```javascript
|
|
140
|
+
new Chartkick.LineChart("chart", "/stocks")
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## Options
|
|
144
|
+
|
|
145
|
+
Min and max for y-axis
|
|
146
|
+
|
|
147
|
+
```javascript
|
|
148
|
+
new Chartkick.LineChart("chart", data, {min: 1000, max: 5000})
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
`min` defaults to 0 for charts with non-negative values. Use `null` to let the charting library decide.
|
|
152
|
+
|
|
153
|
+
Min and max for x-axis - *Chart.js*
|
|
154
|
+
|
|
155
|
+
```javascript
|
|
156
|
+
new Chartkick.LineChart("chart", data, {xmin: "2021-01-01", xmax: "2022-01-01"})
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
Colors
|
|
160
|
+
|
|
161
|
+
```javascript
|
|
162
|
+
new Chartkick.LineChart("chart", data, {colors: ["#b00", "#666"]})
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
Stacked columns or bars
|
|
166
|
+
|
|
167
|
+
```javascript
|
|
168
|
+
new Chartkick.ColumnChart("chart", data, {stacked: true})
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
> You can also set `stacked` to `percent` or `relative` for Google Charts and `percent` for Highcharts
|
|
172
|
+
|
|
173
|
+
Discrete axis
|
|
174
|
+
|
|
175
|
+
```javascript
|
|
176
|
+
new Chartkick.LineChart("chart", data, {discrete: true})
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
Label (for single series)
|
|
180
|
+
|
|
181
|
+
```javascript
|
|
182
|
+
new Chartkick.LineChart("chart", data, {label: "Value"})
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
Axis titles
|
|
186
|
+
|
|
187
|
+
```javascript
|
|
188
|
+
new Chartkick.LineChart("chart", data, {xtitle: "Time", ytitle: "Population"})
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
Straight lines between points instead of a curve
|
|
192
|
+
|
|
193
|
+
```javascript
|
|
194
|
+
new Chartkick.LineChart("chart", data, {curve: false})
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
Hide points
|
|
198
|
+
|
|
199
|
+
```javascript
|
|
200
|
+
new Chartkick.LineChart("chart", data, {points: false})
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
Show or hide legend
|
|
204
|
+
|
|
205
|
+
```javascript
|
|
206
|
+
new Chartkick.LineChart("chart", data, {legend: true})
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
Specify legend position
|
|
210
|
+
|
|
211
|
+
```javascript
|
|
212
|
+
new Chartkick.LineChart("chart", data, {legend: "bottom"})
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
Donut chart
|
|
216
|
+
|
|
217
|
+
```javascript
|
|
218
|
+
new Chartkick.PieChart("chart", data, {donut: true})
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
Prefix, useful for currency - *Chart.js, Highcharts*
|
|
222
|
+
|
|
223
|
+
```javascript
|
|
224
|
+
new Chartkick.LineChart("chart", data, {prefix: "$"})
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
Suffix, useful for percentages - *Chart.js, Highcharts*
|
|
228
|
+
|
|
229
|
+
```javascript
|
|
230
|
+
new Chartkick.LineChart("chart", data, {suffix: "%"})
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
Set a thousands separator - *Chart.js, Highcharts*
|
|
234
|
+
|
|
235
|
+
```javascript
|
|
236
|
+
new Chartkick.LineChart("chart", data, {thousands: ","})
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
Set a decimal separator - *Chart.js, Highcharts*
|
|
240
|
+
|
|
241
|
+
```javascript
|
|
242
|
+
new Chartkick.LineChart("chart", data, {decimal: ","})
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
Set significant digits - *Chart.js, Highcharts*
|
|
246
|
+
|
|
247
|
+
```javascript
|
|
248
|
+
new Chartkick.LineChart("chart", data, {precision: 3})
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
Set rounding - *Chart.js, Highcharts*
|
|
252
|
+
|
|
253
|
+
```javascript
|
|
254
|
+
new Chartkick.LineChart("chart", data, {round: 2})
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
Show insignificant zeros, useful for currency - *Chart.js, Highcharts*
|
|
258
|
+
|
|
259
|
+
```javascript
|
|
260
|
+
new Chartkick.LineChart("chart", data, {round: 2, zeros: true})
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
Friendly byte sizes - *Chart.js*
|
|
264
|
+
|
|
265
|
+
```javascript
|
|
266
|
+
new Chartkick.LineChart("chart", data, {bytes: true})
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
Specify the message when the chart is loading
|
|
270
|
+
|
|
271
|
+
```javascript
|
|
272
|
+
new Chartkick.LineChart("chart", data, {loading: "Loading..."})
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
Specify the message when data is empty
|
|
276
|
+
|
|
277
|
+
```javascript
|
|
278
|
+
new Chartkick.LineChart("chart", data, {empty: "No data"})
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
Refresh data from a remote source every `n` seconds
|
|
282
|
+
|
|
283
|
+
```javascript
|
|
284
|
+
new Chartkick.LineChart("chart", url, {refresh: 60})
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
You can pass options directly to the charting library with:
|
|
288
|
+
|
|
289
|
+
```javascript
|
|
290
|
+
new Chartkick.LineChart("chart", data, {library: {backgroundColor: "pink"}})
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
See the documentation for [Chart.js](https://www.chartjs.org/docs/), [Google Charts](https://developers.google.com/chart/interactive/docs/gallery), and [Highcharts](https://api.highcharts.com/highcharts) for more info.
|
|
294
|
+
|
|
295
|
+
To customize datasets in Chart.js, use:
|
|
296
|
+
|
|
297
|
+
```javascript
|
|
298
|
+
new Chartkick.LineChart("chart", data, {dataset: {borderWidth: 10}})
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
You can pass this option to individual series as well.
|
|
302
|
+
|
|
303
|
+
### Global Options
|
|
304
|
+
|
|
305
|
+
To set options for all of your charts, use:
|
|
306
|
+
|
|
307
|
+
```javascript
|
|
308
|
+
Chartkick.options = {
|
|
309
|
+
colors: ["#b00", "#666"]
|
|
310
|
+
}
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
### Multiple Series
|
|
314
|
+
|
|
315
|
+
You can pass a few options with a series:
|
|
316
|
+
|
|
317
|
+
- `name`
|
|
318
|
+
- `data`
|
|
319
|
+
- `color`
|
|
320
|
+
- `dataset` - *Chart.js only*
|
|
321
|
+
- `points` - *Chart.js only*
|
|
322
|
+
- `curve` - *Chart.js only*
|
|
323
|
+
|
|
324
|
+
### Code
|
|
325
|
+
|
|
326
|
+
If you want to use the charting library directly, get the code with:
|
|
327
|
+
|
|
328
|
+
```javascript
|
|
329
|
+
new Chartkick.LineChart("chart", data, {code: true})
|
|
330
|
+
```
|
|
331
|
+
|
|
332
|
+
The code will be logged to the JavaScript console.
|
|
333
|
+
|
|
334
|
+
**Note:** JavaScript functions cannot be logged, so it may not be identical.
|
|
335
|
+
|
|
336
|
+
### Download Charts
|
|
337
|
+
|
|
338
|
+
*Chart.js only*
|
|
339
|
+
|
|
340
|
+
Give users the ability to download charts. It all happens in the browser - no server-side code needed.
|
|
341
|
+
|
|
342
|
+
```javascript
|
|
343
|
+
new Chartkick.LineChart("chart", data, {download: true})
|
|
344
|
+
```
|
|
345
|
+
|
|
346
|
+
Set the filename
|
|
347
|
+
|
|
348
|
+
```javascript
|
|
349
|
+
new Chartkick.LineChart("chart", data, {download: {filename: "boom"}})
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
**Note:** Safari will open the image in a new window instead of downloading.
|
|
353
|
+
|
|
354
|
+
Set the background color
|
|
355
|
+
|
|
356
|
+
```javascript
|
|
357
|
+
new Chartkick.LineChart("chart", data, {download: {background: "#fff"}})
|
|
358
|
+
```
|
|
359
|
+
|
|
360
|
+
## Installation
|
|
361
|
+
|
|
362
|
+
### Chart.js
|
|
363
|
+
|
|
364
|
+
Run
|
|
365
|
+
|
|
366
|
+
```sh
|
|
367
|
+
npm install chartkick chart.js
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
And add
|
|
371
|
+
|
|
372
|
+
```javascript
|
|
373
|
+
import Chartkick from "chartkick"
|
|
374
|
+
import "chartkick/chart.js"
|
|
375
|
+
```
|
|
376
|
+
|
|
377
|
+
### Google Charts
|
|
378
|
+
|
|
379
|
+
Run
|
|
380
|
+
|
|
381
|
+
```sh
|
|
382
|
+
npm install chartkick
|
|
383
|
+
```
|
|
384
|
+
|
|
385
|
+
And add
|
|
386
|
+
|
|
387
|
+
```javascript
|
|
388
|
+
import Chartkick from "chartkick"
|
|
389
|
+
```
|
|
390
|
+
|
|
391
|
+
And include on the page
|
|
392
|
+
|
|
393
|
+
```html
|
|
394
|
+
<script src="https://www.gstatic.com/charts/loader.js"></script>
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
To specify a language or Google Maps API key, use:
|
|
398
|
+
|
|
399
|
+
```js
|
|
400
|
+
Chartkick.configure({language: "de", mapsApiKey: "..."})
|
|
401
|
+
```
|
|
402
|
+
|
|
403
|
+
before your charts.
|
|
404
|
+
|
|
405
|
+
### Highcharts
|
|
406
|
+
|
|
407
|
+
Run
|
|
408
|
+
|
|
409
|
+
```sh
|
|
410
|
+
npm install chartkick highcharts
|
|
411
|
+
```
|
|
412
|
+
|
|
413
|
+
And add
|
|
414
|
+
|
|
415
|
+
```javascript
|
|
416
|
+
import Chartkick from "chartkick"
|
|
417
|
+
import "chartkick/highcharts"
|
|
418
|
+
```
|
|
419
|
+
|
|
420
|
+
### No Package Manager
|
|
421
|
+
|
|
422
|
+
Download [chartkick.js](https://unpkg.com/chartkick) directly.
|
|
423
|
+
|
|
424
|
+
For Chart.js (works with 4+), [download it](https://unpkg.com/chart.js@4.2.0/dist/chart.umd.js) and the [date-fns adapter bundle](https://unpkg.com/chartjs-adapter-date-fns@3/dist/chartjs-adapter-date-fns.bundle.js) and use:
|
|
425
|
+
|
|
426
|
+
```html
|
|
427
|
+
<script src="/path/to/chart.js"></script>
|
|
428
|
+
<script src="/path/to/chartjs-adapter-date-fns.bundle.js"></script>
|
|
429
|
+
<script src="chartkick.js"></script>
|
|
430
|
+
```
|
|
431
|
+
|
|
432
|
+
For Google Charts, use:
|
|
433
|
+
|
|
434
|
+
```html
|
|
435
|
+
<script src="https://www.gstatic.com/charts/loader.js"></script>
|
|
436
|
+
<script src="chartkick.js"></script>
|
|
437
|
+
```
|
|
438
|
+
|
|
439
|
+
For Highcharts (works with 2.1+), [download it](https://www.highcharts.com/download) and use:
|
|
440
|
+
|
|
441
|
+
```html
|
|
442
|
+
<script src="/path/to/highcharts.js"></script>
|
|
443
|
+
<script src="chartkick.js"></script>
|
|
444
|
+
```
|
|
445
|
+
|
|
446
|
+
### Multiple Libraries
|
|
447
|
+
|
|
448
|
+
If more than one charting library is loaded, choose between them with:
|
|
449
|
+
|
|
450
|
+
```javascript
|
|
451
|
+
new Chartkick.LineChart("chart", data, {adapter: "google"}) // or highcharts or chartjs
|
|
452
|
+
```
|
|
453
|
+
|
|
454
|
+
## API
|
|
455
|
+
|
|
456
|
+
Access a chart with:
|
|
457
|
+
|
|
458
|
+
```javascript
|
|
459
|
+
var chart = Chartkick.charts["chart-id"]
|
|
460
|
+
```
|
|
461
|
+
|
|
462
|
+
Get the underlying chart object with:
|
|
463
|
+
|
|
464
|
+
```javascript
|
|
465
|
+
chart.getChartObject()
|
|
466
|
+
```
|
|
467
|
+
|
|
468
|
+
You can also use:
|
|
469
|
+
|
|
470
|
+
```javascript
|
|
471
|
+
chart.getElement()
|
|
472
|
+
chart.getData()
|
|
473
|
+
chart.getOptions()
|
|
474
|
+
chart.getAdapter()
|
|
475
|
+
```
|
|
476
|
+
|
|
477
|
+
Update the data with:
|
|
478
|
+
|
|
479
|
+
```javascript
|
|
480
|
+
chart.updateData(newData)
|
|
481
|
+
```
|
|
482
|
+
|
|
483
|
+
You can also specify new options:
|
|
484
|
+
|
|
485
|
+
```javascript
|
|
486
|
+
chart.setOptions(newOptions)
|
|
487
|
+
// or
|
|
488
|
+
chart.updateData(newData, newOptions)
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
Refresh the data from a remote source:
|
|
492
|
+
|
|
493
|
+
```javascript
|
|
494
|
+
chart.refreshData()
|
|
495
|
+
```
|
|
496
|
+
|
|
497
|
+
Redraw the chart with:
|
|
498
|
+
|
|
499
|
+
```javascript
|
|
500
|
+
chart.redraw()
|
|
501
|
+
```
|
|
502
|
+
|
|
503
|
+
Loop over charts with:
|
|
504
|
+
|
|
505
|
+
```javascript
|
|
506
|
+
Chartkick.eachChart(function (chart) {
|
|
507
|
+
// do something
|
|
508
|
+
})
|
|
509
|
+
```
|
|
510
|
+
|
|
511
|
+
## Custom Adapters
|
|
512
|
+
|
|
513
|
+
**Note:** This feature is experimental.
|
|
514
|
+
|
|
515
|
+
Add your own custom adapter with:
|
|
516
|
+
|
|
517
|
+
```javascript
|
|
518
|
+
var CustomAdapter = {
|
|
519
|
+
name: "custom",
|
|
520
|
+
renderLineChart: function (chart) {
|
|
521
|
+
chart.getElement().innerHTML = "Hi"
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
Chartkick.adapters.unshift(CustomAdapter)
|
|
526
|
+
```
|
|
527
|
+
|
|
528
|
+
## Examples
|
|
529
|
+
|
|
530
|
+
To run the files in the `examples` directory, you’ll need a web server. Run:
|
|
531
|
+
|
|
532
|
+
```sh
|
|
533
|
+
npm install -g serve
|
|
534
|
+
serve
|
|
535
|
+
```
|
|
536
|
+
|
|
537
|
+
and visit [http://localhost:5000/examples/](http://localhost:5000/examples/)
|
|
538
|
+
|
|
539
|
+
## Upgrading
|
|
540
|
+
|
|
541
|
+
### 4.0
|
|
542
|
+
|
|
543
|
+
Run:
|
|
544
|
+
|
|
545
|
+
```sh
|
|
546
|
+
npm install chartkick@latest
|
|
547
|
+
```
|
|
548
|
+
|
|
549
|
+
For Chart.js, also run:
|
|
550
|
+
|
|
551
|
+
```sh
|
|
552
|
+
npm install chart.js@latest
|
|
553
|
+
```
|
|
554
|
+
|
|
555
|
+
And change:
|
|
556
|
+
|
|
557
|
+
```javascript
|
|
558
|
+
import Chart from "chart.js"
|
|
559
|
+
|
|
560
|
+
Chartkick.use(Chart)
|
|
561
|
+
```
|
|
562
|
+
|
|
563
|
+
to:
|
|
564
|
+
|
|
565
|
+
```javascript
|
|
566
|
+
import "chartkick/chart.js"
|
|
567
|
+
```
|
|
568
|
+
|
|
569
|
+
## History
|
|
570
|
+
|
|
571
|
+
View the [changelog](https://github.com/ankane/chartkick.js/blob/master/CHANGELOG.md)
|
|
572
|
+
|
|
573
|
+
## Contributing
|
|
574
|
+
|
|
575
|
+
Everyone is encouraged to help improve this project. Here are a few ways you can help:
|
|
576
|
+
|
|
577
|
+
- [Report bugs](https://github.com/ankane/chartkick.js/issues)
|
|
578
|
+
- Fix bugs and [submit pull requests](https://github.com/ankane/chartkick.js/pulls)
|
|
579
|
+
- Write, clarify, or fix documentation
|
|
580
|
+
- Suggest or add new features
|
|
581
|
+
|
|
582
|
+
To get started with development:
|
|
583
|
+
|
|
584
|
+
```sh
|
|
585
|
+
git clone https://github.com/ankane/chartkick.js.git
|
|
586
|
+
cd chartkick.js
|
|
587
|
+
npm install
|
|
588
|
+
npm run build
|
|
589
|
+
|
|
590
|
+
# start web server
|
|
591
|
+
npm install -g serve
|
|
592
|
+
serve
|
|
593
|
+
```
|