Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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 asp.net and vb.net 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
By following these Magento e-commerce development tips, you can increase your website's conversion and profitability. Read this post for more details.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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).
Suggested Courses
Course of the Month11 days, 8 hours left to enroll

564 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