Implementation of line graph using SVG

Posted on 2006-11-08
Last Modified: 2008-03-10
Hello everyone
I have the measurement table in which datetime and value and other info is stored and i want to display line charts according to the table data..
I already implement to draw a line graph in and but it slow down the speed of site..
So i want to draw the line graph using SVG..
So anyone who has implemented this SVG concept please give me some code and explaination regarding it...
Question by:badalpatel
  • 3

Accepted Solution

jay_gadhavi earned 350 total points
ID: 17896947
LVL 16

Assisted Solution

ThinkPaper earned 150 total points
ID: 17901680
svg is real simple code. The problem is that users will need to download the SVG viewer in order to see it, otherwise you see nothing. While the SVG viewer is already available on Firefox and Opera, it isn't on IE so users will need to install it. You may want to consider VML (another vector lang) It is Microsoft-based and does not require download. But it all depends on what browser your users use more.

This site gives you lots of example code and tutorials:

So if you actually view the source for drawing a line in notepad, it looks something like:

<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

Breaking it down, it maps out the coordinates on your screen of where to draw. You specify the start point x1,y1 = 0,0 which is the top left corner and end point x2,y2 = 300,300 which is towards bottom right. Then the "style" portion is basically just CSS (stylesheet code) that details the color, thickness, type (dash, dots, solid), etc. So for this example, you are drawing a diagonal line: \

So if you need to integrate this into your current code, you change this:

<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

to something like: (in ASP)

response.write "<line x1='"& x1var &"' y1='"& y1var &"' x2='"& x2var &"' y2='"& y2var &"' style=""stroke:rgb(99,99,99);stroke-width:'"& strokewidth &"' ""/>"

where you have variables: x1, y1, x2, y2, strokewidth and those, you'd need to define on your own. You could also dynamically specify the color and any additional properties.

I've worked with VML but not SVG but it should be the same concept...

Normally.. first you define how big your "plotting grid" is. I define it with the "group" tag - not sure what SVG has equivalent to this.
So for instance I could map out a grid to equal the computer resolution 1024x720 - 1024 pixels across and 720 pixels down.. but I don't.. I'd rather simplify the plotting so I make the "grid" to be only 100x100. So now your whole screen is divided now into 100 squares across and down.
Then for any shape within that group, it would be mapped according to the 100x100 grid.
So if I specified the circle to be at 1,1 it would be positioned at 1,1 ACCORDING to 100x100 grid. If I put it at 100,100 it would be at the bottom right corner.
If I want to be more specific, I could increase the number.

It really isn't too difficult integrating SVG or VML into your code. It just takes a bit of time to understand it. Usually I modify existing sample shape codes. It's much easier than trying to create it from scratch.

Author Comment

ID: 17904874
hii ThinkPaper
can u show me some sample code..
i already went through the tutorial at w3schools..
but i want dynamic genration of graph.
so if u can provide just code snippet then it will be very useful..
thnx in advance
LVL 16

Expert Comment

ID: 17907217
I have tried to give you an example (in very simple terms). This would take place of your standard record results printout:

response.write "<line x1='"& x1var &"' y1='"& y1var &"' x2='"& x2var &"' y2='"& y2var &"' style=""stroke:rgb(99,99,99);stroke-width:'"& strokewidth &"' ""/>"

Suppose you are creating a bar graph to list people's grades.. basically what you would do (in ASP):

dim i
i = 0          'record counter
Connect to DB
Run your Query (Select statement)
  response.write "<g>"      'start group label - you'll need to specify more stuff in here
While NOT.Eof
   response.write "<line x1='"& i &"' y1='0' x2='"& i & "' y2='"& rs("grade") &"' style=""stroke:blue; stroke-width:'2' ""/>"
i = i + 1  'increment counter to move to next bar slot
  response.write "</g>"     'end group label
End If

So basically while you're going thru each record: plot it and then move x over one and do the same thing again.

I only have experience in VML so syntax is not absolutely correct, but hopefully you get the idea.
LVL 16

Expert Comment

ID: 17909556
also check out this link..
it may help you implement this easier..

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit ( and similar technologies have enjoyed wide adoption, making it possib…
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This video teaches users how to migrate an existing Wordpress website to a new domain.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question