Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
1
<div id="container5"></div>CSScopy
9
1
html, body, #container5 {2
width: 100%;3
height: 100%;4
margin: 0;5
padding: 0;6
}7
#ac_layer_11{8
display:none;9
}JavaScriptcopy
x
1
anychart.onDocumentReady(function () {2
// create pie chart with passed data3
var chart = anychart.pie ([4
5
{x: "Blanc", value: 1, code:"2602",6
normal: {7
8
fill: {9
10
src: "https://biscabois.fr/images/Nuancier/coussins/2602.jpg",11
mode: 'fit-max'12
13
}14
15
16
},17
hovered:{18
outline: {19
enabled: false,20
21
}22
23
}, 24
selected:{25
outline: {26
enabled: false,27
28
}29
}30
},31
{x: 'Gris', value:1, code:"657/497",32
normal: {33
34
fill: {35
36
src: "https://biscabois.fr/images/Nuancier/coussins/657-497.jpg",37
mode: 'fit-max'38
39
}40
41
42
},43
hovered:{44
outline: {45
enabled: false,46
47
}48
49
}, 50
selected:{51
outline: {52
enabled: false,53
54
}55
}56
},57
{x: 'Rouge', value: 1, code:"2131",58
normal: {59
60
fill: {61
62
src: "https://biscabois.fr/images/Nuancier/coussins/2131.jpg",63
mode: 'fit-max'64
65
}66
67
68
},69
hovered:{70
outline: {71
enabled: false,72
73
}74
75
}, 76
selected:{77
outline: {78
enabled: false,79
80
}81
}82
},83
{x: 'Terre cuite', value:1, code:"2200",84
normal: {85
86
fill: {87
88
src: "https://biscabois.fr/images/Nuancier/coussins/2200.jpg",89
mode: 'fit-max'90
91
}92
93
94
},95
hovered:{96
outline: {97
enabled: false,98
99
}100
101
}, 102
selected:{103
outline: {104
enabled: false,105
106
}107
}108
}, 109
{x: 'Vert bouteille', value: 1, code:"2426",110
normal: {111
112
fill: {113
114
src: "https://biscabois.fr/images/Nuancier/coussins/2426.jpg",115
mode: 'fit-max'116
117
}118
119
120
},121
hovered:{122
outline: {123
enabled: false,124
125
}126
127
}, 128
selected:{129
outline: {130
enabled: false,131
132
}133
}134
}, 135
136
{x: 'Noir', value: 1, code:"2501",137
normal: {138
139
fill: {140
141
src: "https://biscabois.fr/images/Nuancier/coussins/2501.jpg",142
mode: 'fit-max'143
144
}145
146
147
},148
hovered:{149
outline: {150
enabled: false,151
152
}153
154
}, 155
selected:{156
outline: {157
enabled: false,158
159
}160
}161
}, 162
{x: 'Gris clair', value: 1, code:"2631",163
normal: {164
165
fill: {166
167
src: "https://biscabois.fr/images/Nuancier/coussins/2631.jpg",168
mode: 'fit-max'169
170
}171
172
173
},174
hovered:{175
outline: {176
enabled: false,177
178
}179
180
}, 181
selected:{182
outline: {183
enabled: false,184
185
}186
}187
}, 188
{x: 'Gris béton', value: 1, code:"2657",189
normal: {190
191
fill: {192
193
src: "https://biscabois.fr/images/Nuancier/coussins/2657.jpg",194
mode: 'fit-max'195
196
}197
198
199
},200
hovered:{201
outline: {202
enabled: false,203
204
}205
206
}, 207
selected:{208
outline: {209
enabled: false,210
211
}212
}213
}, 214
{x: 'Gris foncé', value: 1, code:"2700",215
normal: {216
217
fill: {218
219
src: "https://biscabois.fr/images/Nuancier/coussins/2700.jpg",220
mode: 'fit-max'221
222
}223
224
225
},226
hovered:{227
outline: {228
enabled: false,229
230
}231
232
}, 233
selected:{234
outline: {235
enabled: false,236
237
}238
}239
}, 240
241
{x: 'Crème', value: 1, code:"2730",242
normal: {243
244
fill: {245
246
src: "https://biscabois.fr/images/Nuancier/coussins/2730.jpg",247
mode: 'fit-max'248
249
}250
251
252
},253
hovered:{254
outline: {255
enabled: false,256
257
}258
259
}, 260
selected:{261
outline: {262
enabled: false,263
264
}265
}266
}, 267
{x: 'Sable', value: 1, code:"2733",268
normal: {269
270
fill: {271
272
src: "https://biscabois.fr/images/Nuancier/coussins/2733.jpg",273
mode: 'fit-max'274
275
}276
277
278
},279
hovered:{280
outline: {281
enabled: false,282
283
}284
285
}, 286
selected:{287
outline: {288
enabled: false,289
290
}291
}292
}, 293
{x: 'Bleu Royal', value: 1, code:"2821",294
normal: {295
296
fill: {297
298
src: "https://biscabois.fr/images/Nuancier/coussins/2821.jpg",299
mode: 'fit-max'300
301
}302
303
304
},305
hovered:{306
outline: {307
enabled: false,308
309
}310
311
}, 312
selected:{313
outline: {314
enabled: false,315
316
}317
}318
}, 319
320
]);321
322
323
324
// configure the states of the chart325
326
chart.normal().stroke("#f9c975", 0);327
chart.hovered().stroke("#f9c975", 6);328
chart.normal().explode("0%");329
chart.hovered().explode("5%");330
331
332
// set tooltip text template333
var tooltip = chart.tooltip();334
// tooltip padding for all series on a chart335
chart.tooltip().padding().left(20);336
tooltip.format("{%x}");337
tooltip.format("Référence {%code} ");338
339
340
341
342
// create range color palette with color ranged between light blue and dark blue343
var palette = anychart.palettes.rangeColors();344
palette.items([345
{color: '#ffffff'}, //blanc346
{color: '#f5e6bb'}, //vanille347
{color: '#ecd3b4'}, //sable348
{color: '#aeb2b3'}, //gris-galet349
{color: '#63666f'} //gris-béton350
351
352
353
]);354
// set the explosion range355
chart.explode("5%");356
357
358
359
// set chart title text settings360
chart.title('')361
//set chart radius362
.innerRadius('30%')363
// set palette to the chart364
.palette(palette);365
366
// disable labels367
chart.labels(false);368
369
var background = chart.background();370
371
// Set fill.372
background.fill( '#424242',0);373
374
// set container id for the chart375
chart.container('container5');376
// initiate chart drawing377
chart.draw();378
});