Link to home
Start Free TrialLog in
Avatar of badalpatel
badalpatel

asked on

Implementation of line graph using SVG

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...
ASKER CERTIFIED SOLUTION
Avatar of jay_gadhavi
jay_gadhavi

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of badalpatel
badalpatel

ASKER

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
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)
If NOT EOF Then
  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
rs.movenext
Loop
  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.
also check out this link..
it may help you implement this easier..

http://webfx.eae.net/dhtml/chart/demo.html