Click here to Skip to main content
Click here to Skip to main content
Go to top

CREATING HIERARCHICAL CHART USING SVG

, 27 Dec 2007
Rate this:
Please Sign up or sign in to vote.
CREATING HIERARCHICAL CHART USING SVG

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

Screenshot - ARTICLE



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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Anand M
Team Leader
India India
working with microsoft technologies for 6 years,
 
interested in applications frameworks and patterns

Comments and Discussions

 
Questionhow can I use it in windows application? Pinmembersahar1129-Aug-14 20:21 
QuestionNot Working Properly PinmemberMember 1059583014-Apr-14 21:04 
AnswerRe: Not Working Properly PinmemberAnand M13-May-14 1:32 
GeneralMy vote of 1 Pinmemberhasansaad29-Jan-10 6:44 
GeneralImage not viewed Pinmembernixor19-Jul-09 10:33 
GeneralThanks PinmemberMushari8-Jul-09 9:03 
QuestionHow can we use HierarchicalChart Lib in windows forms application PinmemberMahmoud Fathy Afify19-Apr-09 1:25 
GeneralThink you! Pinmemberparyjie30-Oct-08 16:18 
Generaldubukku Pinmemberfroxy1-Jan-08 18:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 28 Dec 2007
Article Copyright 2007 by Anand M
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid