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
Comment Utility
LVL 16

Assisted Solution

ThinkPaper earned 150 total points
Comment Utility
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

Comment Utility
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

Comment Utility
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

Comment Utility
also check out this link..
it may help you implement this easier..

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Accessibility and Usability are two concepts that seem to be closely related.  But, too many people seem to have a distorted perception of them. During last five years, those two words have come to the day-to-day work of almost every web develope…
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…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

743 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now