Wrong visualization displayed in Internet Explorer

plotly.js
1

I wrote a time-series graph using plotly.js. When displayed in Chrome and firefox, it came out correct.

However when displayed in IE, it comes out wrong (see below)

Pasted image1043×665 175 KB

The source code is below:

Instrument Availability and TestCount Versus Time

<script>
	<!-- ENTER JAVASCRIPT CODE HERE -->
	<!-- Declare variables and assign to empty array -->
	var x_axis = [], y_testCount = [], hoverText = [], y_300 = [], y_availability = [];
	var site = [], rms_id = [], subModel = [], model = [], ra_id = [];
	var traces = [], trace1 = [], trace2 = [], trace3 = [];


	function makeplot() {
		Plotly.d3.csv("RMS_Uptime_Dx_RAW_withRandomTestCount_10000x9.csv", function(data){ processData(data) } );
	};

	function processData(allRows) {
		console.log(allRows);
		
		for (var i=0; i<allRows.length; i++) {
			row = allRows[i];
			x_axis.push( row['Report_Date'] );
			y_testCount.push( row['TestCount'] );
			// y_300.push( 300 );
			y_availability.push(row['Availability']*250) // scale the availability values by 250
			site.push( row['Site'] );
			rms_id.push( row['RMS_ID']);
			subModel.push( row['SubModel']);
			model.push( row['Model']);
			ra_id.push( row['RA_ID']);
			var currentText = "Site: " + site[i] + "<br>" + "RMS_ID: "+rms_id[i] + "<br>" + "SubModel: " +subModel[i] + "<br>" + "Model: " + model[i] + "<br>" + "RA_ID: " + ra_id[i]+ "<br>" + "Availability: "+ y_availability[i]/250; //divide y_availability by 250 so text displayed reflects true value
			hoverText.push( currentText);
		}

		console.log( 'X',x_axis, 'Y',y_testCount, 'SD' );
		
		// trace0 = {
		// 	x: x_axis,
		// 	y: y_300,
		// 	type: 'lines'
		// 	};

		trace1 = {	
			x: x_axis,
			y: y_testCount,
			hoverinfo: 'text',
			//text: hoverText,
			type: 'bar'
			};

        trace3 = {	
			x: x_axis,
			y: y_availability,
			hoverinfo: 'text',
			text: hoverText,
			type: 'lines'
			};

		makePlotly();
	}


	function makePlotly(){
		var plotDiv = document.getElementById("plot");
		traces =	[	trace1, trace3	];
		Plotly.newPlot('myDiv', traces, {title: 'Instrument Availability and TestCount Versus Time'}, {displaylogo: false});
	};
	makeplot();
	
</script>

Why the discrepancy?

2

which version of IE?

3

Internet Explorer 11

4

Can you paste your dataset here?

5

The actual data set is to big to paste or upload. Here are the rows i can upload. You can generate more data esp date col using excel

Pasted image1681×4345 1.17 MB

6

Without access to some data, this bug will be hard to fix.

Can you try to replicate the IE discrepancy using a minimal set of rows?

7

this platform does not allow to update csv files. How can i get the data across?

8

I’d recommend using https://gist.github.com/

Thanks!

9

I placed it here:

10

I’m having some issue replicating your results.

Here’s my working codepen: http://codepen.io/etpinard/pen/qZmZON

which behaves as expected in IE11.

11

That is weird. When I ran your code, with var url introduced, it came out correctly. However accessing the csv file directly gives an incorrect graph

Pasted image3150×954 270 KB