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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

741 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