Export images in IE

plotly.js
1

Hi plotly team,

I have a lines plot with 7 traces and during it’s generation this error is shown in console: ‘SVG5601 SVG Path data has incorrect format and could not be completely parsed’, but the generated image is visible, so (almost) everything is ok.
But if I try to export it in IE, again the same error occur image is not exported.
So my questiona are:

  1. What can cause the SVG5601 error? Wrong/missing/undefined trace data value(s)?
  2. Why you regenerate the whole SVG again and then give it to the save functionality instead of using already visible svg?
  3. Why export function works in other browsers and not in IE?
2

Yikes. Can you share a code snippet to help us debug?

3

Hi etienne

I’ve prepared a file, whole html file is 10kb - because data set is not so small, how should I send you?
Paste complete code directly here?

Regards

4

OK, so I’ve reduced the data set, even with such small set it’s reproducable, browser is IE 11, error occurs also simulating IE 10, on testing simulation IE 9 plotly-latest min throws an error too (“Uint8Array” is undefined):

    var modeLines = 'lines';
	var index = 0;
    var layoutPolicyCalcGraph = {
        width: 1180,
        title: '',
        xaxis: {showgrid: true, color: 'black', linecolor: 'black', gridwidth: 2, rangeselector: {}, rangeslider: {}, title: 'Date'},
        yaxis: {showgrid: true, color: 'black', linecolor: 'black', gridwidth: 2, fixedrange: true, title: 'Percent'}
    };
    var LocalSource = [{
            datatype: "array",
            localdata: null,
            myname: 'Overutilization',
            policyname: 'test',
            historytype: '28 days'
        }];

	function savePlotlyImage(gd, filename) {
		var opts = {
				format: 'png',
				height: 600,
				width: 1180,
				filename: filename
			  };
		if(document.all) { // this is not the best way to find if browser is IE, but most of the time works
			opts.format = 'svg';
		}
		// saving and exporting still doesn't work!!!
		Plotly.downloadImage(gd, opts);
	}
	
    function buildPolicyCalculationGraph() {
            if (LocalSource[index].localdata != null && LocalSource[index].localdata.length > 0) {
                layoutPolicyCalcGraph.title = 'Policy - ' + LocalSource[index].policyname;
                try {
	                Plotly.plot('graphOverutilization',
	                		preparePolicyCalculationGraphData(LocalSource[index].localdata),
	                		layoutPolicyCalcGraph,
	                        {modeBarButtons: [[{
	                        	name: 'Save As Image',
	                        	icon: Plotly.Icons.disk,
	                            click: function(gd) { savePlotlyImage(gd, LocalSource[index].policyname + ' - Plot') }}]]
	                        }
	                		);
				}
                finally {
                }
            }
        }

        function preparePolicyCalculationGraphData(jsondata) {
            var date = [];
            var yin = [];
            var yout = [];
            var yTimeUtilIn = [];
            var yTimeUtilOut = [];
            var fillingFactor = [];
            var over = [];
            var under = [];

            for (var i = 0; i < jsondata.length; i++) {
                var row = jsondata[i];
                date.push(new Date(row.t));
                fillingFactor.push(row.ff);
                yin.push(row.ui);
                yout.push(row.uo);
                yTimeUtilIn.push(row.tdvi);
                yTimeUtilOut.push(row.tdvo);
                if (row.ttvi > 0)
                    over.push(row.ttvi);
                else
                    over.push('');
                if (row.ttvo > 0)
                    under.push(row.ttvo);
                else
                    under.push('');
            };

            return [
                {name: 'IN Total Time % Policy Violated', mode: modeLines, x: date, y: over},
                {name: 'OUT Total Time % Policy Violated', mode: modeLines, x: date, y: under}, // 'lines+markers'
                {name: 'IN Avarage Daily Utilization %', mode: modeLines, x: date, y: yin},
                {name: 'OUT Avarage Daily Utilization %', mode: modeLines, x: date, y: yout},
                {name: 'IN Daily Time % Policy Violated', mode: modeLines, x: date, y: yTimeUtilIn},
                {name: 'OUT Daily Time % Policy Violated', mode: modeLines, x: date, y: yTimeUtilOut},
                {name: 'Filling Factor %', mode: 'lines', x: date, y: fillingFactor},
            ];
        }
		
		LocalSource[index].localdata = [{"t":"2016-06-05T22:00:00.000Z","sc":144,"ff":100,"trg":false,"ui":61.38,"uo":0.13,"tdvi":0,"tdvo":0,"ttvi":0,"ttvo":0,"hld":false,"uid":0}];
		buildPolicyCalculationGraph();
5

Hi etienne

Do you have some progress here?