AmCharts.AmExport = AmCharts.Class({ construct: function(chart, cfg, init ) { var _this = this; _this.DEBUG = false; _this.chart = chart; _this.canvas = null; _this.svgs = []; _this.userCFG = cfg; _this.buttonIcon = 'export.png'; _this.exportPNG = true; _this.exportPDF = false; _this.exportJPG = false; _this.exportSVG = false; //_this.left; _this.right = 0; //_this.bottom; _this.top = 0; //_this.color; _this.buttonRollOverColor = "#EFEFEF"; //_this.buttonColor = "#FFFFFF"; //_this.buttonRollOverAlpha = 0.5; _this.textRollOverColor = "#CC0000"; _this.buttonTitle = "Save chart as an image"; _this.buttonAlpha = 0.75; _this.imageFileName = "amChart"; _this.imageBackgroundColor = "#FFFFFF"; if (init) { _this.init(); } }, toCoordinate:function(value){ if(value === undefined){ return "auto"; } if(String(value).indexOf("%") != -1){ return value; } else{ return value + "px"; } }, init: function(){ var _this = this; var formats = []; if (_this.exportPNG) { formats.push("png"); } if (_this.exportPDF) { formats.push("pdf"); } if (_this.exportJPG) { formats.push("jpg"); } if (_this.exportSVG) { formats.push("svg"); } var menuItems = []; if(formats.length == 1){ var format = formats[0]; menuItems.push({format:format, iconTitle:_this.buttonTitle, icon:_this.chart.pathToImages + _this.buttonIcon}) } else if(formats.length > 1){ var subItems = []; for(var i = 0; i < formats.length; i++){ subItems.push({format:formats[i], title:formats[i].toUpperCase()}); } menuItems.push({onclick: function() {}, icon:_this.chart.pathToImages + _this.buttonIcon, items:subItems}) } var color = _this.color; if(color === undefined){ color = _this.chart.color; } var buttonColor = _this.buttonColor; if(buttonColor === undefined){ buttonColor = "transparent"; } _this.cfg = { menuTop : _this.toCoordinate(_this.top), menuLeft : _this.toCoordinate(_this.left), menuRight : _this.toCoordinate(_this.right), menuBottom : _this.toCoordinate(_this.bottom), menuItems : menuItems, menuItemStyle: { backgroundColor : buttonColor, opacity :_this.buttonAlpha, rollOverBackgroundColor : _this.buttonRollOverColor, color : color, rollOverColor : _this.textRollOverColor, paddingTop : '6px', paddingRight : '6px', paddingBottom : '6px', paddingLeft : '6px', marginTop : '0px', marginRight : '0px', marginBottom : '0px', marginLeft : '0px', textAlign : 'left', textDecoration : 'none', fontFamily : _this.chart.fontFamily, fontSize : _this.chart.fontSize + 'px' }, menuItemOutput: { backgroundColor : _this.imageBackgroundColor, fileName : _this.imageFileName, format : 'png', output : 'dataurlnewwindow', render : 'browser', dpi : 90, onclick : function(instance, config, event) { event.preventDefault(); instance.output(config); } }, removeImagery: true }; _this.processing = { buffer: [], drawn: 0, timer: 0 }; // Config dependency adaption if (typeof(window.canvg) != 'undefined' && typeof(window.RGBColor) != 'undefined') { _this.cfg.menuItemOutput.render = 'canvg'; } if (typeof(window.saveAs) != 'undefined') { _this.cfg.menuItemOutput.output = 'save'; } if (AmCharts.isIE && AmCharts.IEversion < 10) { _this.cfg.menuItemOutput.output = 'dataurlnewwindow'; } // Merge given configs var cfg = _this.userCFG; if (cfg) { cfg.menuItemOutput = AmCharts.extend(_this.cfg.menuItemOutput, cfg.menuItemOutput || {}); cfg.menuItemStyle = AmCharts.extend(_this.cfg.menuItemStyle, cfg.menuItemStyle || {}); _this.cfg = AmCharts.extend(_this.cfg, cfg); } // Add reference to chart _this.chart.AmExport = _this; // Listen to the drawer _this.chart.addListener('rendered', function() { _this.setup(); }); // DEBUG; Public reference if (_this.DEBUG) { window.AmExport = _this; } }, /* Simple log function for internal purpose @param **args */ log: function() { console.log('AmExport: ', arguments); }, /* PUBLIC Prepares everything to get exported @param none */ setup: function() { var _this = this; if (_this.DEBUG == 10) { _this.log('SETUP START'); } // DEBUG if (!AmCharts.isIE || (AmCharts.isIE && AmCharts.IEversion > 9)) { // Build Buttons _this.generateButtons(); if (_this.DEBUG == 10) { _this.log('SETUP END'); } // DEBUG } else { if (_this.DEBUG == 10) { _this.log('< IE10 NOT SUPPORTED'); } // DEBUG } }, /* PUBLIC Decodes base64 string to binary array @param base64_string @copyright Eli Grey, http://eligrey.com and Devin Samarin, https://github.com/eboyjr */ generateBinaryArray: function(base64_string) { var len = base64_string.length, buffer = new Uint8Array(len / 4 * 3 | 0), i = 0, outptr = 0, last = [0, 0], state = 0, save = 0, rank, code, undef, base64_ranks = new Uint8Array([ 62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, 0, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51 ]); while (len--) { code = base64_string.charCodeAt(i++); rank = base64_ranks[code - 43]; if (rank !== 255 && rank !== undef) { last[1] = last[0]; last[0] = code; save = (save << 6) | rank; state++; if (state === 4) { buffer[outptr++] = save >>> 16; if (last[1] !== 61 /* padding character */ ) { buffer[outptr++] = save >>> 8; } if (last[0] !== 61 /* padding character */ ) { buffer[outptr++] = save; } state = 0; } } } // 2/3 chance there's going to be some null bytes at the end, but that // doesn't really matter with most image formats. // If it somehow matters for you, truncate the buffer up outptr. return buffer; }, /* Creates blob object @param base64_datastring string @param type string */ generateBlob: function(datastring, type) { var _this = this, header_end = type!='image/svg+xml'?datastring.indexOf(',') + 1:0, header = datastring.substring(0, header_end), data = datastring, blob = new Blob(); if (header.indexOf('base64') != -1) { data = _this.generateBinaryArray(datastring.substring(header_end)); } // Fake blob for IE if (AmCharts.isIE && AmCharts.IEversion < 10) { blob.data = data; blob.size = data.length; blob.type = type; blob.encoding = 'base64'; } else { blob = new Blob([data], { type: type }); } return blob; }, /* Creates PDF object @param config object */ generatePDF: function(cfg) { var _this = this, pdf = { output: function() { return ''; } }, data = _this.canvas.toDataURL('image/jpeg'), // JSPDF ONLY SUPPORTS JPG width = (_this.canvas.width * 25.4) / cfg.dpi, height = (_this.canvas.height * 25.4) / cfg.dpi; // Check if (window.jsPDF) { pdf = new jsPDF(); if (pdf.addImage) { pdf.addImage(data, 'JPEG', 0, 0, width, height); } else { alert("Missing jsPDF plugin; Please add the 'addImage' plugin."); } } else { alert("Missing jsPDF lib; Don't forget to add the addImage plugin."); } return pdf; }, /* Creates the CANVAS to receive the image data @param format void() @param callback; given callback function which returns the blob or datastring of the configured ouput type */ output: function(cfg, externalCallback) { var _this = this; cfg = AmCharts.extend(AmCharts.extend({}, _this.cfg.menuItemOutput), cfg || {}); // Prepare chart if(_this.chart.prepareForExport){ _this.chart.prepareForExport(); } /* PRIVATE Callback function which gets called after the drawing process is done @param none */ function internalCallback() { var data = null; var blob; if (_this.DEBUG == 10) { _this.log('OUTPUT', cfg.format); } // DEBUG // SVG if (cfg.format == 'image/svg+xml' || cfg.format == 'svg') { data = _this.generateSVG(); blob = _this.generateBlob(data, 'image/svg+xml'); if (cfg.output == 'save') { saveAs(blob, cfg.fileName + '.svg'); } else if (cfg.output == 'datastring' || cfg.output == 'datauristring' || cfg.output == 'dataurlstring') { blob = 'data:image/svg+xml;base64,' + btoa(data); } else if (cfg.output == 'dataurlnewwindow') { window.open('data:image/svg+xml;base64,' + btoa(data)); } else if (cfg.output == 'datauri' || cfg.output == 'dataurl') { location.href = 'data:image/svg+xml;base64,' + btoa(data); } else if (cfg.output == 'datastream') { location.href = 'data:image/octet-stream;base64,' + data; } if (externalCallback) externalCallback.apply(_this, [blob]); // PDF } else if (cfg.format == 'application/pdf' || cfg.format == 'pdf') { data = _this.generatePDF(cfg).output('dataurlstring'); blob = _this.generateBlob(data, 'application/pdf'); if (cfg.output == 'save') { saveAs(blob, cfg.fileName + '.pdf'); } else if (cfg.output == 'datastring' || cfg.output == 'datauristring' || cfg.output == 'dataurlstring') { blob = data; } else if (cfg.output == 'dataurlnewwindow') { window.open(data); } else if (cfg.output == 'datauri' || cfg.output == 'dataurl') { location.href = data; } else if (cfg.output == 'datastream') { location.href = data.replace('application/pdf', 'application/octet-stream'); } if (externalCallback) externalCallback.apply(_this, [blob]); // PNG } else if (cfg.format == 'image/png' || cfg.format == 'png') { data = _this.canvas.toDataURL('image/png'); blob = _this.generateBlob(data, 'image/png'); if (cfg.output == 'save') { saveAs(blob, cfg.fileName + '.png'); } else if (cfg.output == 'datastring' || cfg.output == 'datauristring' || cfg.output == 'dataurlstring') { blob = data; } else if (cfg.output == 'dataurlnewwindow') { window.open(data); } else if (cfg.output == 'datauri' || cfg.output == 'dataurl') { location.href = data; } else if (cfg.output == 'datastream') { location.href = data.replace('image/png', 'image/octet-stream'); } if (externalCallback) externalCallback.apply(_this, [blob]); // JPG } else if (cfg.format == 'image/jpeg' || cfg.format == 'jpeg' || cfg.format == 'jpg') { data = _this.canvas.toDataURL('image/jpeg'); blob = _this.generateBlob(data, 'image/jpeg'); if (cfg.output == 'save') { saveAs(blob, cfg.fileName + '.jpg'); } else if (cfg.output == 'datastring' || cfg.output == 'datauristring' || cfg.output == 'dataurlstring') { blob = data; } else if (cfg.output == 'dataurlnewwindow') { window.open(data); } else if (cfg.output == 'datauri' || cfg.output == 'dataurl') { location.href = data; } else if (cfg.output == 'datastream') { location.href = data.replace('image/jpeg', 'image/octet-stream'); } if (externalCallback) externalCallback.apply(_this, [blob]); } } return _this.generateOutput(cfg, internalCallback); }, /* PUBLIC Polifies missing attributes to the SVG and replaces images to embedded base64 images @param none */ polifySVG: function(svg) { var _this = this; // Recursive function to force the attributes function recursiveChange(svg, tag) { var items = svg.getElementsByTagName(tag); var i = items.length; while(i--) { if (_this.cfg.removeImagery) { items[i].parentNode.removeChild(items[i]); } else { var image = document.createElement('img'); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = items[i].getAttribute('width'); canvas.height = items[i].getAttribute('height'); image.src = items[i].getAttribute('xlink:href'); image.width = items[i].getAttribute('width'); image.height = items[i].getAttribute('height'); try { ctx.drawImage(image, 0, 0, image.width, image.height); datastring = canvas.toDataURL(); // image.src; // canvas.toDataURL(); // } catch (err) { datastring = image.src; // image.src; // canvas.toDataURL(); // _this.log('Tainted canvas, reached browser CORS security; origin from imagery must be equal to the server!'); throw new Error(err); } items[i].setAttribute('xlink:href', datastring); } if (_this.DEBUG == 10) { _this.log('POLIFIED', items[i]); } // DEBUG } } // Put some attrs to it; fixed 20/03/14 xmlns is required to produce a valid svg file if (AmCharts.IEversion == 0) { svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); if ( !_this.cfg.removeImagery ) { svg.setAttribute('xmlns:xlink','http://www.w3.org/1999/xlink'); } } // DEBUG if (_this.DEBUG == 10) { _this.log('POLIFIED', svg); } // Force link adaption recursiveChange(svg, 'pattern'); recursiveChange(svg, 'image'); _this.svgs.push(svg); return svg; }, /* PUBLIC Stacks multiple SVGs into one @param none */ generateSVG: function() { var _this = this; var context = document.createElement('svg'); context.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); context.setAttribute('xmlns:xlink','http://www.w3.org/1999/xlink'); for (var i = 0; i < _this.processing.buffer.length; i++) { var group = document.createElement('g'), data = _this.processing.buffer[i]; data[0].setAttribute('xmlns', 'http://www.w3.org/2000/svg'); data[0].setAttribute('xmlns:xlink','http://www.w3.org/1999/xlink'); group.setAttribute('transform', 'translate('+data[1].x+','+data[1].y+')'); group.appendChild(data[0]); context.appendChild(group); } return new XMLSerializer().serializeToString(context); }, /* PUBLIC Generates the canvas with the given SVGs and configured renderer @param callback; function(); gets called after drawing process on the canvas has been finished */ generateOutput: function(cfg, callback) { var _this = this, coll = [], svgs = [], canvas = document.createElement('canvas'), context = canvas.getContext('2d'), offset = { y: 0, x: 0 }, // Push svgs into array coll = _this.chart.div.getElementsByTagName('svg'); for ( var i = 0; i < coll.length; i++ ) svgs.push(coll[i]); // Add external legend if ( _this.chart.legend && _this.chart.legend.position == 'outside' ) { _this.chart.legend.container.container.externalLegend = true svgs.push(_this.chart.legend.container.container); // Add offset if ( _this.cfg.legendPosition == 'left' ) { offset.x = _this.chart.legend.div.offsetWidth; } else if ( _this.cfg.legendPosition == 'top' ) { offset.y = _this.chart.legend.div.offsetHeight; } else if ( typeof _this.cfg.legendPosition == 'object' ) { offset.y = _this.cfg.legendPosition.chartTop; offset.x = _this.cfg.legendPosition.chartLeft; } } // Reset _this.processing.buffer = []; _this.processing.drawn = 0; _this.canvas = canvas; _this.svgs = []; // Walkthroug SVGs if (_this.DEBUG == 10) { _this.log('START EXPORT'); } // DEBUG if (_this.DEBUG == 10) { _this.log('START BUFFERING'); } // DEBUG for (var i = 0; i < svgs.length; i++) { var parent = svgs[i].parentNode, svgX = Number(parent.style.left.slice(0, -2)), svgY = Number(parent.style.top.slice(0, -2)), svgClone = _this.polifySVG(svgs[i].cloneNode(true)), tmp = AmCharts.extend({}, offset); // Add external legend if ( svgs[i].externalLegend ) { if ( _this.cfg.legendPosition == 'right' ) { offset.y = 0; offset.x = _this.chart.divRealWidth; } else if ( _this.cfg.legendPosition == 'bottom' ) { offset.y = svgY ? svgY : offset.y; } else if ( typeof _this.cfg.legendPosition == 'object' ) { offset.x = _this.cfg.legendPosition.left; offset.y = _this.cfg.legendPosition.top; } else { offset.x = 0; offset.y = 0; } // Overtake parent position if given; fixed 20/03/14 distinguish between relativ and others } else { if ( parent.style.position == 'relative' ) { offset.x = svgX ? svgX : offset.x; offset.y = svgY ? svgY : offset.y; } else { offset.x = svgX; offset.y = svgY; } } _this.processing.buffer.push([svgClone, AmCharts.extend({}, offset)]); // Put back from "cache" if (svgY && svgX) { offset = tmp; // New offset for next one } else { offset.y += svgY ? 0 : parent.offsetHeight; } if (_this.DEBUG == 10) { _this.log('BUFFERED', svgs[i], offset); } // DEBUG } if (_this.DEBUG == 10) { _this.log('END BUFFERING'); } // DEBUG // Apply background if (_this.DEBUG == 10) { _this.log('START DRAWING', cfg.render); } // DEBUG if (_this.DEBUG == 10) { _this.log('FILL BACKGROUND'); } // DEBUG canvas.id = AmCharts.getUniqueId(); canvas.width = _this.chart.divRealWidth; canvas.height = _this.chart.divRealHeight; // External legend exception if ( _this.chart.legend && _this.chart.legend.position == "outside" ) { if ( ['left','right'].indexOf(_this.cfg.legendPosition) != -1 ) { canvas.width += _this.chart.legend.div.offsetWidth; } else if ( typeof _this.cfg.legendPosition == 'object' ) { canvas.width += _this.cfg.legendPosition.width; canvas.height += _this.cfg.legendPosition.height; } else { canvas.height += _this.chart.legend.div.offsetHeight; } } // Stockchart exception var adapted = { width: false, height: false }; if ( _this.chart.periodSelector ) { if ( ['left','right'].indexOf(_this.chart.periodSelector.position) != -1 ) { canvas.width -= _this.chart.periodSelector.div.offsetWidth + 16; adapted.width = true; } else { canvas.height -= _this.chart.periodSelector.div.offsetHeight; adapted.height = true; } } if ( _this.chart.dataSetSelector ) { if ( ['left','right'].indexOf(_this.chart.dataSetSelector.position) != -1 ) { if ( !adapted.width ) { canvas.width -= _this.chart.dataSetSelector.div.offsetWidth + 16; } } else { canvas.height -= _this.chart.dataSetSelector.div.offsetHeight; } } // Set given background; jpeg default if (cfg.backgroundColor || cfg.format == 'image/jpeg') { context.fillStyle = cfg.backgroundColor || '#FFFFFF'; context.fillRect(0, 0, canvas.width, canvas.height); } /* PRIVATE Recursive function to draw the images to the canvas; @param none; */ function drawItWhenItsLoaded() { var img, buffer, offset, source; // DRAWING PROCESS DONE if (_this.processing.buffer.length == _this.processing.drawn || cfg.format == 'svg' ) { if (_this.DEBUG == 10) { _this.log('END DRAWING'); } // DEBUG return callback(); // LOOPING LUI } else { if (_this.DEBUG == 10) { _this.log('DRAW', _this.processing.drawn + 1, 'OF', _this.processing.buffer.length); } // DEBUG buffer = _this.processing.buffer[_this.processing.drawn]; source = new XMLSerializer().serializeToString(buffer[0]); //source = 'data:image/svg+xml;base64,' + btoa(); offset = buffer[1]; if (_this.DEBUG == 10) { _this.log('SOURCE', source); } // DEBUG // NATIVE if (cfg.render == 'browser') { img = new Image(); img.id = AmCharts.getUniqueId(); source = 'data:image/svg+xml;base64,' + btoa(source); //img.crossOrigin = "Anonymous"; img.onload = function() { context.drawImage(this, buffer[1].x, buffer[1].y); _this.processing.drawn++; if (_this.DEBUG == 10) { _this.log('ONLOAD', this); } // DEBUG drawItWhenItsLoaded(); }; img.onerror = function() { if (_this.DEBUG == 10) { _this.log('ONERROR', this); } // DEBUG context.drawImage(this, buffer[1].x, buffer[1].y); _this.processing.drawn++; drawItWhenItsLoaded(); }; img.src = source; if (_this.DEBUG == 10) { _this.log('ADD', img); } // DEBUG if (img.complete || typeof(img.complete) == 'undefined' || img.complete === undefined) { if (_this.DEBUG == 10) { _this.log('FORCE ONLOAD', img); } // DEBUG img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; img.src = source; } // CANVG } else if (cfg.render == 'canvg') { canvg(canvas, source, { offsetX: offset.x, offsetY: offset.y, ignoreMouse: true, ignoreAnimation: true, ignoreDimensions: true, ignoreClear: true, renderCallback: function() { _this.processing.drawn++; drawItWhenItsLoaded(); } }); } } } return drawItWhenItsLoaded(); }, /* Generates the export menu to trigger the exportation @param none; */ generateButtons: function() { var _this = this,lvl = 0; if(_this.div){ div = _this.div; div.innerHTML = ""; } else{ div = document.createElement('div'), _this.div = div; } // Push sublings function createList(items) { var ul = document.createElement('ul'); ul.setAttribute('style', 'list-style: none; margin: 0; padding: 0;'); // Walkthrough items for (var i = 0; i < items.length; i++) { var li = document.createElement('li'), img = document.createElement('img'), a = document.createElement('a'), item = items[i], children = null, itemStyle = AmCharts.extend(AmCharts.extend({}, _this.cfg.menuItemStyle), items[i]); // MERGE CFG item = AmCharts.extend(AmCharts.extend({}, _this.cfg.menuItemOutput), item); // ICON if (item['icon']) { img.alt = ''; img.src = item['icon']; img.setAttribute('style', 'margin: 0 auto;border: none;outline: none'); if (item['iconTitle']) { img.title = item['iconTitle']; } a.appendChild(img); } // TITLE; STYLING a.href = '#'; if (item['title']) { img.setAttribute('style', 'margin: 0px 5px;'); a.innerHTML += item.title; } a.setAttribute('style', 'display: block;'); AmCharts.extend(a.style, itemStyle); // ONCLICK a.onclick = item.onclick.bind(a, _this, item); li.appendChild(a); // APPEND SIBLINGS if (item.items) { children = createList(item.items); li.appendChild(children); li.onmouseover = function() { children.style.display = 'block'; }; li.onmouseout = function() { children.style.display = 'none'; }; children.style.display = 'none'; } // Append to parent ul.appendChild(li); // Apply hover a.onmouseover = function() { this.style.backgroundColor = itemStyle.rollOverBackgroundColor; this.style.color = itemStyle.rollOverColor; this.style.borderColor = itemStyle.rollOverBorderColor; }; a.onmouseout = function() { this.style.backgroundColor = itemStyle.backgroundColor; this.style.color = itemStyle.color; this.style.borderColor = itemStyle.borderColor; }; } lvl++; if (_this.DEBUG == 10) { _this.log('MENU', ul); } // DEBUG return ul; } // Style wrapper; Push into chart div div.setAttribute('style', 'position: absolute;top:' + _this.cfg.menuTop + ';right:' + _this.cfg.menuRight + ';bottom:' + _this.cfg.menuBottom + ';left:' + _this.cfg.menuLeft + ';'); div.setAttribute('class', 'amExportButton'); div.appendChild(createList(_this.cfg.menuItems)); _this.chart.containerDiv.appendChild(div); } });