Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

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