Black Lives Matter. Please consider donating to Black Girls Code today.

Wrong visualization displayed in Internet Explorer

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)

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?

which version of IE?

Internet Explorer 11

Can you paste your dataset here?

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

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?

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

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

Thanks!

I placed it here:

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.

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