Custom Horizontal Stacked Bar aligned with Table Data

[former_member201407]

Requirement

In one of our projects there was one business requirement to show horizontal stacked bar which will contain sub-stacks based on each quantity of a pipeline for a specific material. In this case there was an HTML based table which shows quantity data in each row for a material. And client was asking to have horizontal stacked bar chart placed just on the right side of that table – each bar will represent the quantities in different colors for one material and base-width of each bar should be well-aligned with the height of each row – to show overall combined of a table and reporting chart in the page without any misplacement between table row and stacked bar.

 

Why Custom Development?

MII has one type bar chart which shows only vertical stacked bar chart and we can show that for the same requirement by simply saving that chart as an image and then, rotating that image at 90 degree angle. But the main problem was with this chart as image could not be fixed with consistent width and height to bring each bar well-aligned with table-row height. Rather this was saved as an image file in MII server leading a performance issue. So to overcome these issues we had to implement custom development based on HTML code.

 

Examples

Below screens are the examples for horizontal stacked bar charts we had in one of projects



 

How-to-do

For this, we have to implement a horizontal stacked bar chart purely based on HTML code. Please refer to following code sample which shows horizontal stacked bar with two sub-stacks in each bar representing percentage of pipeline quantity for a specific material.

 

Code Sample

/******** to set display for chart **********/

document.getElementById("TableDataId").style.display = "";



/******** to display the scale **********/

	var x = document.getElementById("ScaleId").insertRow(0);

	var Xcell1 = x.insertCell(0);

	var Xcell2 = x.insertCell(1);

	var Xcell3 = x.insertCell(2);

	var Xcell4 = x.insertCell(3);

	var Xcell5 = x.insertCell(4);

	var Xcell6 = x.insertCell(5);

	var Xcell7 = x.insertCell(6);



	Xcell1.align = "right";

	Xcell2.align = "right";

	Xcell3.align = "right";

	Xcell4.align = "right";

	Xcell5.align = "right";

	Xcell6.align = "right";

	Xcell7.align = "right";



	Xcell1.innerHTML = "<label class='scaleTick' style= 'border-top:1;height:10px;width:50;'> 25% </label>";

	Xcell2.innerHTML = "<label class='scaleTick' style= 'border-top:1;height:10px;width:50;'> 50% </label>";

	Xcell3.innerHTML = "<label class='scaleTick' style= 'border-top:1;height:10px;width:50;'> 75% </label>";

	Xcell4.innerHTML = "<label class='scaleTick' style= 'border-top:1;height:10px;width:50;'> 100% </label>";

	Xcell5.innerHTML = "<label class='scaleTick' style= 'border-top:1;height:10px;width:50;'> 125% </label>";

	Xcell6.innerHTML = "<label class='scaleTick' style= 'border-top:1;height:10px;width:50;'> 150% </label>";

	Xcell7.innerHTML = "<label class='scaleTick' style= 'border-top:1;height:10px;width:50;'> 175% </label>";



/******** to display stacked bars **********/

	for(i = 0; i < rowCount-1; i++)	

	{

		var x = document.getElementById("HorizontalBarId").insertRow(i);

	

		var cell1 = x.insertCell(0);

		var cell2 = x.insertCell(1);

		

		var PercP = document.PipelineReportCommand.getValueByName("PerToPipeline",i+1);

		var Perc = PercP.substring(0,PercP.indexOf("%"));

		var TQ = document.PipelineReportCommand.getValueByName("TotalPipeline",i+1);

		var PQ = document.PipelineReportCommand.getValueByName("PriorityQty",i+1);

		if(Perc < 100)

		{

			var greenPart = Perc;

			var redPart = 100 - Perc;

			

			cell1.innerHTML="<input type='text' readOnly style= 'border:0;background- 

color:#00FF00;height:15px;width:" + 2*greenPart + ";'/>"; 	

			cell1.innerHTML= cell1.innerHTML + "<input type='text' readOnly style= 'border:0;background- 

color:red;height:15px;width:" + 2*redPart + ";'/>"; 	



		}

		if(Perc >= 100)	

		{

			cell1.innerHTML="<input type='text' readOnly style= 'border:0;background- 

color:#00FF00;height:15px;width:" + 200 + ";'/>"; 

			var otherGreenPart = Perc - 100;

			if((2*otherGreenPart) >= 150)

			cell2.innerHTML="<input type='text' align='right' class='smallRight' readOnly style=  

'border:0;background-color:#00FF00;height:15px;width:" + 150 + ";'/>"; 

			else

			cell2.innerHTML="<input type='text' align='right' class='smallRight' readOnly style=  'border:0;background-color:#00FF00;height:15px;width:" + 2*otherGreenPart + ";'/>"; }}

 

Limitations in this implementation

With this code, we have to restrict some bars to be terminated at the end of scale if the value of the quantity which the concerned stack of that bar represents exceeds a limit. We have proposed a scale with a certain range within which we have to represent the stacked bar, beyond which the bar will be truncated and it will be considered as an OVERFLOW of that quantity