CREATING HIERARCHICAL CHART USING SVG

• Download ARTICLE - 145 KB

Introduction

This is one of my works in which I enjoyed lot. As I was searching for simple and perfect algorithm to create Hierarchical chart using SVG, I found some tips and solutions separately. Now I would like to share with you guys, Creating Hiearchcial charts with SVG.

Background

The main objective of this sample is creating Charts using SVG. Hiearchical class Library, will arrange nodes as per no of children it contains. Also It will generate SVG xml as an output with gradient colors.

There are some features available...

1. Collapsible view
User can collapse/expand nodes by clicking on + - simbols. Other existing nodes will be rearranged according to the hirarchy.

2. Zoom
User can zoom the images by fit to screen, zoom in and zoom out.

3. Attaching images with Nodes
Images can be attached with each nodes from which user can popup windows.

Using the code

creating objects for each node

		private void Page_Load(object sender, System.EventArgs e)
		{

			//CREATE OBJECT FOR EACH NODE AND ADD AS PER HIERARHCY .
			ShapeBase oChairman = getshape("CHAIRMAN", "COLOR1");
			graphabs.Root = oChairman;		

			ShapeBase oCFO = getshape("CFO", "COLOR2");
			addshape(graphabs.Root, oCFO);

			ShapeBase oCEO = getshape("CEO", "COLOR2");
			addshape(graphabs.Root, oCEO);

			ShapeBase oFman1 = getshape("FINANCIAL MANAGER 1", "COLOR3");
			addshape(oCFO, oFman1);

			ShapeBase oFman2 = getshape("FINANCIAL MANAGER 2", "COLOR3");
			addshape(oCFO, oFman2);

			ShapeBase oPM1 = getshape("PROJECT MANAGER 1", "COLOR3");
			addshape(oCEO, oPM1);

			ShapeBase oPM2 = getshape("PROJECT MANAGER 2", "COLOR3");
			addshape(oCEO, oPM2);

			ShapeBase oPL1 = getshape("PROJECT LEADER 1", "COLOR4");
			addshape(oPM1, oPL1);

			ShapeBase oPL2 = getshape("PROJECT LEADER 2", "COLOR4");
			addshape(oPM2, oPL2);

			ShapeBase oTM1 = getshape("TEAM MEMBER 1", "COLOR2");
			addshape(oPL1, oTM1);

			ShapeBase oTM2 = getshape("TEAM MEMBER 2", "COLOR2");
			addshape(oPL1, oTM2);

			ShapeBase oTM3 = getshape("TEAM MEMBER 3", "COLOR2");
			addshape(oPL1, oTM3);

			ShapeBase oTM4 = getshape("TEAM MEMBER 4", "COLOR2");
			addshape(oPL2, oTM4);

			ShapeBase oTM5 = getshape("TEAM MEMBER 5", "COLOR2");
			addshape(oPL2, oTM5);

			ShapeBase oTM6 = getshape("TEAM MEMBER 6", "COLOR2");
			addshape(oPL2, oTM6);

			//DRAWCHART FUNCTION WILL ARRANGE THE NODES BY HIEARHCY
			ShapeBase.DrawChart(graphabs.Root, false, 10, 10, false, graphabs.LevelCount);

			//CreateHierarchicalChart WILL GENERATE SVG DOCUMENT.
			XmlDocument xmldoc = yaflaSVG.CreateHierarchicalChart(getGradientsColors(), graphabs,2.3, true,false);

			Response.BufferOutput = true;

			xmldoc.Save(Response.OutputStream);
			Response.AppendHeader("Content-Disposition", "inline;filename=graphic.svgz");
			Response.ContentType = "image/svg+xml";
			Response.Flush();
			Response.End();
		}

		private ShapeBase getshape (string sText, string color)
		{
			ShapeBase node = new ShapeBase();
			node.Id = "G" + graphabs.Shapes.Count.ToString();
			node.TextDetail = sText;
			node.Text = sText;
			node.TextAlign = "middle";
			node.GradientColor = color;
			node.Fit();
			node.Height = 30;
			node.Links.Add(new ShapeLink("svgfiles\\email.gif", "", "Email", 10, 15, 10, 10));
			return node;
		}		

Attaching Gradient Colors

private ArrayList getGradientsColors()
		{
			ArrayList  arrGradients = new ArrayList();

			arrGradients.Add(getGradientColor("255,255,255", "0,191,255", "COLOR1"));

			arrGradients.Add(getGradientColor("255,255,255", "65,105,225", "COLOR2"));

			arrGradients.Add(getGradientColor("255,255,255", "119,241,67", "COLOR3"));

			arrGradients.Add(getGradientColor("255,255,255", "255,255,204", "COLOR4"));			

			return arrGradients;
		}

This is my first article in Codeproject. Anyway I hope this will help you all.

Request

I would appreciate your remarks/corrections/suggestions.