amCharts Export
amCharts Export
Version: 1.4.20
Description
This plugin adds export capabilities to all amCharts products - charts and maps.
It allows annotating and exporting chart or related data to various bitmap, vector, document or data formats, such as PNG, JPG, PDF, SVG, JSON, XLSX and many more.
Important notice
Please note that due to security measures implemented in modern browsers, some or all export options might not work if the web page is loaded locally (via file:///) or contain images loaded from different host than the web page itself.
Usage
1) Include the minified version of file of this plugin as well as the
bundled CSS file. I.e.:
<script src="amcharts/plugins/export/export.min.js"></script>
<link type="text/css" href="amcharts/plugins/export/export.css" rel="stylesheet">
Or if you’d rather use amCharts CDN:
<script src="//cdn.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link type="text/css" href="//cdn.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet">
(this needs to go after all the other amCharts includes)
2) Enable export
with default options:
AmCharts.makeChart( "chartdiv", {
...,
"export": {
"enabled": true
}
} );
… OR set your own custom options:
AmCharts.makeChart( "chartdiv", {
...,
"export": {
"enabled": true,
"menu": [ {
"class": "export-main",
"menu": [ {
"label": "Download",
"menu": [ "PNG", "JPG", "CSV" ]
}, {
"label": "Annotate",
"action": "draw",
"menu": [ {
"class": "export-drawing",
"menu": [ "PNG", "JPG" ]
} ]
} ]
} ]
}
} );
Loading external libraries needed for operation of this plugin
The plugin relies on a number of different libraries, to export images, draw annotations or generate download files.
Those libraries need to be loaded for the plugin to work properly.
There are two ways to load them. Choose the one that is right:
1) Automatic (preferred)
All libraries required for plugin operation are included withing plugins /libs subdirectory.
The plugin will automatically try to look in chart’s path
property. If your plugin files are located within plugins folder under amcharts
(as is the case with the default distributions), you don’t need to do anything -
the libraries will load on-demand.
If you are using relative url, note that it is relative to the web page you are displaying your chart on, not the export.js library.
In case you’ve moved the libs folder you need to tell the plugin where it is
"libs": { "path": "../libs/" }
2) Manual
You can also load all those JavaScript libraries by <script>
tags. Since
loading of libraries is on by default you will need to turn it off by setting
"libs": { "autoLoad": false }
Here is a full list of the files that need to be loaded for each operation:
| File | Located in | Required for |
|---|---|---|
| fabric.min.js | libs/fabric.js/ | Any export operation |
| FileSaver.js | libs/FileSaver.js/ | Used to offer download files |
| pdfmake.min.js | libs/pdfmake/ | Export to PDF format |
| vfs_fonts.js | libs/pdfmake/ | Export to PDF format |
| jszip.js | libs/jszip/ | Export to XLSX format |
| xlsx.js | libs/xlsx/ | Export to XLSX format |
Complete list of available export settings
| Property | Default | Description |
|---|---|---|
| backgroundColor | #FFFFFF | RGB code of the color for the background of the exported image |
| enabled | true | Enables or disables export functionality |
| divId | ID or a reference to div object in case you want the menu in a separate container. | |
| fabric | {} | Overwrites the default drawing settings (fabricJS library) |
| fallback | {} | Holds the messages to guide the user to copy the generated output; false will disable the fallback feature |
| fileName | amCharts | A file name to use for generated export files (an extension will be appended to it based on the export format) |
| legend | {} | Places the legend in case it is within an external container (skip to chapter) |
| libs | 3rd party required library settings (see the above section) | |
| menu | [] | A list of menu or submenu items (see the next chapter for details) |
| pdfMake | {} | Overwrites the default settings for PDF export (pdfMake library) |
| position | top-right | A position of export icon. Possible values: “top-left”, “top-right” (default), “bottom-left”, “bottom-right” |
| removeImages | true | If true export checks for and removes “tainted” images that area lodead from different domains |
| delay | General setting to delay the capturing of the chart (skip to chapter) | |
| exportFields | [] | If set, only fields in this array will be exported ( data export only ) |
| exportTitles | false | Exchanges the data field names with it’s dedicated title ( data export only ) |
| 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. |
| exportSelection | false | Exports the current data selection only ( data export only ) |
| dataDateFormat | Format to convert date strings to date objects, uses by default charts dataDateFormat ( data export only ) | |
| dateFormat | YYYY-MM-DD | Formats the category field in given date format ( data export only ) |
| keyListener | false | If true it observes the pressed keys to undo/redo the annotations |
| fileListener | false | If true it observes the drag and drop feature and loads the dropped image file into the annotation |
| drawing | {} | Object which holds all possible settings for the annotation mode (skip to chapter) |
| overflow | true | Flag to overwrite the css attribute ‘overflow’ of the chart container to avoid cropping the menu on small container |
| border | {} | An object of key/value pairs to define the overlaying border |
| processData | A function which can be used to change the dataProvider when exporting to CSV, XLSX, or JSON |
Configuring export menu
Plugin includes a way to completely control what is displayed on export menu. You can set up menus, sub-menus, down to any level. You can even add custom items there that execute your arbitrary code on click. It’s so configurable it makes us sick with power ;)
The top-level menu is configured via menu
property under export
. It should
always be an array, even if you have a single item in it.
The array items could be either objects or format codes. Objects will allow you to specify labels, action, icon, child items and even custom code to be executed on click.
Simple format codes will assume you need an export to that format.
Simple menu setup
Here’s a sample of the simple menu setup that allows export to PNG, JPG and CSV:
"export": {
"enabled": true,
"menu": [ {
"class": "export-main",
"menu": [ "PNG", "JPG", "CSV" ]
} ]
}
The above will display a menu out of three options when you hover on export icon:
- PNG
- JPG
- CSV
When clicked the plugin will trigger export to a respective format.
If that is all you need, you’re all set.
Please note that we have wrapped out menu into another menu item, so that only the icon is displayed until we roll over the icon. This means that technically we have a two-level hierarchical menu.
If we opmitted that first step, the chart would simply display a format list right there on the chart.
Advanced menu setup
However, you can do so much more with the menu.
Let’s add more formats and organize image and data formats into separate submenus.
To add a submenu to a menu item, simply add a menu
array as its own property:
"export": {
"enabled": true,
"menu": [ {
"class": "export-main",
"menu": [ {
"label": "Download as image",
"menu": [ "PNG", "JPG", "SVG" ]
}, {
"label": "Download data",
"menu": [ "CSV", "XLSX" ]
} ]
} ]
}
Now we have a hierarchical menu with the following topology:
- Download as image
- PNG
- JPG
- SVG
- Download data
- CSV
- XLSX
We can mix “string” and “object” formats the way we see fit, i.e.:
"export": {
"menu": [
"PNG",
{ "label": "JPEG",
"format": "JPG" },
"SVG"
]
}
The magic does not end here, though.
Adding custom click events to menu items
Just like we set label
and format
properties for menu item, we can set
click
as well.
This needs to be a function reference. I.e.:
"export": {
"menu": [
"PNG",
{ "label": "JPEG",
"click": function () {
alert( "Clicked JPEG. Wow cool!" );
} },
"SVG"
]
}
Adding external legend
In case you have an external legend you need to define the position where it should get placed in your export. By default it obtains the dimensions from the container but you can optionally overwrite those settings as shown below.
"export": {
"legend": {
"position": "top", // or "right", "bottom" and "left" are possible
"width": 200, // optional
"height": 200 // optional
}
}
Changing the dataProvider when exporting
If you want to change the dataProvider when exporting to CSV, XLSX, or JSON, you can use the processData
option:
"export": {
"processData": function (data) {
return data.slice(1, -1);
}
}
Adding overlaying border
In case you need a more visible separation of your chart for further processing you can add an overlaying border.
"export": {
"border": {
"stroke": "#000000", // HEX-CODE to define the border color
"strokeWidth": 1, // number which represents the width in pixel
"strokeOpacity": 1 // number which controls the opacity from 0 - 1
}
}
Menu item reviver
By passing the menuReviver
callback function you can modify the resulting menu
item or relative container, before it gets appended to the list (ul
). The
function takes two arguments and it needs to return a valid DOM element.
"export": {
"menuReviver": function(item,li) {
li.setAttribute("class","something special");
return li;
}
}
Format specific options that you can override using Menu item reviver
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:
"export": {
"enabled": true,
"menuReviver": function(cfg,li) {
if ( cfg.format == "CSV" ) {
cfg.delimiter = "\t";
}
return li;
}
}
Below you will find a list of parameters that you can override for each format:
JPG
| Property | Default | Available values | Description |
|---|---|---|---|
| quality | 1 | 0-1 | A quality of the resulting JPG image |
| multiplier | 1 | number | Set this to non-1 number to resize the resulting image by |
PNG
| Property | Default | Available values | Description |
|---|---|---|---|
| quality | 1 | 0-1 | A quality of the resulting JPG image |
| multiplier | 1 | number | Set this to non-1 number to resize the resulting image by |
| Property | Default | Available values | Description |
|---|---|---|---|
| multiplier | 2 | number | Set this to non-1 number to resize the resulting image by |
| Property | Default | Available values | Description |
|---|---|---|---|
| delay | 1 | number | Delay by number of seconds before triggering print |
| lossless | false | true/false | Enable or disable image optimization when printing |
CSV
| Property | Default | Available values | Description |
|---|---|---|---|
| delimiter | ”,” | string | A string to use as a column delimiter |
| quotes | true | true/false | Set whether to enclose strings in doublequotes |
| escape | true | true/false | Set whether to escape strings |
| withHeader | true | true/false | Add header row with column names |
XLSX
| Property | Default | Available values | Description |
|---|---|---|---|
| dateFormat | “dateObject” | “dateObject”|”string” | Whether to export dates as dates recognisable by Excel or formatted as strings |
| withHeader | true | true/false | Add header row with column names |
| stringify | false | true/false | Convert all cell content to strings |
Menu walker
In case you don’t like our structure, go ahead and write your own recursive
function to create the menu by the given list configured through menu
.
"export": {
"menuWalker": function(list,container) {
// some magic to generate the nested lists using the given list
}
}
Printing the chart
Adding menu item to print the chart or map is as easy as adding export ones. You
just use “PRINT” as format
. I.e.:
"export": {
"menu": [
"PNG",
"SVG",
"PRINT"
]
}
Or if you want to change the label:
"export": {
"menu": [
"PNG",
"SVG",
{
"format": "PRINT",
"label": "Print Chart"
}
]
}
Annotating the chart before export
OK, this one is so cool, you’ll need a class 700 insulation jacket.
By default each menu item triggers some kind of export. You can trigger an
“annotation” mode instead by including "action": "draw"
instead.
"export": {
"menu": [ {
"class": "export-main",
"menu": [ {
"label": "Download",
"menu": [ "PNG", "JPG", "CSV", "XLSX" ]
}, {
"label": "Annotate",
"action": "draw"
} ]
} ]
}
Now, when you click on the “Annotate” item in the menu, the chart will turn into an image editor which you can actual draw on and the menu gets replaced by the default annotation menu.
If you don’t like the detault annotation menu, you can define your own:
"export": {
"menu": [ {
"class": "export-main",
"menu": [ {
"label": "Download",
"menu": [ "PNG", "JPG", "CSV", "XLSX" ]
}, {
"label": "Annotate",
"action": "draw",
"menu": [ {
"class": "export-drawing",
"menu": [ "JPG", "PNG", "SVG", "PDF" ]
} ]
} ]
} ]
}
Now, when you turn on the annotation mode, your own submenu will display, allowing to export the image into either PNG, JPG, SVG or PDF.
And that’s not even the end of it. You can add menu items to cancel, undo, redo
and still be able to reuse the choices by using the actions draw.modes
,
draw.widths
, draw.colors
or draw.shapes
.
"export": {
"menu": [ {
"class": "export-main",
"menu": [ {
"label": "Download",
"menu": [ "PNG", "JPG", "CSV", "XLSX" ]
}, {
"label": "Annotate",
"action": "draw",
"menu": [ {
"class": "export-drawing",
"menu": [ {
label: "Size ...",
action: "draw.widths",
widths: [ 5, 20, 30 ] // replaces the default choice
}, {
"label": "Edit",
"menu": [ "UNDO", "REDO", "CANCEL" ]
}, {
"label": "Save",
"format": "PNG"
} ]
} ]
} ]
} ]
}
Annotation settings
Since 1.2.1 it’s also possible to set some of the annotation options without the need to re-define the whole menu structure. You can easily adjust the choice of modes, colors, widths or shapes, and set the defaults when entering the annotation mode.
Following setup shows you all available settings. If you don’t have the
drawing
property at all, it will falls back to the defaults.
"export": {
"drawing": {
"enabled": true, // Flag for `action: "draw"` menu items to toggle it's visibility
"shapes": [ "test.svg" ], // Choice of shapes offered in the menu (shapes are being loaded from the shapes folder)
"width": 2, // Width of the pencil and line when entering the annotation mode
"widths": [ 2, 10, 20 ], // Choice of widths offered in the menu
"color": "#000000", // Color of the pencil, line, text and shapes when entering the annotation mode
"colors": [ "#000000", "#FF0000" ] // Choice of colors offered in the menu
"opacity": 1, // Opacity of the pencil, line, text and shapes when entering the annotation mode
"opacities": [ 1, 0.8, 0.6, 0.4, 0.2 ] // Choice of opacity offered in the menu
"menu": [ ... ], // Shown menu when entering the annotation mode
"mode": "pencil", // Drawing mode when entering the annotation mode "pencil", "line" and "arrow" are available
"modes": [ "pencil" , "line", "arrow" ], // Choice of modes offered in the menu
"arrow": "end", // position of the arrow on drawn lines; "start","middle" and "end" are available
"autoClose": true // Flag to automatically close the annotation mode after download
}
}
If you need to filter the drawn elements, you can pass the reviver
method in
your global configuration, or pass it to the capture
method if you export
manually. For example, to hide all free labels you can simply do something like
the following:
"export": {
"menu": ["PNG"],
"reviver": function(obj) {
if ( obj.className == "amcharts-label" ) {
obj.opacity = 0;
}
}
}
Delay the capturing before export
In some cases you may want to delay the capturing of the current chart snapshot to highlight the current value. For this you can simply define the ‘delay’ property in your menu item:
"export": {
"delay": 3,
// or specifically on individual menu items
"menu": [{
"label": "PNG",
"format": "PNG",
"delay": 3
}]
}
Events
Since version 1.1.7 the plugin introduces some events you can use. For example
the afterCapture
event allows you to add some texts or images which can’t be
seen on the regular chart but only the generated export. Use it to watermark
your exported images.
"export": {
"afterCapture": function(menuConfig) {
var text = new fabric.Text("This is shown on exported image only", {
top: 50,
left: 100,
family: this.setup.chart.fontFamily,
size: this.setup.chart.fontSize * 2
});
this.setup.fabric.add(text);
},
// or specifically on individual menu items
"menu": [{
"label": "PNG",
"format": "PNG",
"afterCapture": function(menuConfig) {
var text = new fabric.Text("This is shown on exported image only", {
top: 50,
left: 100,
family: this.setup.chart.fontFamily,
size: this.setup.chart.fontSize * 2
});
this.setup.fabric.add(text);
}
}]
}
A list of the events
| Name | Arguments | Description |
|---|---|---|
| beforeCapture | menu item setup | Called before the SVG element gets converted |
| afterCapture | menu item setup | Called right before the passed callback of the capture method |
A list of menu item properties
| Property | Description | |
|---|---|---|
| action | Set to “draw” if you want the item to trigger annotation mode | |
| class | Class name applied to the tag | |
| click | Function handler invoked upon click on menu item | |
| format | A format to export chart/map to upon click (see below for a list of available formats) | |
| icon | Icon file (will use chart’s path if the URL is not full) | |
| label | Text label to be displayed | |
| menu | An array of submenu items | |
| title | A title attribute of the link | |
| backgroundColor | The background color of the canvas | |
| fileName | A file name to use for generated export files (an extension will be appended to it based on the export format) | |
| extension | File extension for the generated export file (uses format default if not defined) | |
| mimeType | Internet media type to generate the export file (usses format default if not defined) | |
| pageSize | A string or { width: number, height: number } (details) | |
| pageOrientation | By default we use portrait, you can change it to landscape if you wish (details) | |
| pageMargins | [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins (details) | |
| content | Array of elements which represents the content (details) | |
| multiplier | Scale factor for the generated image | |
| lossless | Flag to print the actual vector graphic instead of buffered bitmap (print option only, experimental) | |
| delay | A numeric value to delay the capturing in seconds (details) | |
| exportFields | [] | If set, only fields in this array will be exported ( data export only ) |
| exportTitles | Exchanges the data field names with it’s dedicated title ( data export only ) | |
| columnNames | An object of key/value pairs to use as column names when exporting ( data export only ) | |
| exportSelection | Exports the current data selection only ( data export only ) | |
| dataDateFormat | Format to convert date strings to date objects, uses by default charts dataDateFormat ( data export only ) | |
| dateFormat | Formats the category field in given date format ( data export only ) | |
| border | An object of key/value pairs to define the overlaying border |
Available format
values:
- JPG
- PNG
- SVG
- CSV
- JSON
- XLSX
Exporting to PDF
When exporting to PDF, you can set and modify the content of the resulting document. I.e. add additional text and/or modify image size, etc.
To do that, you can use menu item’s content
property.
Each item in content
represents either a text line (string) or an exported
image.
To add a text line, simply use a string. It can even be a JavaScript variable or a function that returns a string.
To include exported image, use image: "reference"
.
Additionally, you can add fit
property which is an array of pixel dimensions,
you want the image to be scaled to fit into.
Here’s an example of such export menu item:
{
"format": "PDF",
"content": [ "Saved from:", window.location.href, {
"image": "reference",
"fit": [ 523.28, 769.89 ] // fit image to A4
} ]
}
| Property | Description |
|---|---|
| pageSize | a string or { width: number, height: number } |
| pageOrientation | by default we use portrait, you can change it to landscape if you wish |
| pageMargins | [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins |
| content | array of elements which represents the content (full description) |
| Pagesize | Dimensions in pixel |
|---|---|
| 4A0 | [4767.87, 6740.79] |
| 2A0 | [3370.39, 4767.87] |
| A0 | [2383.94, 3370.39] |
| A1 | [1683.78, 2383.94] |
| A2 | [1190.55, 1683.78] |
| A3 | [841.89, 1190.55] |
| A4 | [595.28, 841.89] |
| A5 | [419.53, 595.28] |
| A6 | [297.64, 419.53] |
| A7 | [209.76, 297.64] |
| A8 | [147.40, 209.76] |
| A9 | [104.88, 147.40] |
| A10 | [73.70, 104.88] |
| B0 | [2834.65, 4008.19] |
| B1 | [2004.09, 2834.65] |
| B2 | [1417.32, 2004.09] |
| B3 | [1000.63, 1417.32] |
| B4 | [708.66, 1000.63] |
| B5 | [498.90, 708.66] |
| B6 | [354.33, 498.90] |
| B7 | [249.45, 354.33] |
| B8 | [175.75, 249.45] |
| B9 | [124.72, 175.75] |
| B10 | [87.87, 124.72] |
| C0 | [2599.37, 3676.54] |
| C1 | [1836.85, 2599.37] |
| C2 | [1298.27, 1836.85] |
| C3 | [918.43, 1298.27] |
| C4 | [649.13, 918.43] |
| C5 | [459.21, 649.13] |
| C6 | [323.15, 459.21] |
| C7 | [229.61, 323.15] |
| C8 | [161.57, 229.61] |
| C9 | [113.39, 161.57] |
| C10 | [79.37, 113.39] |
| RA0 | [2437.80, 3458.27] |
| RA1 | [1729.13, 2437.80] |
| RA2 | [1218.90, 1729.13] |
| RA3 | [864.57, 1218.90] |
| RA4 | [609.45, 864.57] |
| SRA0 | [2551.18, 3628.35] |
| SRA1 | [1814.17, 2551.18] |
| SRA2 | [1275.59, 1814.17] |
| SRA3 | [907.09, 1275.59] |
| SRA4 | [637.80, 907.09] |
| EXECUTIVE | [521.86, 756.00] |
| FOLIO | [612.00, 936.00] |
| LEGAL | [612.00, 1008.00] |
| LETTER | [612.00, 792.00] |
| TABLOID | [792.00, 1224.00] |
Styling the export menu
The plugin comes with a default CSS file export.css
. You just need to include
it on your page.
Feel free to override any styles defined in it, create your own version and modify as you see fit.
If you choose to modify it, we suggest creating a copy so it does not get overwritten when you update amCharts or plugin.
Plugin API
We explained how you can define custom functions to be executed on click on export menu items.
Those functions can tap into plugin’s methods to augment it with some custom functionality.
Here’s an example:
"export": {
menu: [ {
label: "JPG",
click: function() {
this.capture({},function() {
this.toJPG( {}, function( data ) {
this.download( data, "image/jpg", "amCharts.jpg" );
});
});
}
} ]
}
The above will use plugin’s internal capture
method to capture it’s current
state and toJPG()
method to export the chart to JPEG format.
Yes, you’re right, it’s the exact equivalent of just including “JPG” string. The code is here for the explanatory purposes.
Here’s a full list of API functions available for your consumption:
| Function | Parameters | Description |
|---|---|---|
| toJPG | (object) options, (function) callback | Prepares a JPEG representation of the chart and passes the binary data to the callback function |
| toPNG | (object) options, (function) callback | Prepares a PNG representation of the chart and passes the binary data to the callback function |
| toSVG | (object) options, (function) callback | Prepares a SVG representation of the chart and passes the binary data to the callback function |
| toPDF | (object) options, (function) callback | Prepares a PDF representation of the chart and passes the binary data to the callback function |
| toJSON | (object) options, (function) callback | Prepares a JSON and passes the plain data to the callback function |
| toCSV | (object) options, (function) callback | Prepares a CSV and passes the plain data to the callback function |
| toXLSX | (object) options, (function) callback | Prepares a XLSX representation of the chart and passes the binary data to the callback function |
| toBlob | (object) options, (function) callback | Prepares a BLOB and passes the instance to the callback function |
| toCanvas | (object) options, (function) callback | Prepares a Canvas and passes the element to the callback function |
| toArray | (object) options, (function) callback | Prepares an Array and passes the data to the callback function |
| toImage | (object) options, (function) callback | Generates an image element which holds the output in an embedded base64 data url |
Fallback for IE9
Unfortunately, Internet Explorer 9 has restrictions in place that prevent the download of locally-generated files. In this case the plugin will place the generated image along download instructions directly over the chart area.
To avoid having a bigger payload by including senseless polyfills to your site,
you may need to add following metatag in your <head>
of your HTML document.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This feature will kick in by default. If you want to disable it simply pass
false
to the fallback
parameter.
"export": {
fallback: false
}
In case you want to change our default messages you can modify it like following.
"export": {
fallback: {
text: "CTRL + C to copy the data into the clipboard.",
image: "Rightclick -> Save picture as... to save the image."
}
}
Requirements
This plugin requires at least 3.13 version of JavaScript Charts, JavaScript Stock Chart or JavaScript Maps.
The export will also need relatively recent browsers.
IE10 and up are supported.
Partial support for IE9; Fallback mechanism.
IE8 and older are not supported I’m afraid. Hey, it’s time to upgrade!
Demos
They’re all in subdirectory /examples.
Extending this plugin
You’re encouraged to modify, extend and make derivative plugins out of this plugin.
You can modify files, included in this archive or, better yet, fork this project on GitHub:
https://github.com/amcharts/export
We’re curious types. Please let us know<EMAIL_ADDRESS>if you do create something new out of this plugin.
License
This plugin is licensed under Apache License 2.0.
This basically means you’re free to use or modify this plugin, even make your own versions or completely different products out of it.
Please see attached file “license.txt” for the complete license or online here:
http://www.apache.org/licenses/LICENSE-2.0
Contact us
-<EMAIL_ADDRESS>- Web: http://www.amcharts.com/
- Facebook: https://www.facebook.com/amcharts
- Twitter: https://twitter.com/amcharts
Changelog
1.4.20
- Fixed: Issue with disappearing images in PDFs caused by exceeding boundary box for images
1.4.19
- Fixed: Issue with radial gradient
1.4.18
- Fixed: Issue with the legend positioning on the left side
1.4.17
- Fixed:
clip-path
issue on XY serial charts which exposed the drawn line beyond the plotarea.
1.4.16
- Added: (processData) config-property to change the dataProvider when exporting.
1.4.15
- Fixed: Menu items obtain the global
multiplier
setting to scale the output image.
1.4.14
- Added: (border) config-property to add an overlaying border on the output image.
1.4.13
- Fixed: Issue on balloons showing it’s content as HTML added “textContent” as alternative getter
1.4.12
- Fixed: clipPath issue on SVG export (workaround until fabricJS handles that by themselves)
1.4.11
- Fixed: Depth issue on value labels on columns
1.4.10
- Fixed: potential vulnerability with anonymous function declaration
1.4.9
- Added: Radial gradient support on pie charts (new feature in amCharts v3.18.0)
1.4.8
- Fixed: Clippath positioning issue
- Fixed: Issue removing tainted images
- Fixed: Hashbanged url interpretation issue in IE (related to reusable svg nodes)
1.4.7
- Fixed: Zeroes were being exported to data formats as empty strings rather than numbers
1.4.6
- Fixed: Loading issue with patterns in firefox
1.4.5
- Fixed: Issue with the “canvas-container” on chart revalidations
1.4.4
- Added: Balloon text orientation
- Fixed: Issue with multiline label positioning
1.4.3
- 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)
1.4.2
- Added:
overflow
flag to overwrite the css attribute ‘overflow’ of the chart container
1.4.1
- Fixed: cropped bullets on XY charts
1.4.0
- Fixed: beforeCapture issue on SVG document changes
- Added: Namespace check within globals for required third party software
1.3.9
- Fixed: Base tag gradient drawing issue (includes embedded hotfix for fabricjs commit #c9745ff)
1.3.8
- Fixed: Base tag clip path issue which draw the lines outside the plotarea
1.3.7
- Added:
columnNames
property, which allows overriding column names when expoerting chart data
1.3.6
- Fixed: Checking parseDates for category values for date interpretation
1.3.5
- Fixed: Scrollbar issue hiding the unselected scrollbar background area
1.3.4
- Fixed: Absolute legend positioning issue.
1.3.3
- Added: English as default language when define language does not exist
1.3.2
- Added: (drawing.autoClose) new flag to automatically close the annotation mode after download
- Fixed: Internal pdfMake issue which prevented to generate PDFs in IE10, uses custom build until officially fixed
1.3.1
- Added: Timestamp date fields get converted as dates
- Fixed: XLSX respects given dateFormat
- Changed: JSON exports date fields as date objects by default
1.3.0
- Fixed: Issue hiding drawing container on “drawing.done”
- Fixed: Legend positioning issue with charts created in a hidden container
1.2.9
- Fixed: Issue with missing
export.css
which showed the canvas - Fixed: Issue with empty menu items; adds list only with childNodes > 1
- Fixed: Issue with hidden bullets; caused by wrong clip-paths
- Added: Polish language file ( thanks to piernik )
1.2.8
- Fixed: Issue in
gatherClassName
checking element type
1.2.7
- Fixed: Generates true JPG file instead PNG with JPG extension
- Fixed: Drag&Drop feature does not activate automatically the annotation mode
1.2.6
- Added: Native EXCEL date cell type for date fields, forced by default
- Fixed: Issue in
getChartData
which ignored given data array ( affected API usage only )
1.2.5
- Added: Illustrator support;
reviver
method totoSVG
; converts by default RGBA to HEX colors codes and places it’s dedicated opacity property - Fixed: Multiline text positioning / line heights
1.2.4
- Added:
exportSelection
exports the current data selection - Added:
dataDateFormat
converts the date-strings to date objects with given format - Added:
dateFormat
converts the date in given format - Added:
processData
to format date fields and translate fields - Changed:
gatherChartData
collects data, fields and titles only and usesprocessData
to format
1.2.3
- Fixed: Positioning issue on multiline labels
1.2.2
- Fixed: Issue with object changes which overwrite undo/redo object states
- Fixed: Issue with default fontSize
1.2.1
- Added: Possibility to add text, lines, shapes (details)
- Added: Possibility to change drawing mode, color, opacity and size
- Added: Possibility to select,move,scale drawn items
- Added: Possibility to define dedicated drawing menu
drawing.menu
individual menu items get prioritised - Added: Dropbox feature which allows to drag images into the chart
fileListener: true
- Added: Keylistener which allows to undo/redo/remove the drawn steps
keyListener: true
- Added: Isolated plugin to be able to initiate manually regardless of the chart setup
- Fixed: Conflict with prototypeJS which caused tainted return value from
toArray
1.2.0
- Fixed: Issue with deepMerge which did not allow to modfiy the pdfMake default settings
- Fixed: Menu issue which did not allow to modify the pdfMake settings
- Fixed: Undo issue which needed double attempts in the beginning
- Added: Drag/Scale feature in annotation mode; toggles automatically between drawing/dragging while hovering over the elements
1.1.9
- Added:
exportTitles
available in general or individual setup which exchanges the data field names with it’s dedicated title - Fix: Interpolates missing data fields across data provider
1.1.8
- Added: Temporary workaround to bypass FileSaver check; issue prevented to open blob urls in safari browser
1.1.7
- Added: beforeCapture to be able to indicate the export process in some way
- Added: afterCapture to be able to modify the fabric instance if needed
- Added: SVG element as second argument within the “reviver” callback
- Added: Multiple arguments supported in “handleCallback” method
1.1.6
- Fix: Pattern render issue in IE;
- Added: Multiline support (workaround until fabricJS supports tspan)
- Added: General delay property to delay the capturing of the chart (details)
1.1.5
- Fix: Tainted check issue which failed if location.origin wasn’t available
- Fix: Capture image check, triggers callback only if all images have been loaded
- Added: Multi language support; embedded english by default; overtakes chart language
- Added: Delay feature, which allows to delay the capturing (details)
1.1.4
- Fix: Did not collect clip-path and pattern from legend
- Fix: External legend did not respect given width when positioned on left side
- Fix: Improved tainted image detection
1.1.3
- Added: Added reviver in capturing method to filter the drawn chart elements
1.1.2
- Added: Generalized fallback; does a lookup on the Blob constructor
- Fix: Wait for lazy images, triggers capture callback only when all images have been fully loaded
- Discovered: Safari 5 issue please adapt fabric.js manually to solve it
1.1.1
- Fix: CSV export issue on date based charts
- Fix: Enhanced migration script to obtain more settings
1.1.0
- Fix: Print issue on safari which captured the actual page instead of the export
- Added: IE9 download fallback for
text/plain
andimage/*
mime types (CSS has been modified) - Added:
toImage
method; returnsimg
element with embedded base64 imagery - Added:
getBase64
option intoSVG
- Added:
toImage
usage intoPRINT
to be able to choose the image type + settings. - Added:
lossless
option intoPRINT
(experimental)
1.0.9
- Added: IE9 base64 export
- Added: Third party updates + minified versions
1.0.8
- Fix: IE8 issue which prevents the chart from initiating
1.0.7
- Fix: issue on toCSV handling the header (first row)
1.0.6
- Fix: issue on revalidation the chart/map
- Added: path to load the libaries by default
1.0.5
- Added: divId to be able to place the menu within an external container
- Added: menuWalker to replace the whole menu generation
- Added: menuReviver to adapt menu items before being appended to the list
- Added: libs.async to load dependencies asynchronous (default true)
1.0.4
- Considering classNamePrefix (dont’t forget to adapt export.css)
- Added: safety delay on print restore to ensure capturing the canvas
1.0.3
- Fix: flagged relative image paths as tainted
1.0.2
- Fix: compabitily on array method extension such as PrototypeJS
1.0.1
- Added: libs.reload: false, script tag crawling to avoid multiple insertions
- Fix: IE10 bug on print
- Fix: migration bug, replaces menu instead of appending
1.0
- Initial release


Huawei MatePad Pro 5G Edition Coming in Q1 2020 - Gizchina.com
by PierreRate this post
Earlier today Huawei finally unveiled the much awaited Huawei MatePad Pro, the high-end tablet that’s expected to bring some tough competition to Apple’s iPad Pro.
Huawei MatePad Pro 5G Edition Coming in Q1 2020
Now, while the device packs some of the best hardware on the market, Huawei opted not to equip it with a “next gen” 5G module. Thus the smartphone won’t be able to use the faster cellular network standard; but that won’t be for long.
Huawei did indeed later reveal another version of the MatePad Pro is coming in the future. More specifically, in the first quarter of 2020.
The upcoming tablet will, of course, feature Huawei’s Kirin 990 5G chipset which as some of you may know supports 5G connectivity. The SoC also adopts an advanced 7nm manufacturing process to keep energy consumption down, while integrating a 5G modem. The Kirin 990 5G was also awarded as the best 5G chip a couple days back at the China Mobile Partner Conference.
So, the Huawei MatePad Pro 5G could very well be the first tablet ever to feature 5G support; yet another spec it is first at. What are the others? Well, as we discovered earlier, the MatePad Pro is also the first tablet to sport a camera punch-hole design; the first tablet to feature wireless charging and reverse wireless charging; and boasts the higher screen-to-body ratio of any tablet at 90%.
Additionally, the tablet is also Huawei’s first device to achieve a DCI-P3 color gamut display; first tablet to pack Huawei’s multi-screen collaboration feature and Huawei’s first tablet with a wireless charging stylus.
Other specs on the MatePad Pro include a 10.8-inch display, a 7250mAh, up to 8GB of RAM and a maximum of 256GB of internal storage. Learn more about it in this article.


Application Performance Monitoring
The DevOps team has noticed that the recommendations page is slow to load and shows performance spikes in Application Insights telemetry. By viewing the details of performance monitoring through Application Insights, we will be able to drill down to the code that has affected the slow performance of the web application and fix the code.
In this lab, you will learn how to set up Application Insights telemetry, and drill down into performance monitoring data through Application Insights in the new Azure Portal.
Note: This hands-on lab is designed to use code from the aspnet45 branch.
Prerequisites
-
Visual Studio 2013 or higher
-
PartsUnlimited website deployed to a Microsoft Azure Web App (see link)
-
Application Insights created in the same Azure Resource Group as the PartsUnlimited website
-
Continuous Integration build with deployment to the Azure web app
Tasks Overview
-
Set up Application Insights for PartsUnlimited
-
Using Application Performance Monitoring to resolve performance issues
Task 1: Set up Application Insights for PartsUnlimited
Step 1. In an Internet browser, navigate to http://portal.azure.com and sign in with your credentials.
Step 2. Click on the “Browse All” tile on the left column, select “Application Insights,” and click on the name of the telemetry that was created when you deployed the resource group using the Deployment template in the PartsUnlimited solution. The name of the telemetry should match the name of the PartsUnlimited name plus “Insights.”
Step 3. In the PartsUnlimited Application Insights telemetry, click on the “Settings” tile and then “Properties.” You will want to keep this browser window open with the details of the telemetry name, location, instrumentation key, and subscription information when we attach it to the PartsUnlimited website.
Step 4. To receive data, we will need to attach the PartsUnlimited Application Insights telemetry to the PartsUnlimited project in Visual Studio. In Visual Studio, open the PartsUnlimited solution.
Step 5. In the PartsUnlimited solution, right-click on the PartsUnlimitedWebsite project and select “Add Application Insights telemetry.”
Step 6. In the “Add Application Insights to Project” window, click on the “Use different account” hyperlink.
Step 7. Since we have the subscription and resource information for our PartsUnlimited Application Insights telemetry, click on the button, “Use advanced mode.”
Step 8. Fill in the subscription ID, resource group, Application Insights resource name, and Instrumentation key found in the new portal from step 3. Then press the “Add Application Insights to Project” button to add the telemetry in the project.
Step 9. Back in the Azure Portal, in the PartsUnlimited Application Insights telemetry, in the Application Health panel, click on the “Learn how to collect server response time data” overlay. Before Application Insights receives any information, we need to add script code to monitor each web page in the PartsUnlimited project.
Step 10. In the Quickstart panel to add Application Insights to your project, click on “Get code to monitor my web pages” and copy the end-user usage analytics code.
Step 11. Back in Visual Studio, in the PartsUnlimitedWebsite project, in Views/Shared/_Layout.cshtml, paste the snippet of code you copied for the end-user usage analytics code from the Azure portal before the rest of the scripts between the head tag.
Step 12. In the “Changes” tile in Team Explorer, commit the changes of adding Application Insights (adding ApplicationInsights.config, editing the publish profile, _Layout.cshtml, packages.config and web.config) and sync to the repo which should kick off an automated build and deploy to the website.
Step 13. Lastly, in the Azure portal, navigate to the PartsUnlimited Azure web app and click the “Tools” tile. We need to add in application performance monitoring for the web app now that it is connected to Application Insights.
Step 14. In the tools panel, click on “Performance Monitoring,” then the “Click here to collect insights into the performance of your .NET applications” overlay. Select the Application Insights telemetry used in the previous steps for the Application Insights provider.
Step 15. Once you have selected the Application Insights provider, you do not need to add a New Relic provider, so you may just click on the OK button to add the Application Insights telemetry as a provider for peformance monitoring.
Now that you have connected the PartsUnlimited Application Insights telemetry to your PartsUnlimited web app and enabled performance monitoring, you are ready to continue the lab.
###Task 2: Using Application Performance Monitoring to resolve performance issues
Step 1. In an Internet browser, navigate to the PartsUnlimited website that you previously deployed and go to the Recommendations page, such as http://partsunlimited.azurewebsites.net/home/recommendations.
Step 2. Click on the “Browse All” tile on the left column, select “Application Insights,” and click on the name of your Application Insights telemetry for your web app.
Step 3. After selecting the Application Insights telemetry for your web app, scroll down and select the “Performance” tile to view performance monitoring information.
Step 4. In the performance tile of the Application Insights telemetry, note the timeline. The timeline data may not show up immediately, so you will want to wait for a few minutes for the telemetry to collect performance data.
Step 5. Once data shows in the timeline, view the operations listed under the Average of server response time by operation name section under the timeline. Click on the top operation in the list referring to the recommendations page to view details of that operation.
Step 6. Drill down into the method that is affecting the slow performance. We now know where the slow performance is being caused in our code.
Step 7. In Visual Studio, open the PartsUnlimited.sln.
Step 8. Find the Recomendations method in HomeController.cs that is causing slow performance. At the top of the HomeController class, notice that the public int roco_count is set to 1000. Change that value to be 1.
Step 9. Save the changes and commit the changes on the master branch.
Step 10. Press the “Sync” button to push the changes up to the repo and kick off a build automatically.
Step 11. Now that our changes have deployed to the website, open up a new incognito browser window (to prevent caching) and return to the recommendations page (http://partsunlimited.azurewebsites.net/home/recommendations).
Step 12. Return to the Application Insights performance monitoring view in the Azure Preview Portal and refresh the page.
In this lab, you learned how to set up Application Insights telemetry, and drill down into performance monitoring data through Application Insights in the new Azure Portal.