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