Subversion Repositories php-qbpwcf

Rev

Rev 23 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
23 liveuser 1
# amCharts Export
2
 
3
Version: 1.4.14
4
 
5
 
6
## Description
7
 
8
This plugin adds export capabilities to all amCharts products - charts and maps.
9
 
10
It allows annotating and exporting chart or related data to various bitmap, 
11
vector, document or data formats, such as PNG, JPG, PDF, SVG, JSON, XLSX and 
12
many more.
13
 
14
 
15
## Important notice
16
 
17
Please note that due to security measures implemented in modern browsers, some 
18
or all export options might not work if the web page is loaded locally (via 
19
file:///) or contain images loaded from different host than the web page itself.
20
 
21
 
22
## Usage
23
 
24
### 1) Include the minified version of file of this plugin as well as the 
25
bundled CSS file. I.e.:
26
 
27
```
28
<script src="amcharts/plugins/export/export.min.js"></script>
29
<link  type="text/css" href="amcharts/plugins/export/export.css" rel="stylesheet">
30
```
31
 
32
Or if you'd rather use amCharts CDN:
33
 
34
```
35
<script src="//cdn.amcharts.com/lib/3/plugins/export/export.min.js"></script>
36
<link  type="text/css" href="//cdn.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet">
37
```
38
 
39
(this needs to go after all the other amCharts includes)
40
 
41
### 2) Enable `export` with default options:
42
 
43
```
44
AmCharts.makeChart( "chartdiv", {
45
  ...,
46
  "export": {
47
    "enabled": true
48
  }
49
} );
50
```
51
 
52
### ... OR set your own custom options:
53
 
54
```
55
AmCharts.makeChart( "chartdiv", {
56
  ...,
57
  "export": {
58
    "enabled": true,
59
    "menu": [ {
60
      "class": "export-main",
61
      "menu": [ {
62
        "label": "Download",
63
        "menu": [ "PNG", "JPG", "CSV" ]
64
      }, {
65
        "label": "Annotate",
66
        "action": "draw",
67
        "menu": [ {
68
          "class": "export-drawing",
69
          "menu": [ "PNG", "JPG" ]
70
        } ]
71
      } ]
72
    } ]
73
  }
74
} );
75
```
76
 
77
 
78
## Loading external libraries needed for operation of this plugin
79
 
80
The plugin relies on a number of different libraries, to export images, draw 
81
annotations or generate download files.
82
 
83
Those libraries need to be loaded for the plugin to work properly.
84
 
85
There are two ways to load them. Choose the one that is right:
86
 
87
### 1) Automatic (preferred)
88
 
89
All libraries required for plugin operation are included withing plugins */libs* 
90
subdirectory.
91
 
92
The plugin will automatically try to look in chart's [`path`](http://docs.amcharts.com/3/javascriptcharts/AmSerialChart#path) 
93
property. If your plugin files are located within plugins folder under amcharts 
94
(as is the case with the default distributions), you don't need to do anything -
95
the libraries will load on-demand.
96
 
97
If you are using relative url, note that it is relative to the web page you are 
98
displaying your chart on, not the export.js library.
99
 
100
In case you've moved the libs folder you need to tell the plugin where it is
101
`"libs": { "path": "../libs/" }`
102
 
103
### 2) Manual
104
 
105
You can also load all those JavaScript libraries by `<script>` tags. Since 
106
loading of libraries is on by default you will need to turn it off by setting 
107
`"libs": { "autoLoad": false }`
108
 
109
Here is a full list of the files that need to be loaded for each operation:
110
 
111
File | Located in | Required for
112
---- | ---------- | ------------
113
fabric.min.js | libs/fabric.js/ | Any export operation
114
FileSaver.js | libs/FileSaver.js/ | Used to offer download files
115
pdfmake.min.js | libs/pdfmake/ | Export to PDF format
116
vfs_fonts.js | libs/pdfmake/ | Export to PDF format
117
jszip.js | libs/jszip/ | Export to XLSX format
118
xlsx.js | libs/xlsx/ | Export to XLSX format
119
 
120
 
121
## Complete list of available export settings
122
 
123
Property | Default | Description
124
-------- | ------- | -----------
125
backgroundColor | #FFFFFF | RGB code of the color for the background of the exported image
126
enabled | true | Enables or disables export functionality
127
divId | | ID or a reference to div object in case you want the menu in a separate container.
128
fabric | {} | Overwrites the default drawing settings (fabricJS library)
129
fallback | {} | Holds the messages to guide the user to copy the generated output; `false` will disable the fallback feature
130
fileName | amCharts | A file name to use for generated export files (an extension will be appended to it based on the export format)
131
legend | {} | Places the legend in case it is within an external container ([skip to chapter](#adding-external-legend))
132
libs | | 3rd party required library settings (see the above section)
133
menu | [] | A list of menu or submenu items (see the next chapter for details)
134
pdfMake | {} | Overwrites the default settings for PDF export (pdfMake library)
135
position | top-right | A position of export icon. Possible values: "top-left", "top-right" (default), "bottom-left", "bottom-right"
136
removeImages | true | If true export checks for and removes "tainted" images that area lodead from different domains
137
delay | | General setting to delay the capturing of the chart ([skip to chapter](#delay-the-capturing-before-export))
138
exportFields | [] | If set, only fields in this array will be exported ( data export only )
139
exportTitles | false | Exchanges the data field names with it's dedicated title ( data export only )
140
columnNames | {} | An object of key/value pairs to use as column names when exporting to data formats. `exportTitles` needs to be set for this to work as well.
141
exportSelection | false | Exports the current data selection only ( data export only )
142
dataDateFormat | | Format to convert date strings to date objects, uses by default charts dataDateFormat ( data export only )
143
dateFormat | YYYY-MM-DD | Formats the category field in given date format ( data export only )
144
keyListener | false | If true it observes the pressed keys to undo/redo the annotations
145
fileListener | false | If true it observes the drag and drop feature and loads the dropped image file into the annotation
146
drawing | {} | Object which holds all possible settings for the annotation mode ([skip to chapter](#annotation-settings))
147
overflow | true | Flag to overwrite the css attribute 'overflow' of the chart container to avoid cropping the menu on small container
148
border | {} | An object of key/value pairs to define the overlaying border
149
 
150
 
151
## Configuring export menu
152
 
153
Plugin includes a way to completely control what is displayed on export menu. 
154
You can set up menus, sub-menus, down to any level. You can even add custom 
155
items there that execute your arbitrary code on click. It's so configurable 
156
it makes us sick with power ;)
157
 
158
The top-level menu is configured via `menu` property under `export`. It should 
159
always be an array, even if you have a single item in it.
160
 
161
The array items could be either objects or format codes. Objects will allow you 
162
to specify labels, action, icon, child items and even custom code to be executed
163
on click.
164
 
165
Simple format codes will assume you need an export to that format.
166
 
167
### Simple menu setup
168
 
169
Here's a sample of the simple menu setup that allows export to PNG, JPG and CSV:
170
 
171
```
172
"export": {
173
  "enabled": true,
174
  "menu": [ {
175
    "class": "export-main",
176
    "menu": [ "PNG", "JPG", "CSV" ]
177
  } ]
178
}
179
```
180
 
181
The above will display a menu out of three options when you hover on export 
182
icon:
183
 
184
* PNG
185
* JPG
186
* CSV
187
 
188
When clicked the plugin will trigger export to a respective format.
189
 
190
If that is all you need, you're all set.
191
 
192
Please note that we have wrapped out menu into another menu item, so that only 
193
the icon is displayed until we roll over the icon. This means that technically
194
we have a two-level hierarchical menu.
195
 
196
If we opmitted that first step, the chart would simply display a format list 
197
right there on the chart.
198
 
199
### Advanced menu setup
200
 
201
However, you can do so much more with the menu.
202
 
203
Let's add more formats and organize image and data formats into separate 
204
submenus.
205
 
206
To add a submenu to a menu item, simply add a `menu` array as its own property:
207
 
208
```
209
"export": {
210
  "enabled": true,
211
  "menu": [ {
212
    "class": "export-main",
213
    "menu": [ {
214
      "label": "Download as image",
215
      "menu": [ "PNG", "JPG", "SVG" ]
216
    }, {
217
      "label": "Download data",
218
      "menu": [ "CSV", "XLSX" ]
219
    } ]
220
  } ]
221
}
222
```
223
 
224
Now we have a hierarchical menu with the following topology:
225
 
226
* Download as image
227
  * PNG
228
  * JPG
229
  * SVG
230
* Download data
231
  * CSV
232
  * XLSX
233
 
234
We can mix "string" and "object" formats the way we see fit, i.e.:
235
 
236
```
237
"export": {
238
  "menu": [
239
    "PNG", 
240
    { "label": "JPEG",
241
      "format": "JPG" },
242
    "SVG"
243
  ]
244
}
245
```
246
 
247
The magic does not end here, though.
248
 
249
### Adding custom click events to menu items
250
 
251
Just like we set `label` and `format` properties for menu item, we can set 
252
`click` as well.
253
 
254
This needs to be a function reference. I.e.:
255
 
256
```
257
"export": {
258
  "menu": [
259
    "PNG", 
260
    { "label": "JPEG",
261
      "click": function () {
262
        alert( "Clicked JPEG. Wow cool!" );
263
      } },
264
    "SVG"
265
  ]
266
}
267
```
268
 
269
### Adding external legend
270
 
271
In case you have an external legend you need to define the position where it should get placed in your export.
272
By default it obtains the dimensions from the container but you can optionally overwrite those settings as shown below.
273
 
274
```
275
"export": {
276
  "legend": {
277
    "position": "top",  // or "right", "bottom" and "left" are possible
278
    "width": 200,       // optional
279
    "height": 200       // optional
280
  }
281
}
282
```
283
 
284
### Adding overlaying border
285
 
286
In case you need a more visible separation of your chart for further processing you can add an overlaying border.
287
 
288
```
289
"export": {
290
  "border": {
291
    "stroke": "#000000",  // HEX-CODE to define the border color
292
    "strokeWidth": 1,     // number which represents the width in pixel
293
    "strokeOpacity": 1    // number which controls the opacity from 0 - 1
294
  }
295
}
296
```
297
 
298
### Menu item reviver
299
 
300
By passing the `menuReviver` callback function you can modify the resulting menu 
301
item or relative container, before it gets appended to the list (`ul`). The 
302
function takes two arguments and it needs to return a valid DOM element.
303
 
304
```
305
"export": {
306
  "menuReviver": function(item,li) {
307
    li.setAttribute("class","something special");
308
    return li;
309
  }
310
}
311
```
312
 
313
#### Format specific options that you can override using Menu item reviver
314
 
315
Some formats, such as CSV, have specific parameters that are used when exporting to this format. For example, default column separator for CSV is a comma. But what if you would like to be that a tab? You could use `menuReviver` for that like this:
316
 
317
```
318
"export": {
319
  "enabled": true,
320
  "menuReviver": function(cfg,li) {
321
    if ( cfg.format == "CSV" ) {
322
      cfg.delimiter = "\t";
323
    }
324
    return li;
325
  }
326
}
327
```
328
 
329
Below you will find a list of parameters that you can override for each format:
330
 
331
**JPG**
332
 
333
Property | Default | Available values | Description
334
--------- | ------- | ---------------- | -----------
335
quality |1 | 0-1 | A quality of the resulting JPG image
336
multiplier | 1 | number | Set this to non-1 number to resize the resulting image by
337
 
338
**PNG**
339
 
340
Property | Default | Available values | Description
341
--------- | ------- | ---------------- | -----------
342
quality | 1 | 0-1 | A quality of the resulting JPG image
343
multiplier | 1 | number | Set this to non-1 number to resize the resulting image by
344
 
345
**PDF**
346
 
347
Property | Default | Available values | Description
348
--------- | ------- | ---------------- | -----------
349
multiplier | 2 | number | Set this to non-1 number to resize the resulting image by
350
 
351
**PRINT**
352
 
353
Property | Default | Available values | Description
354
--------- | ------- | ---------------- | -----------
355
delay | 1 | number | Delay by number of seconds before triggering print
356
lossless | false | true/false | Enable or disable image optimization when printing
357
 
358
**CSV**
359
 
360
Property | Default | Available values | Description
361
--------- | ------- | ---------------- | -----------
362
delimiter | "," | string | A string to use as a column delimiter
363
quotes | true | true/false | Set whether to enclose strings in doublequotes
364
escape | true | true/false | Set whether to escape strings
365
withHeader | true | true/false | Add header row with column names
366
 
367
**XLSX**
368
 
369
Property | Default | Available values | Description
370
--------- | ------- | ---------------- | -----------
371
dateFormat | "dateObject" | "dateObject"\|"string" | Whether to export dates as dates recognisable by Excel or formatted as strings
372
withHeader | true | true/false | Add header row with column names
373
stringify | false | true/false | Convert all cell content to strings
374
 
375
 
376
### Menu walker
377
 
378
In case you don't like our structure, go ahead and write your own recursive 
379
function to create the menu by the given list configured through `menu`.
380
 
381
```
382
"export": {
383
  "menuWalker": function(list,container) {
384
    // some magic to generate the nested lists using the given list
385
  }
386
}
387
```
388
 
389
### Printing the chart
390
 
391
Adding menu item to print the chart or map is as easy as adding export ones. You 
392
just use "PRINT" as `format`. I.e.:
393
 
394
```
395
"export": {
396
  "menu": [
397
    "PNG", 
398
    "SVG",
399
    "PRINT"
400
  ]
401
}
402
```
403
 
404
Or if you want to change the label:
405
 
406
```
407
"export": {
408
  "menu": [
409
    "PNG", 
410
    "SVG",
411
    {
412
      "format": "PRINT",
413
      "label": "Print Chart"
414
    }
415
  ]
416
}
417
```
418
 
419
### Annotating the chart before export
420
 
421
OK, this one is so cool, you'll need a class 700 insulation jacket.
422
 
423
By default each menu item triggers some kind of export. You can trigger an 
424
"annotation" mode instead by including `"action": "draw"` instead.
425
 
426
```
427
"export": {
428
  "menu": [ {
429
    "class": "export-main",
430
    "menu": [ {
431
      "label": "Download",
432
      "menu": [ "PNG", "JPG", "CSV", "XLSX" ]
433
    }, {
434
      "label": "Annotate",
435
      "action": "draw"
436
    } ]
437
  } ]
438
}
439
```
440
 
441
Now, when you click on the "Annotate" item in the menu, the chart will turn into 
442
an image editor which you can actual draw on and the menu gets replaced by the 
443
default annotation menu.
444
 
445
If you don't like the detault annotation menu, you can define your own:
446
 
447
```
448
"export": {
449
  "menu": [ {
450
    "class": "export-main",
451
    "menu": [ {
452
      "label": "Download",
453
      "menu": [ "PNG", "JPG", "CSV", "XLSX" ]
454
    }, {
455
      "label": "Annotate",
456
      "action": "draw",
457
      "menu": [ {
458
        "class": "export-drawing",
459
        "menu": [ "JPG", "PNG", "SVG", "PDF" ]
460
      } ]
461
    } ]
462
  } ]
463
}
464
```
465
 
466
Now, when you turn on the annotation mode, your own submenu will display, 
467
allowing to export the image into either PNG, JPG, SVG or PDF.
468
 
469
And that's not even the end of it. You can add menu items to cancel, undo, redo 
470
and still be able to reuse the choices by using the actions `draw.modes`, 
471
`draw.widths`, `draw.colors` or `draw.shapes`.
472
 
473
```
474
"export": {
475
  "menu": [ {
476
    "class": "export-main",
477
    "menu": [ {
478
      "label": "Download",
479
      "menu": [ "PNG", "JPG", "CSV", "XLSX" ]
480
    }, {
481
      "label": "Annotate",
482
      "action": "draw",
483
      "menu": [ {
484
        "class": "export-drawing",
485
        "menu": [ {
486
            label: "Size ...",
487
            action: "draw.widths",
488
            widths: [ 5, 20, 30 ] // replaces the default choice
489
        }, {
490
          "label": "Edit",
491
          "menu": [ "UNDO", "REDO", "CANCEL" ]
492
        }, {
493
          "label": "Save",
494
          "format": "PNG"
495
        } ]
496
      } ]
497
    } ]
498
  } ]
499
}
500
```
501
 
502
### Annotation settings
503
 
504
Since 1.2.1 it's also possible to set some of the annotation options without the 
505
need to re-define the whole menu structure. You can easily adjust the choice of 
506
modes, colors, widths or shapes, and set the defaults when entering the 
507
annotation mode.
508
 
509
Following setup shows you all available settings. If you don't have the 
510
`drawing` property at all, it will falls back to the defaults.
511
 
512
```
513
"export": {
514
  "drawing": {
515
    "enabled": true, // Flag for `action: "draw"` menu items to toggle it's visibility
516
    "shapes": [ "test.svg" ], // Choice of shapes offered in the menu (shapes are being loaded from the shapes folder)
517
 
518
    "width": 2, // Width of the pencil and line when entering the annotation mode
519
    "widths": [ 2, 10, 20 ], // Choice of widths offered in the menu
520
 
521
    "color": "#000000", // Color of the pencil, line, text and shapes when entering the annotation mode
522
    "colors": [ "#000000", "#FF0000" ] // Choice of colors offered in the menu
523
 
524
    "opacity": 1, // Opacity of the pencil, line, text and shapes when entering the annotation mode
525
    "opacities": [ 1, 0.8, 0.6, 0.4, 0.2 ] // Choice of opacity offered in the menu
526
 
527
    "menu": [ ... ], // Shown menu when entering the annotation mode
528
 
529
    "mode": "pencil", // Drawing mode when entering the annotation mode "pencil", "line" and "arrow" are available
530
    "modes": [ "pencil" , "line", "arrow" ], // Choice of modes offered in the menu
531
    "arrow": "end", // position of the arrow on drawn lines; "start","middle" and "end" are available
532
 
533
    "autoClose": true // Flag to automatically close the annotation mode after download
534
  }
535
}
536
```
537
 
538
If you need to filter the drawn elements, you can pass the `reviver` method in 
539
your global configuration, or pass it to the `capture` method if you export 
540
manually. For example, to hide all free labels you can simply do something like 
541
the following:
542
 
543
```
544
"export": {
545
  "menu": ["PNG"],
546
  "reviver": function(obj) {
547
    if ( obj.className == "amcharts-label" ) {
548
      obj.opacity = 0;
549
    }
550
  }
551
}
552
```
553
 
554
### Delay the capturing before export
555
 
556
In some cases you may want to delay the capturing of the current chart snapshot 
557
to highlight the current value. For this you can simply define the 'delay' 
558
property in your menu item:
559
 
560
```
561
"export": {
562
  "delay": 3,
563
 
564
  // or specifically on individual menu items
565
 
566
  "menu": [{
567
    "label": "PNG",
568
    "format": "PNG",
569
    "delay": 3
570
  }]
571
}
572
```
573
 
574
### Events
575
 
576
Since version 1.1.7 the plugin introduces some events you can use. For example 
577
the `afterCapture` event allows you to add some texts or images which can't be 
578
seen on the regular chart but only the generated export. Use it to watermark 
579
your exported images.
580
 
581
```
582
"export": {
583
  "afterCapture": function(menuConfig) {
584
      var text = new fabric.Text("This is shown on exported image only", {
585
        top: 50,
586
        left: 100,
587
        family: this.setup.chart.fontFamily,
588
        size: this.setup.chart.fontSize * 2
589
      });
590
      this.setup.fabric.add(text);
591
  },
592
 
593
  // or specifically on individual menu items
594
 
595
  "menu": [{
596
    "label": "PNG",
597
    "format": "PNG",  
598
    "afterCapture": function(menuConfig) {
599
        var text = new fabric.Text("This is shown on exported image only", {
600
          top: 50,
601
          left: 100,
602
          family: this.setup.chart.fontFamily,
603
          size: this.setup.chart.fontSize * 2
604
        });
605
        this.setup.fabric.add(text);
606
    }
607
  }]
608
}
609
```
610
 
611
### A list of the events
612
 
613
Name | Arguments | Description
614
---- | --------- | -----------
615
beforeCapture | [menu item setup](#a-list-of-menu-item-properties) | Called before the SVG element gets converted
616
afterCapture | [menu item setup](#a-list-of-menu-item-properties) | Called right before the passed callback of the capture method
617
 
618
 
619
### A list of menu item properties
620
 
621
Property | Description
622
-------- | -----------
623
action | Set to "draw" if you want the item to trigger annotation mode
624
class | Class name applied to the tag
625
click | Function handler invoked upon click on menu item
626
format | A format to export chart/map to upon click (see below for a list of available formats)
627
icon | Icon file (will use chart's [path](http://docs.amcharts.com/3/javascriptcharts/AmSerialChart#path) if the URL is not full)
628
label | Text label to be displayed
629
menu | An array of submenu items
630
title | A title attribute of the link
631
backgroundColor | The background color of the canvas
632
fileName | A file name to use for generated export files (an extension will be appended to it based on the export format)
633
extension | File extension for the generated export file (uses format default if not defined)
634
mimeType | Internet media type to generate the export file (usses format default if not defined)
635
pageSize | A string or { width: number, height: number } ([details](#exporting-to-pdf))
636
pageOrientation | By default we use portrait, you can change it to landscape if you wish ([details](#exporting-to-pdf))
637
pageMargins | [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins ([details](#exporting-to-pdf))
638
content | Array of elements which represents the content ([details](#exporting-to-pdf))
639
multiplier | Scale factor for the generated image
640
lossless | Flag to print the actual vector graphic instead of buffered bitmap (print option only, experimental)
641
delay | A numeric value to delay the capturing in seconds ([details](#delay-the-capturing-before-export))
642
exportFields | [] | If set, only fields in this array will be exported ( data export only )
643
exportTitles | Exchanges the data field names with it's dedicated title ( data export only )
644
columnNames | An object of key/value pairs to use as column names when exporting ( data export only )
645
exportSelection | Exports the current data selection only ( data export only )
646
dataDateFormat | Format to convert date strings to date objects, uses by default charts dataDateFormat ( data export only )
647
dateFormat | Formats the category field in given date format ( data export only )
648
border | An object of key/value pairs to define the overlaying border
649
 
650
Available `format` values:
651
 
652
* JPG
653
* PNG
654
* SVG
655
* CSV
656
* JSON
657
* PDF
658
* XLSX
659
* PRINT
660
 
661
### Exporting to PDF
662
 
663
When exporting to PDF, you can set and modify the content of the resulting 
664
document. I.e. add additional text and/or modify image size, etc.
665
 
666
To do that, you can use menu item's `content` property.
667
 
668
Each item in `content` represents either a text line (string) or an exported 
669
image.
670
 
671
To add a text line, simply use a string. It can even be a JavaScript variable or 
672
a function that returns a string.
673
 
674
To include exported image, use `image: "reference"`.
675
 
676
Additionally, you can add `fit` property which is an array of pixel dimensions, 
677
you want the image to be scaled to fit into.
678
 
679
Here's an example of such export menu item:
680
 
681
```
682
{
683
  "format": "PDF",
684
  "content": [ "Saved from:", window.location.href, {
685
    "image": "reference",
686
    "fit": [ 523.28, 769.89 ] // fit image to A4
687
  } ]
688
}
689
```
690
 
691
Property | Description
692
-------- | -----------
693
pageSize | a string or { width: number, height: number }
694
pageOrientation | by default we use portrait, you can change it to landscape if you wish
695
pageMargins | [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins
696
content | array of elements which represents the content ([full description](https://github.com/bpampuch/pdfmake/))
697
 
698
Pagesize | Dimensions in pixel
699
-------- | -----------
700
4A0 | [4767.87, 6740.79]
701
2A0 | [3370.39, 4767.87]
702
A0 | [2383.94, 3370.39]
703
A1 | [1683.78, 2383.94]
704
A2 | [1190.55, 1683.78]
705
A3 | [841.89, 1190.55]
706
A4 | [595.28, 841.89]
707
A5 | [419.53, 595.28]
708
A6 | [297.64, 419.53]
709
A7 | [209.76, 297.64]
710
A8 | [147.40, 209.76]
711
A9 | [104.88, 147.40]
712
A10 | [73.70, 104.88]
713
B0 | [2834.65, 4008.19]
714
B1 | [2004.09, 2834.65]
715
B2 | [1417.32, 2004.09]
716
B3 | [1000.63, 1417.32]
717
B4 | [708.66, 1000.63]
718
B5 | [498.90, 708.66]
719
B6 | [354.33, 498.90]
720
B7 | [249.45, 354.33]
721
B8 | [175.75, 249.45]
722
B9 | [124.72, 175.75]
723
B10 | [87.87, 124.72]
724
C0 | [2599.37, 3676.54]
725
C1 | [1836.85, 2599.37]
726
C2 | [1298.27, 1836.85]
727
C3 | [918.43, 1298.27]
728
C4 | [649.13, 918.43]
729
C5 | [459.21, 649.13]
730
C6 | [323.15, 459.21]
731
C7 | [229.61, 323.15]
732
C8 | [161.57, 229.61]
733
C9 | [113.39, 161.57]
734
C10 | [79.37, 113.39]
735
RA0 | [2437.80, 3458.27]
736
RA1 | [1729.13, 2437.80]
737
RA2 | [1218.90, 1729.13]
738
RA3 | [864.57, 1218.90]
739
RA4 | [609.45, 864.57]
740
SRA0 | [2551.18, 3628.35]
741
SRA1 | [1814.17, 2551.18]
742
SRA2 | [1275.59, 1814.17]
743
SRA3 | [907.09, 1275.59]
744
SRA4 | [637.80, 907.09]
745
EXECUTIVE | [521.86, 756.00]
746
FOLIO | [612.00, 936.00]
747
LEGAL | [612.00, 1008.00]
748
LETTER | [612.00, 792.00]
749
TABLOID | [792.00, 1224.00]
750
 
751
## Styling the export menu
752
 
753
The plugin comes with a default CSS file `export.css`. You just need to include 
754
it on your page.
755
 
756
Feel free to override any styles defined in it, create your own version and 
757
modify as you see fit.
758
 
759
If you choose to modify it, we suggest creating a copy so it does not get 
760
overwritten when you update amCharts or plugin.
761
 
762
 
763
## Plugin API
764
 
765
We explained how you can define custom functions to be executed on click on 
766
export menu items.
767
 
768
Those functions can tap into plugin's methods to augment it with some custom 
769
functionality.
770
 
771
Here's an example:
772
 
773
```
774
"export": {
775
  menu: [ {
776
    label: "JPG",
777
    click: function() {
778
      this.capture({},function() {
779
        this.toJPG( {}, function( data ) {
780
          this.download( data, "image/jpg", "amCharts.jpg" );
781
        });
782
      });
783
    }
784
  } ]
785
}
786
```
787
 
788
The above will use plugin's internal `capture` method to capture it's current 
789
state and `toJPG()` method to export the chart to JPEG format.
790
 
791
Yes, you're right, it's the exact equivalent of just including "JPG" string. The 
792
code is here for the explanatory purposes.
793
 
794
Here's a full list of API functions available for your consumption:
795
 
796
Function | Parameters | Description
797
-------- | ---------- | -----------
798
toJPG | (object) options, (function) callback | Prepares a JPEG representation of the chart and passes the binary data to the callback function
799
toPNG | (object) options, (function) callback | Prepares a PNG representation of the chart and passes the binary data to the callback function
800
toSVG | (object) options, (function) callback | Prepares a SVG representation of the chart and passes the binary data to the callback function
801
toPDF | (object) options, (function) callback | Prepares a PDF representation of the chart and passes the binary data to the callback function
802
toJSON | (object) options, (function) callback | Prepares a JSON and passes the plain data to the callback function
803
toCSV | (object) options, (function) callback | Prepares a CSV and passes the plain data to the callback function
804
toXLSX | (object) options, (function) callback | Prepares a XLSX representation of the chart and passes the binary data to the callback function
805
toBlob | (object) options, (function) callback | Prepares a BLOB and passes the instance to the callback function
806
toCanvas | (object) options, (function) callback | Prepares a Canvas and passes the element to the callback function
807
toArray | (object) options, (function) callback | Prepares an Array and passes the data to the callback function
808
toImage | (object) options, (function) callback | Generates an image element which holds the output in an embedded base64 data url
809
 
810
## Fallback for IE9
811
 
812
Unfortunately, Internet Explorer 9 has restrictions in place that prevent the 
813
download of locally-generated files. In this case the plugin will place the 
814
generated image along download instructions directly over the chart area.
815
 
816
To avoid having a bigger payload by including senseless polyfills to your site, 
817
you may need to add following metatag in your `<head>` of your HTML document.
818
 
819
```
820
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
821
```
822
 
823
This feature will kick in by default. If you want to disable it simply pass 
824
`false` to the `fallback` parameter.
825
 
826
```
827
"export": {
828
  fallback: false
829
}
830
```
831
 
832
In case you want to change our default messages you can modify it like 
833
following.
834
 
835
```
836
"export": {
837
  fallback: {
838
    text: "CTRL + C to copy the data into the clipboard.",
839
    image: "Rightclick -> Save picture as... to save the image."
840
  }
841
}
842
```
843
 
844
## Requirements
845
 
846
This plugin requires at least 3.13 version of JavaScript Charts, JavaScript
847
Stock Chart or JavaScript Maps.
848
 
849
The export will also need relatively recent browsers.
850
 
851
IE10 and up are supported.
852
 
853
Partial support for IE9; Fallback mechanism.
854
 
855
IE8 and older are not supported I'm afraid. Hey, it's time to upgrade!
856
 
857
 
858
## Demos
859
 
860
They're all in subdirectory /examples.
861
 
862
 
863
## Extending this plugin
864
 
865
You're encouraged to modify, extend and make derivative plugins out of this
866
plugin.
867
 
868
You can modify files, included in this archive or, better yet, fork this project
869
on GitHub:
870
 
871
https://github.com/amcharts/export
872
 
873
We're curious types. Please let us know (contact@amcharts.com) if you do create
874
something new out of this plugin.
875
 
876
 
877
## License
878
 
879
This plugin is licensed under Apache License 2.0.
880
 
881
This basically means you're free to use or modify this plugin, even make your
882
own versions or completely different products out of it.
883
 
884
Please see attached file "license.txt" for the complete license or online here:
885
 
886
http://www.apache.org/licenses/LICENSE-2.0
887
 
888
 
889
## Contact us
890
 
891
* Email:contact@amcharts.com
892
* Web: http://www.amcharts.com/
893
* Facebook: https://www.facebook.com/amcharts
894
* Twitter: https://twitter.com/amcharts
895
 
896
 
897
## Changelog
898
 
899
### 1.4.14 
900
* Added: ([border](#adding-overlaying-border)) config-property to add an overlaying border on the output image. 
901
 
902
### 1.4.13
903
* Fixed: Issue on balloons showing it's content as HTML added "textContent" as alternative getter
904
 
905
### 1.4.12
906
* Fixed: clipPath issue on SVG export (workaround until fabricJS handles that by themselves)
907
 
908
### 1.4.11
909
* Fixed: Depth issue on value labels on columns
910
 
911
### 1.4.10
912
* Fixed: potential vulnerability with anonymous function declaration
913
 
914
### 1.4.9
915
* Added: Radial gradient support on pie charts (new feature in amCharts v3.18.0)
916
 
917
### 1.4.8
918
* Fixed: Clippath positioning issue
919
* Fixed: Issue removing tainted images
920
* Fixed: Hashbanged url interpretation issue in IE (related to reusable svg nodes)
921
 
922
### 1.4.7
923
* Fixed: Zeroes were being exported to data formats as empty strings rather than numbers
924
 
925
### 1.4.6
926
* Fixed: Loading issue with patterns in firefox
927
 
928
### 1.4.5
929
* Fixed: Issue with the "canvas-container" on chart revalidations
930
 
931
### 1.4.4
932
* Added: Balloon text orientation
933
* Fixed: Issue with multiline label positioning
934
 
935
### 1.4.3
936
* Added: `exportFields` option which is an array of fields to export in data formats (if you want to export just some fields as opposed to all fields)
937
 
938
### 1.4.2
939
* Added: `overflow` flag to overwrite the css attribute 'overflow' of the chart container
940
 
941
### 1.4.1
942
* Fixed: cropped bullets on XY charts
943
 
944
### 1.4.0
945
* Fixed: beforeCapture issue on SVG document changes
946
* Added: Namespace check within globals for required third party software
947
 
948
### 1.3.9
949
* Fixed: Base tag gradient drawing issue (includes embedded hotfix for fabricjs commit #c9745ff)
950
 
951
### 1.3.8
952
* Fixed: Base tag clip path issue which draw the lines outside the plotarea
953
 
954
### 1.3.7
955
* Added: `columnNames` property, which allows overriding column names when expoerting chart data
956
 
957
### 1.3.6
958
* Fixed: Checking parseDates for category values for date interpretation
959
 
960
### 1.3.5
961
* Fixed: Scrollbar issue hiding the unselected scrollbar background area
962
 
963
### 1.3.4
964
* Fixed: Absolute legend positioning issue.
965
 
966
### 1.3.3
967
* Added: English as default language when define language does not exist
968
 
969
### 1.3.2
970
* Added: ([drawing.autoClose](#annotation-settings)) new flag to automatically close the annotation mode after download
971
* Fixed: Internal pdfMake issue which prevented to generate PDFs in IE10, uses custom build until officially fixed
972
 
973
### 1.3.1
974
* Added: Timestamp date fields get converted as dates
975
* Fixed: XLSX respects given dateFormat
976
* Changed: JSON exports date fields as date objects by default
977
 
978
### 1.3.0
979
* Fixed: Issue hiding drawing container on "drawing.done"
980
* Fixed: Legend positioning issue with charts created in a hidden container
981
 
982
### 1.2.9
983
* Fixed: Issue with missing `export.css` which showed the canvas
984
* Fixed: Issue with empty menu items; adds list only with childNodes > 1
985
* Fixed: Issue with hidden bullets; caused by wrong clip-paths
986
* Added: Polish language file ( thanks to piernik )
987
 
988
### 1.2.8
989
* Fixed: Issue in `gatherClassName` checking element type
990
 
991
### 1.2.7
992
* Fixed: Generates true JPG file instead PNG with JPG extension
993
* Fixed: Drag&Drop feature does not activate automatically the annotation mode
994
 
995
### 1.2.6
996
* Added: Native EXCEL date cell type for date fields, forced by default
997
* Fixed: Issue in `getChartData` which ignored given data array ( affected API usage only )
998
 
999
### 1.2.5
1000
* Added: Illustrator support; `reviver` method to `toSVG`; converts by default RGBA to HEX colors codes and places it's dedicated opacity property
1001
* Fixed: Multiline text positioning / line heights
1002
 
1003
### 1.2.4
1004
* Added: `exportSelection` exports the current data selection
1005
* Added: `dataDateFormat` converts the date-strings to date objects with given format
1006
* Added: `dateFormat` converts the date in given format
1007
* Added: `processData` to format date fields and translate fields
1008
* Changed: `gatherChartData` collects data, fields and titles only and uses `processData` to format
1009
 
1010
### 1.2.3
1011
* Fixed: Positioning issue on multiline labels
1012
 
1013
### 1.2.2
1014
* Fixed: Issue with object changes which overwrite undo/redo object states
1015
* Fixed: Issue with default fontSize
1016
 
1017
### 1.2.1
1018
* Added: Possibility to add text, lines, shapes ([details](#annotation-settings))
1019
* Added: Possibility to change drawing mode, color, opacity and size
1020
* Added: Possibility to select,move,scale drawn items
1021
* Added: Possibility to define dedicated drawing menu `drawing.menu` individual menu items get prioritised
1022
* Added: Dropbox feature which allows to drag images into the chart `fileListener: true`
1023
* Added: Keylistener which allows to undo/redo/remove the drawn steps `keyListener: true`
1024
* Added: Isolated plugin to be able to initiate manually regardless of the chart setup
1025
* Fixed: Conflict with prototypeJS which caused tainted return value from `toArray`
1026
 
1027
### 1.2.0
1028
* Fixed: Issue with deepMerge which did not allow to modfiy the pdfMake default settings
1029
* Fixed: Menu issue which did not allow to modify the pdfMake settings
1030
* Fixed: Undo issue which needed double attempts in the beginning
1031
* Added: Drag/Scale feature in annotation mode; toggles automatically between drawing/dragging while hovering over the elements
1032
 
1033
### 1.1.9
1034
* Added: `exportTitles` available in general or individual setup which exchanges the data field names with it's dedicated title
1035
* Fix: Interpolates missing data fields across data provider
1036
 
1037
### 1.1.8
1038
* Added: Temporary workaround to bypass FileSaver check; issue prevented to open blob urls in safari browser
1039
 
1040
### 1.1.7
1041
* Added: beforeCapture to be able to indicate the export process in some way
1042
* Added: afterCapture to be able to modify the fabric instance if needed
1043
* Added: SVG element as second argument within the "reviver" callback
1044
* Added: Multiple arguments supported in "handleCallback" method
1045
 
1046
### 1.1.6
1047
* Fix: Pattern render issue in IE;
1048
* Added: Multiline support (workaround until fabricJS supports tspan)
1049
* Added: General delay property to delay the capturing of the chart ([details](#delay-the-capturing-before-export))
1050
 
1051
### 1.1.5
1052
* Fix: Tainted check issue which failed if location.origin wasn't available
1053
* Fix: Capture image check, triggers callback only if all images have been loaded
1054
* Added: Multi language support; embedded english by default; overtakes chart language
1055
* Added: Delay feature, which allows to delay the capturing ([details](#delay-the-capturing-before-export))
1056
 
1057
### 1.1.4
1058
* Fix: Did not collect clip-path and pattern from legend
1059
* Fix: External legend did not respect given width when positioned on left side
1060
* Fix: Improved tainted image detection
1061
 
1062
### 1.1.3
1063
* Added: Added reviver in capturing method to filter the drawn chart elements
1064
 
1065
### 1.1.2
1066
* Added: Generalized fallback; does a lookup on the Blob constructor
1067
* Fix: Wait for lazy images, triggers capture callback only when all images have been fully loaded
1068
* Discovered: [Safari 5 issue](https://github.com/kangax/fabric.js/issues/2241) please adapt fabric.js manually to solve it
1069
 
1070
### 1.1.1
1071
* Fix: CSV export issue on date based charts
1072
* Fix: Enhanced migration script to obtain more settings
1073
 
1074
### 1.1.0
1075
* Fix: Print issue on safari which captured the actual page instead of the export
1076
* Added: IE9 download fallback for `text/plain` and `image/*` mime types (CSS has been modified)
1077
* Added: `toImage` method; returns `img` element with embedded base64 imagery
1078
* Added: `getBase64` option in `toSVG`
1079
* Added: `toImage` usage in `toPRINT` to be able to choose the image type + settings.
1080
* Added: `lossless` option in `toPRINT` (experimental)
1081
 
1082
### 1.0.9
1083
* Added: IE9 base64 export
1084
* Added: Third party updates + minified versions
1085
 
1086
### 1.0.8
1087
* Fix: IE8 issue which prevents the chart from initiating
1088
 
1089
### 1.0.7
1090
* Fix: issue on toCSV handling the header (first row)
1091
 
1092
### 1.0.6
1093
* Fix: issue on revalidation the chart/map
1094
* Added: [path](http://docs.amcharts.com/3/javascriptcharts/AmSerialChart#path) to load the libaries by default
1095
 
1096
### 1.0.5
1097
* Added: divId to be able to place the menu within an external container
1098
* Added: menuWalker to replace the whole menu generation
1099
* Added: menuReviver to adapt menu items before being appended to the list
1100
* Added: libs.async to load dependencies asynchronous (default true)
1101
 
1102
### 1.0.4
1103
* Considering classNamePrefix (dont't forget to adapt export.css)
1104
* Added: safety delay on print restore to ensure capturing the canvas
1105
 
1106
### 1.0.3
1107
* Fix: flagged relative image paths as tainted
1108
 
1109
### 1.0.2
1110
* Fix: compabitily on array method extension such as PrototypeJS
1111
 
1112
### 1.0.1
1113
* Added: libs.reload: false, script tag crawling to avoid multiple insertions
1114
* Fix: IE10 bug on print
1115
* Fix: migration bug, replaces menu instead of appending
1116
 
1117
### 1.0
1118
* Initial release