XForms, Supply and Demand

Motivation

You want to create a simple illustration of a concept using a dynamic graph. You want to use a range control to change in input and see the impact of that change on an output.

Screen Image

Supply and Demand Dynamic Graph (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)

Sample Program

This is not working yet with the range control. I wrote it with just SVG and JavaScript and I am in the process of porting it to XForms. I also need to use CSS to clean up the markup.

Price and Demand

P

Q

Demand

Input: Price =
100

Output: Quantity =
100

Adjust price by moving the slider.
Note that as the input (price) changes.
the quantity sold also changes.
At high prices a low quantity is sold.
At low prices a high quantity is sold.

Note that as the input (price) moves, the quantity sold changes.
At high prices a low quantity is sold.
At low prices a high low quantity is sold.

0 && value < 200)
{
thumb.setAttribute("transform", "translate(" + (value) + " 0)");
SliderCallback(value);
}
}

function SliderClick(event)
{
var value = event.getClientX() - parseFloat(slider.getAttribute("xoffset")) - 4;
if (value > 0 && value < 200)
{
thumb.setAttribute("transform", "translate(" + (value) + " 0)");
SliderCallback(value);
}
}

function SliderCallback(val)
{
// this is where we change the values
newPrice.setAttribute("cy", val);
horizLine.setAttribute("y1", val);
horizLine.setAttribute("y2", val);
horizLine.setAttribute("x2", val);
vertLine.setAttribute("x1", val);
vertLine.setAttribute("x2", val);
vertLine.setAttribute("y1", val);
priceText.firstChild.nodeValue=(200-val);
quantityText.firstChild.nodeValue=(val);
//= Math.round((val*1000)/1000);
window.status = "price is " + (val);
}

function OnLoadEvent(event) // called, when svg file is loaded (s. onLoad=..) ..
{
var doc = event.getTarget() != null ? event.getTarget().getOwnerDocument() : null;
if (doc != null)
{
slider = doc.getElementById("slider");
thumb = doc.getElementById("thumb");
newPrice = doc.getElementById("newPrice");
priceText = doc.getElementById("priceText");
quantityText = doc.getElementById("quantityText");
vertLine = doc.getElementById("vertLine");
horizLine = doc.getElementById("horizLine");
slider.addEventListener("mousedown", SliderDown, false);
slider.addEventListener("mouseup", SliderUp, false);
slider.addEventListener("mousemove", SliderMove, false);
slider.addEventListener("click", SliderClick, false);
}
}
]]>

100

Price:

Price:

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.