Click here to Skip to main content
13,088,846 members (70,641 online)
Click here to Skip to main content
Add your own
alternative version


7 bookmarked
Posted 26 Jun 2010

An XY Plot in SVG

, 26 Jun 2010
Rate this:
Please Sign up or sign in to vote.
This is a demo plot in HTML and SVG where JavaScript controls SVG.


The SVG Demo Plot demonstrates how to modify SVG using HTML forms dynamically. This web page modifies the plot using DOM Level 3, which is an XML transformation standard. I plotted some random functions. One is an x=4 function, another a y=5x-2 function, and another a y=-x^2+5x-2 function. This also complies with the SVG standards written in Jonathon Watt's page. He apparently is a Mozilla developer. I received his guidelines when working with SVG professionally.


The SVG Demo Plot does not yet work on Firefox and Chrome. Both apparently have issues with SVG. For example, this SVG example from W3C works in both Chrome and Opera, but not in Firefox: Only the Opera browser supports JavaScript dynamically, adding lots of elements based on HTML forms. (I thought that the reason was that Firefox and Chrome do not support modifying the root element, but only support modifying the children, as suggested in my blog. However, I was wrong.)

Using the code

When you enter the page 'default.html', you get the following page:


You could easily edit the parameters like below:


You could also edit it so that it renders no functions.


I made two HTML frames. I used 40% for the left and 60% for the right frame. Then, besides the form that the user sends for the left frame, a little form would trigger the plot to render for the right frame. The left frame calls JavaScript that would submit information to the form on the right frame after validating that numbers were submitted. Then, once the JavaScript for the right frame gets submitted, it triggers JavaScript (and ECMAScript, which is used for SVG and essentially is JavaScript) to render the plot. It is kind of a chain all right.

There is a need for transformation from XY plot space to SVG space. Because, the top of the screen in SVG space is 0 and the left of the screen is 0. Henceforth, I transformed the plot 25 pixels from the top. (This is the maximum y.) And 50 pixels from the left. (The minimum X is located 50 pixels from the left.) All figures, have the fill #FFF because SVG is all lines and shapes. This could be expressed using the code below for the Y-axis, for example:

function yCoordinateToScreen(y, minY, maxY) {
     var ySpace=yMinCoord-yMaxCoord;
     var yCoords=maxY-minY;
     var svgIndex = (y-minY)*ySpace/yCoords;
     return yMinCoord-svgIndex;

All of the object rendering is similar to DOM in XML. I get the document node and the group 'plot', which is where I will insert the XY plot, in SVG, as follows:

var target=window.document.getElementById("PlotData");

First this renders the ticks by doing the following on the 'startup' function:

tick = svgDoc.createElementNS(svgns, "line");
tick.setAttributeNS(svgns, "id", "yTickRight"+i);
tick.setAttributeNS(svgns, "x1", xMaxCoord+4);
tick.setAttributeNS(svgns, "y1", yPos);
tick.setAttributeNS(svgns, "x2", xMaxCoord);
tick.setAttributeNS(svgns, "y2", yPos);
tick.setAttributeNS(svgns, "stroke-width", 2);
tick.setAttributeNS(svgns, "stroke", "black");

Now a tick along the right side Y-axis is created. The tick will be 4 pixels long and 2 pixels wide.

Then when the form for the plot is submitted on the right frame by the form on the left frame, a special ordering is done for each of the figures. Because this renders a quadratic function, this needs to render the quadratic function before the other functions. Otherwise, the quadratic function will overlap the elements that were formerly added. (Even if you use a 'polyline' element, that will overlap the other elements that were formerly added as well.) The best way to render a quadratic function is to use a path as follows:

var y_val = y2(xMin);
var xScreenCoord= 0;
var yScreenCoord=0;
var data = "";
if (y_val <= yMax && y_val >= yMin) {
    xScreenCoord=xCoordinateToScreen(xMin, xMin, xMax);
    yScreenCoord=yCoordinateToScreen(y_val, yMin, yMax); 
    data= "M"+xScreenCoord + " " + yScreenCoord + " Q";    
for (var j=xMin+1; j <= xMax; j++) {
     y_val = y2(j);
     if (y_val <= yMax && y_val >= yMin) {
        xScreenCoord=xCoordinateToScreen(j, xMin, xMax);
        yScreenCoord=yCoordinateToScreen(y_val, yMin, yMax);
        if(data == "") 
          data= "M"+xScreenCoord + " " + yScreenCoord + " Q";
          data += xScreenCoord + " " + yScreenCoord + " ";

drawing3.setAttributeNS(svgns, "d", data);
drawing3.setAttributeNS(svgns, "stroke-width", 1);
drawing3.setAttributeNS(svgns, "stroke", "#00F");
drawing3.setAttributeNS(svgns, "fill", "#FFF");

Then this renders the lines. Afterwards, this renders the origins and then the gradients, using a similar method as above. The SVG Plot Demo refreshes the page by ridding the page of the formerly rendered elements in the 'plotCalc' function if the page reloads.

Well, the world is not perfect. But one could at least try to pragmatically solve the problems that the world offers.


This article, along with any associated source code and files, is licensed under The zlib/libpng License


About the Author

Conrad Kanengieter
United States United States
I am a freelance developer. I specialize in web development mostly. But I take on other roles as well... I administrate computers (in conjunction with web development). I also from time-to-time develop software to tackle a problem that stirs my mind.

You would find me in the think tank.

You may also be interested in...

Comments and Discussions

GeneralNeeds formatting Pin
Richard MacCutchan26-Jun-10 23:31
mvpRichard MacCutchan26-Jun-10 23:31 
GeneralNeeds formatting Pin
Richard MacCutchan25-Jun-10 23:24
mvpRichard MacCutchan25-Jun-10 23:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170813.1 | Last Updated 26 Jun 2010
Article Copyright 2010 by Conrad Kanengieter
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid