Improve company productivity with a Business Account.Sign Up


Implementation of line graph using SVG

Posted on 2006-11-08
Medium Priority
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 1400 total points
ID: 17896947
LVL 16

Assisted Solution

ThinkPaper earned 600 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
Magento is the best technology for eCommerce start-ups as it offers the technical expertise and visual appeal to create a store that pulls sales and earns high ROI (Return on investment).
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

584 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