Name |
Date |
Size |
#Lines |
LOC |
||
---|---|---|---|---|---|---|
.. | 01-Mar-2020 | - | ||||
examples/ | H | 01-Mar-2020 | - | 2,340 | 2,152 | |
lang/ | H | 01-Mar-2020 | - | 182 | 144 | |
libs/ | H | 01-Mar-2020 | - | 111,360 | 82,310 | |
shapes/ | H | 01-Mar-2020 | - | 31 | 31 | |
LICENSE | H A D | 17-Mar-2017 | 11.1 KiB | 203 | 169 | |
README.md | H A D | 17-Mar-2017 | 35.4 KiB | 1,100 | 851 | |
export.css | H A D | 17-Mar-2017 | 33.1 KiB | 348 | 336 | |
export.js | H A D | 17-Mar-2017 | 93.3 KiB | 3,174 | 2,396 | |
export.min.js | H A D | 17-Mar-2017 | 45.5 KiB | 2 | 2 |
README.md
1# amCharts Export 2 3Version: 1.4.13 4 5 6## Description 7 8This plugin adds export capabilities to all amCharts products - charts and maps. 9 10It allows annotating and exporting chart or related data to various bitmap, 11vector, document or data formats, such as PNG, JPG, PDF, SVG, JSON, XLSX and 12many more. 13 14 15## Important notice 16 17Please note that due to security measures implemented in modern browsers, some 18or all export options might not work if the web page is loaded locally (via 19file:///) 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 25bundled 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 32Or 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``` 44AmCharts.makeChart( "chartdiv", { 45 ..., 46 "export": { 47 "enabled": true 48 } 49} ); 50``` 51 52### ... OR set your own custom options: 53 54``` 55AmCharts.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 80The plugin relies on a number of different libraries, to export images, draw 81annotations or generate download files. 82 83Those libraries need to be loaded for the plugin to work properly. 84 85There are two ways to load them. Choose the one that is right: 86 87### 1) Automatic (preferred) 88 89All libraries required for plugin operation are included withing plugins */libs* 90subdirectory. 91 92The plugin will automatically try to look in chart's [`path`](http://docs.amcharts.com/3/javascriptcharts/AmSerialChart#path) 93property. 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 - 95the libraries will load on-demand. 96 97If you are using relative url, note that it is relative to the web page you are 98displaying your chart on, not the export.js library. 99 100In 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 105You can also load all those JavaScript libraries by `<script>` tags. Since 106loading of libraries is on by default you will need to turn it off by setting 107`"libs": { "autoLoad": false }` 108 109Here is a full list of the files that need to be loaded for each operation: 110 111File | Located in | Required for 112---- | ---------- | ------------ 113fabric.min.js | libs/fabric.js/ | Any export operation 114FileSaver.js | libs/FileSaver.js/ | Used to offer download files 115pdfmake.min.js | libs/pdfmake/ | Export to PDF format 116vfs_fonts.js | libs/pdfmake/ | Export to PDF format 117jszip.js | libs/jszip/ | Export to XLSX format 118xlsx.js | libs/xlsx/ | Export to XLSX format 119 120 121## Complete list of available export settings 122 123Property | Default | Description 124-------- | ------- | ----------- 125backgroundColor | #FFFFFF | RGB code of the color for the background of the exported image 126enabled | true | Enables or disables export functionality 127divId | | ID or a reference to div object in case you want the menu in a separate container. 128fabric | {} | Overwrites the default drawing settings (fabricJS library) 129fallback | {} | Holds the messages to guide the user to copy the generated output; `false` will disable the fallback feature 130fileName | amCharts | A file name to use for generated export files (an extension will be appended to it based on the export format) 131legend | {} | Places the legend in case it is within an external container ([skip to chapter](#adding-external-legend)) 132libs | | 3rd party required library settings (see the above section) 133menu | [] | A list of menu or submenu items (see the next chapter for details) 134pdfMake | {} | Overwrites the default settings for PDF export (pdfMake library) 135position | top-right | A position of export icon. Possible values: "top-left", "top-right" (default), "bottom-left", "bottom-right" 136removeImages | true | If true export checks for and removes "tainted" images that area lodead from different domains 137delay | | General setting to delay the capturing of the chart ([skip to chapter](#delay-the-capturing-before-export)) 138exportFields | [] | If set, only fields in this array will be exported ( data export only ) 139exportTitles | false | Exchanges the data field names with it's dedicated title ( data export only ) 140columnNames | {} | 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. 141exportSelection | false | Exports the current data selection only ( data export only ) 142dataDateFormat | | Format to convert date strings to date objects, uses by default charts dataDateFormat ( data export only ) 143dateFormat | YYYY-MM-DD | Formats the category field in given date format ( data export only ) 144keyListener | false | If true it observes the pressed keys to undo/redo the annotations 145fileListener | false | If true it observes the drag and drop feature and loads the dropped image file into the annotation 146drawing | {} | Object which holds all possible settings for the annotation mode ([skip to chapter](#annotation-settings)) 147overflow | 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 152Plugin includes a way to completely control what is displayed on export menu. 153You can set up menus, sub-menus, down to any level. You can even add custom 154items there that execute your arbitrary code on click. It's so configurable 155it makes us sick with power ;) 156 157The top-level menu is configured via `menu` property under `export`. It should 158always be an array, even if you have a single item in it. 159 160The array items could be either objects or format codes. Objects will allow you 161to specify labels, action, icon, child items and even custom code to be executed 162on click. 163 164Simple format codes will assume you need an export to that format. 165 166### Simple menu setup 167 168Here'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 180The above will display a menu out of three options when you hover on export 181icon: 182 183* PNG 184* JPG 185* CSV 186 187When clicked the plugin will trigger export to a respective format. 188 189If that is all you need, you're all set. 190 191Please note that we have wrapped out menu into another menu item, so that only 192the icon is displayed until we roll over the icon. This means that technically 193we have a two-level hierarchical menu. 194 195If we opmitted that first step, the chart would simply display a format list 196right there on the chart. 197 198### Advanced menu setup 199 200However, you can do so much more with the menu. 201 202Let's add more formats and organize image and data formats into separate 203submenus. 204 205To 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 223Now 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 233We 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 246The magic does not end here, though. 247 248### Adding custom click events to menu items 249 250Just like we set `label` and `format` properties for menu item, we can set 251`click` as well. 252 253This 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 270In case you have an external legend you need to define the position where it should get placed in your export. 271By 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 285By passing the `menuReviver` callback function you can modify the resulting menu 286item or relative container, before it gets appended to the list (`ul`). The 287function 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 300Some 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 314Below you will find a list of parameters that you can override for each format: 315 316**JPG** 317 318Property | Default | Available values | Description 319--------- | ------- | ---------------- | ----------- 320quality |1 | 0-1 | A quality of the resulting JPG image 321multiplier | 1 | number | Set this to non-1 number to resize the resulting image by 322 323**PNG** 324 325Property | Default | Available values | Description 326--------- | ------- | ---------------- | ----------- 327quality | 1 | 0-1 | A quality of the resulting JPG image 328multiplier | 1 | number | Set this to non-1 number to resize the resulting image by 329 330**PDF** 331 332Property | Default | Available values | Description 333--------- | ------- | ---------------- | ----------- 334multiplier | 2 | number | Set this to non-1 number to resize the resulting image by 335 336**PRINT** 337 338Property | Default | Available values | Description 339--------- | ------- | ---------------- | ----------- 340delay | 1 | number | Delay by number of seconds before triggering print 341lossless | false | true/false | Enable or disable image optimization when printing 342 343**CSV** 344 345Property | Default | Available values | Description 346--------- | ------- | ---------------- | ----------- 347delimiter | "," | string | A string to use as a column delimiter 348quotes | true | true/false | Set whether to enclose strings in doublequotes 349escape | true | true/false | Set whether to escape strings 350withHeader | true | true/false | Add header row with column names 351 352**XLSX** 353 354Property | Default | Available values | Description 355--------- | ------- | ---------------- | ----------- 356dateFormat | "dateObject" | "dateObject"\|"string" | Whether to export dates as dates recognisable by Excel or formatted as strings 357withHeader | true | true/false | Add header row with column names 358stringify | false | true/false | Convert all cell content to strings 359 360 361### Menu walker 362 363In case you don't like our structure, go ahead and write your own recursive 364function 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 376Adding menu item to print the chart or map is as easy as adding export ones. You 377just use "PRINT" as `format`. I.e.: 378 379``` 380"export": { 381 "menu": [ 382 "PNG", 383 "SVG", 384 "PRINT" 385 ] 386} 387``` 388 389Or 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 406OK, this one is so cool, you'll need a class 700 insulation jacket. 407 408By 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 426Now, when you click on the "Annotate" item in the menu, the chart will turn into 427an image editor which you can actual draw on and the menu gets replaced by the 428default annotation menu. 429 430If 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 451Now, when you turn on the annotation mode, your own submenu will display, 452allowing to export the image into either PNG, JPG, SVG or PDF. 453 454And that's not even the end of it. You can add menu items to cancel, undo, redo 455and 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 489Since 1.2.1 it's also possible to set some of the annotation options without the 490need to re-define the whole menu structure. You can easily adjust the choice of 491modes, colors, widths or shapes, and set the defaults when entering the 492annotation mode. 493 494Following 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 523If you need to filter the drawn elements, you can pass the `reviver` method in 524your global configuration, or pass it to the `capture` method if you export 525manually. For example, to hide all free labels you can simply do something like 526the 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 541In some cases you may want to delay the capturing of the current chart snapshot 542to highlight the current value. For this you can simply define the 'delay' 543property 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 561Since version 1.1.7 the plugin introduces some events you can use. For example 562the `afterCapture` event allows you to add some texts or images which can't be 563seen on the regular chart but only the generated export. Use it to watermark 564your 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 598Name | Arguments | Description 599---- | --------- | ----------- 600beforeCapture | [menu item setup](#a-list-of-menu-item-properties) | Called before the SVG element gets converted 601afterCapture | [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 606Property | Description 607-------- | ----------- 608action | Set to "draw" if you want the item to trigger annotation mode 609class | Class name applied to the tag 610click | Function handler invoked upon click on menu item 611format | A format to export chart/map to upon click (see below for a list of available formats) 612icon | Icon file (will use chart's [path](http://docs.amcharts.com/3/javascriptcharts/AmSerialChart#path) if the URL is not full) 613label | Text label to be displayed 614menu | An array of submenu items 615title | A title attribute of the link 616backgroundColor | The background color of the canvas 617fileName | A file name to use for generated export files (an extension will be appended to it based on the export format) 618extension | File extension for the generated export file (uses format default if not defined) 619mimeType | Internet media type to generate the export file (usses format default if not defined) 620pageSize | A string or { width: number, height: number } ([details](#exporting-to-pdf)) 621pageOrientation | By default we use portrait, you can change it to landscape if you wish ([details](#exporting-to-pdf)) 622pageMargins | [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins ([details](#exporting-to-pdf)) 623content | Array of elements which represents the content ([details](#exporting-to-pdf)) 624multiplier | Scale factor for the generated image 625lossless | Flag to print the actual vector graphic instead of buffered bitmap (print option only, experimental) 626delay | A numeric value to delay the capturing in seconds ([details](#delay-the-capturing-before-export)) 627exportFields | [] | If set, only fields in this array will be exported ( data export only ) 628exportTitles | Exchanges the data field names with it's dedicated title ( data export only ) 629columnNames | An object of key/value pairs to use as column names when exporting ( data export only ) 630exportSelection | Exports the current data selection only ( data export only ) 631dataDateFormat | Format to convert date strings to date objects, uses by default charts dataDateFormat ( data export only ) 632dateFormat | Formats the category field in given date format ( data export only ) 633 634Available `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 647When exporting to PDF, you can set and modify the content of the resulting 648document. I.e. add additional text and/or modify image size, etc. 649 650To do that, you can use menu item's `content` property. 651 652Each item in `content` represents either a text line (string) or an exported 653image. 654 655To add a text line, simply use a string. It can even be a JavaScript variable or 656a function that returns a string. 657 658To include exported image, use `image: "reference"`. 659 660Additionally, you can add `fit` property which is an array of pixel dimensions, 661you want the image to be scaled to fit into. 662 663Here'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 675Property | Description 676-------- | ----------- 677pageSize | a string or { width: number, height: number } 678pageOrientation | by default we use portrait, you can change it to landscape if you wish 679pageMargins | [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins 680content | array of elements which represents the content ([full description](https://github.com/bpampuch/pdfmake/)) 681 682Pagesize | Dimensions in pixel 683-------- | ----------- 6844A0 | [4767.87, 6740.79] 6852A0 | [3370.39, 4767.87] 686A0 | [2383.94, 3370.39] 687A1 | [1683.78, 2383.94] 688A2 | [1190.55, 1683.78] 689A3 | [841.89, 1190.55] 690A4 | [595.28, 841.89] 691A5 | [419.53, 595.28] 692A6 | [297.64, 419.53] 693A7 | [209.76, 297.64] 694A8 | [147.40, 209.76] 695A9 | [104.88, 147.40] 696A10 | [73.70, 104.88] 697B0 | [2834.65, 4008.19] 698B1 | [2004.09, 2834.65] 699B2 | [1417.32, 2004.09] 700B3 | [1000.63, 1417.32] 701B4 | [708.66, 1000.63] 702B5 | [498.90, 708.66] 703B6 | [354.33, 498.90] 704B7 | [249.45, 354.33] 705B8 | [175.75, 249.45] 706B9 | [124.72, 175.75] 707B10 | [87.87, 124.72] 708C0 | [2599.37, 3676.54] 709C1 | [1836.85, 2599.37] 710C2 | [1298.27, 1836.85] 711C3 | [918.43, 1298.27] 712C4 | [649.13, 918.43] 713C5 | [459.21, 649.13] 714C6 | [323.15, 459.21] 715C7 | [229.61, 323.15] 716C8 | [161.57, 229.61] 717C9 | [113.39, 161.57] 718C10 | [79.37, 113.39] 719RA0 | [2437.80, 3458.27] 720RA1 | [1729.13, 2437.80] 721RA2 | [1218.90, 1729.13] 722RA3 | [864.57, 1218.90] 723RA4 | [609.45, 864.57] 724SRA0 | [2551.18, 3628.35] 725SRA1 | [1814.17, 2551.18] 726SRA2 | [1275.59, 1814.17] 727SRA3 | [907.09, 1275.59] 728SRA4 | [637.80, 907.09] 729EXECUTIVE | [521.86, 756.00] 730FOLIO | [612.00, 936.00] 731LEGAL | [612.00, 1008.00] 732LETTER | [612.00, 792.00] 733TABLOID | [792.00, 1224.00] 734 735## Styling the export menu 736 737The plugin comes with a default CSS file `export.css`. You just need to include 738it on your page. 739 740Feel free to override any styles defined in it, create your own version and 741modify as you see fit. 742 743If you choose to modify it, we suggest creating a copy so it does not get 744overwritten when you update amCharts or plugin. 745 746 747## Plugin API 748 749We explained how you can define custom functions to be executed on click on 750export menu items. 751 752Those functions can tap into plugin's methods to augment it with some custom 753functionality. 754 755Here'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 772The above will use plugin's internal `capture` method to capture it's current 773state and `toJPG()` method to export the chart to JPEG format. 774 775Yes, you're right, it's the exact equivalent of just including "JPG" string. The 776code is here for the explanatory purposes. 777 778Here's a full list of API functions available for your consumption: 779 780Function | Parameters | Description 781-------- | ---------- | ----------- 782toJPG | (object) options, (function) callback | Prepares a JPEG representation of the chart and passes the binary data to the callback function 783toPNG | (object) options, (function) callback | Prepares a PNG representation of the chart and passes the binary data to the callback function 784toSVG | (object) options, (function) callback | Prepares a SVG representation of the chart and passes the binary data to the callback function 785toPDF | (object) options, (function) callback | Prepares a PDF representation of the chart and passes the binary data to the callback function 786toJSON | (object) options, (function) callback | Prepares a JSON and passes the plain data to the callback function 787toCSV | (object) options, (function) callback | Prepares a CSV and passes the plain data to the callback function 788toXLSX | (object) options, (function) callback | Prepares a XLSX representation of the chart and passes the binary data to the callback function 789toBlob | (object) options, (function) callback | Prepares a BLOB and passes the instance to the callback function 790toCanvas | (object) options, (function) callback | Prepares a Canvas and passes the element to the callback function 791toArray | (object) options, (function) callback | Prepares an Array and passes the data to the callback function 792toImage | (object) options, (function) callback | Generates an image element which holds the output in an embedded base64 data url 793 794## Fallback for IE9 795 796Unfortunately, Internet Explorer 9 has restrictions in place that prevent the 797download of locally-generated files. In this case the plugin will place the 798generated image along download instructions directly over the chart area. 799 800To avoid having a bigger payload by including senseless polyfills to your site, 801you 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 807This 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 816In case you want to change our default messages you can modify it like 817following. 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 830This plugin requires at least 3.13 version of JavaScript Charts, JavaScript 831Stock Chart or JavaScript Maps. 832 833The export will also need relatively recent browsers. 834 835IE10 and up are supported. 836 837Partial support for IE9; Fallback mechanism. 838 839IE8 and older are not supported I'm afraid. Hey, it's time to upgrade! 840 841 842## Demos 843 844They're all in subdirectory /examples. 845 846 847## Extending this plugin 848 849You're encouraged to modify, extend and make derivative plugins out of this 850plugin. 851 852You can modify files, included in this archive or, better yet, fork this project 853on GitHub: 854 855https://github.com/amcharts/export 856 857We're curious types. Please let us know (contact@amcharts.com) if you do create 858something new out of this plugin. 859 860 861## License 862 863This plugin is licensed under Apache License 2.0. 864 865This basically means you're free to use or modify this plugin, even make your 866own versions or completely different products out of it. 867 868Please see attached file "license.txt" for the complete license or online here: 869 870http://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.13 884* Fixed: Issue on balloons showing it's content as HTML added "textContent" as alternative getter 885 886### 1.4.12 887* Fixed: clipPath issue on SVG export (workaround until fabricJS handles that by themselves) 888 889### 1.4.11 890* Fixed: Depth issue on value labels on columns 891 892### 1.4.10 893* Fixed: potential vulnerability with anonymous function declaration 894 895### 1.4.9 896* Added: Radial gradient support on pie charts (new feature in amCharts v3.18.0) 897 898### 1.4.8 899* Fixed: Clippath positioning issue 900* Fixed: Issue removing tainted images 901* Fixed: Hashbanged url interpretation issue in IE (related to reusable svg nodes) 902 903### 1.4.7 904* Fixed: Zeroes were being exported to data formats as empty strings rather than numbers 905 906### 1.4.6 907* Fixed: Loading issue with patterns in firefox 908 909### 1.4.5 910* Fixed: Issue with the "canvas-container" on chart revalidations 911 912### 1.4.4 913* Added: Balloon text orientation 914* Fixed: Issue with multiline label positioning 915 916### 1.4.3 917* 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) 918 919### 1.4.2 920* Added: `overflow` flag to overwrite the css attribute 'overflow' of the chart container 921 922### 1.4.1 923* Fixed: cropped bullets on XY charts 924 925### 1.4.0 926* Fixed: beforeCapture issue on SVG document changes 927* Added: Namespace check within globals for required third party software 928 929### 1.3.9 930* Fixed: Base tag gradient drawing issue (includes embedded hotfix for fabricjs commit #c9745ff) 931 932### 1.3.8 933* Fixed: Base tag clip path issue which draw the lines outside the plotarea 934 935### 1.3.7 936* Added: `columnNames` property, which allows overriding column names when expoerting chart data 937 938### 1.3.6 939* Fixed: Checking parseDates for category values for date interpretation 940 941### 1.3.5 942* Fixed: Scrollbar issue hiding the unselected scrollbar background area 943 944### 1.3.4 945* Fixed: Absolute legend positioning issue. 946 947### 1.3.3 948* Added: English as default language when define language does not exist 949 950### 1.3.2 951* Added: ([drawing.autoClose](#annotation-settings)) new flag to automatically close the annotation mode after download 952* Fixed: Internal pdfMake issue which prevented to generate PDFs in IE10, uses custom build until officially fixed 953 954### 1.3.1 955* Added: Timestamp date fields get converted as dates 956* Fixed: XLSX respects given dateFormat 957* Changed: JSON exports date fields as date objects by default 958 959### 1.3.0 960* Fixed: Issue hiding drawing container on "drawing.done" 961* Fixed: Legend positioning issue with charts created in a hidden container 962 963### 1.2.9 964* Fixed: Issue with missing `export.css` which showed the canvas 965* Fixed: Issue with empty menu items; adds list only with childNodes > 1 966* Fixed: Issue with hidden bullets; caused by wrong clip-paths 967* Added: Polish language file ( thanks to piernik ) 968 969### 1.2.8 970* Fixed: Issue in `gatherClassName` checking element type 971 972### 1.2.7 973* Fixed: Generates true JPG file instead PNG with JPG extension 974* Fixed: Drag&Drop feature does not activate automatically the annotation mode 975 976### 1.2.6 977* Added: Native EXCEL date cell type for date fields, forced by default 978* Fixed: Issue in `getChartData` which ignored given data array ( affected API usage only ) 979 980### 1.2.5 981* Added: Illustrator support; `reviver` method to `toSVG`; converts by default RGBA to HEX colors codes and places it's dedicated opacity property 982* Fixed: Multiline text positioning / line heights 983 984### 1.2.4 985* Added: `exportSelection` exports the current data selection 986* Added: `dataDateFormat` converts the date-strings to date objects with given format 987* Added: `dateFormat` converts the date in given format 988* Added: `processData` to format date fields and translate fields 989* Changed: `gatherChartData` collects data, fields and titles only and uses `processData` to format 990 991### 1.2.3 992* Fixed: Positioning issue on multiline labels 993 994### 1.2.2 995* Fixed: Issue with object changes which overwrite undo/redo object states 996* Fixed: Issue with default fontSize 997 998### 1.2.1 999* Added: Possibility to add text, lines, shapes ([details](#annotation-settings)) 1000* Added: Possibility to change drawing mode, color, opacity and size 1001* Added: Possibility to select,move,scale drawn items 1002* Added: Possibility to define dedicated drawing menu `drawing.menu` individual menu items get prioritised 1003* Added: Dropbox feature which allows to drag images into the chart `fileListener: true` 1004* Added: Keylistener which allows to undo/redo/remove the drawn steps `keyListener: true` 1005* Added: Isolated plugin to be able to initiate manually regardless of the chart setup 1006* Fixed: Conflict with prototypeJS which caused tainted return value from `toArray` 1007 1008### 1.2.0 1009* Fixed: Issue with deepMerge which did not allow to modfiy the pdfMake default settings 1010* Fixed: Menu issue which did not allow to modify the pdfMake settings 1011* Fixed: Undo issue which needed double attempts in the beginning 1012* Added: Drag/Scale feature in annotation mode; toggles automatically between drawing/dragging while hovering over the elements 1013 1014### 1.1.9 1015* Added: `exportTitles` available in general or individual setup which exchanges the data field names with it's dedicated title 1016* Fix: Interpolates missing data fields across data provider 1017 1018### 1.1.8 1019* Added: Temporary workaround to bypass FileSaver check; issue prevented to open blob urls in safari browser 1020 1021### 1.1.7 1022* Added: beforeCapture to be able to indicate the export process in some way 1023* Added: afterCapture to be able to modify the fabric instance if needed 1024* Added: SVG element as second argument within the "reviver" callback 1025* Added: Multiple arguments supported in "handleCallback" method 1026 1027### 1.1.6 1028* Fix: Pattern render issue in IE; 1029* Added: Multiline support (workaround until fabricJS supports tspan) 1030* Added: General delay property to delay the capturing of the chart ([details](#delay-the-capturing-before-export)) 1031 1032### 1.1.5 1033* Fix: Tainted check issue which failed if location.origin wasn't available 1034* Fix: Capture image check, triggers callback only if all images have been loaded 1035* Added: Multi language support; embedded english by default; overtakes chart language 1036* Added: Delay feature, which allows to delay the capturing ([details](#delay-the-capturing-before-export)) 1037 1038### 1.1.4 1039* Fix: Did not collect clip-path and pattern from legend 1040* Fix: External legend did not respect given width when positioned on left side 1041* Fix: Improved tainted image detection 1042 1043### 1.1.3 1044* Added: Added reviver in capturing method to filter the drawn chart elements 1045 1046### 1.1.2 1047* Added: Generalized fallback; does a lookup on the Blob constructor 1048* Fix: Wait for lazy images, triggers capture callback only when all images have been fully loaded 1049* Discovered: [Safari 5 issue](https://github.com/kangax/fabric.js/issues/2241) please adapt fabric.js manually to solve it 1050 1051### 1.1.1 1052* Fix: CSV export issue on date based charts 1053* Fix: Enhanced migration script to obtain more settings 1054 1055### 1.1.0 1056* Fix: Print issue on safari which captured the actual page instead of the export 1057* Added: IE9 download fallback for `text/plain` and `image/*` mime types (CSS has been modified) 1058* Added: `toImage` method; returns `img` element with embedded base64 imagery 1059* Added: `getBase64` option in `toSVG` 1060* Added: `toImage` usage in `toPRINT` to be able to choose the image type + settings. 1061* Added: `lossless` option in `toPRINT` (experimental) 1062 1063### 1.0.9 1064* Added: IE9 base64 export 1065* Added: Third party updates + minified versions 1066 1067### 1.0.8 1068* Fix: IE8 issue which prevents the chart from initiating 1069 1070### 1.0.7 1071* Fix: issue on toCSV handling the header (first row) 1072 1073### 1.0.6 1074* Fix: issue on revalidation the chart/map 1075* Added: [path](http://docs.amcharts.com/3/javascriptcharts/AmSerialChart#path) to load the libaries by default 1076 1077### 1.0.5 1078* Added: divId to be able to place the menu within an external container 1079* Added: menuWalker to replace the whole menu generation 1080* Added: menuReviver to adapt menu items before being appended to the list 1081* Added: libs.async to load dependencies asynchronous (default true) 1082 1083### 1.0.4 1084* Considering classNamePrefix (dont't forget to adapt export.css) 1085* Added: safety delay on print restore to ensure capturing the canvas 1086 1087### 1.0.3 1088* Fix: flagged relative image paths as tainted 1089 1090### 1.0.2 1091* Fix: compabitily on array method extension such as PrototypeJS 1092 1093### 1.0.1 1094* Added: libs.reload: false, script tag crawling to avoid multiple insertions 1095* Fix: IE10 bug on print 1096* Fix: migration bug, replaces menu instead of appending 1097 1098### 1.0 1099* Initial release 1100