Question

I am working on a graphing class (in javascript) which uses canvas. This is just for experimental / learning purposes. Currently the graph scales correctly based on whatever height and width the canvas is set at. This is not a problem, and here is basically what I am doing to plot the correct coordinates [pseudo-code].

point[0] = [10, 15]
point[1] = [20, 10]
point[2] = [30, 20]
point[3] = [40, 15]

canvas width = 300
max x = 40

so for any given point:

position x = ( point[i][0] / max x ) * canvas width 

simple enough. I get a ratio, then multiply it by the canvas width to plot it at the correct pixel.

The problem however, is coming up with an equation that would cause the minimum value of x to reside at 0 on the x coordinate of the graph, and the max value to be at the maximum point of the graph (which it already does because of the 1:1 ratio in my current equation). Currently the minimum value of x (10 in the example), resides at 75px in the x coordinate, because of the 1:4 ratio being multiplied to the canvas’ width.

tldr / summary: I need to make a graph in which the minimum value is plotted at the beginning of the graph(0,0), and the maximum value plotted to the end.

Answer 1

try calculating a value for pixel-width-per-point first.

e.g.

widthPerPoint =  canvasWidth / (maxX - minX)

then your position can be normalised to zero by subtracting the minimum value:

position = widthPerPoint * (point[i][0] - minX)

for your first example

widthPerPoint = 300 / (40 - 10) = 10

position = 10 * (point[i][0] - 10) = 10 * 0 = 0

and for the others:

  point[0] = [10, 15] -> 0
  point[1] = [20, 10] -> 100
  point[2] = [30, 20] -> 200
  point[3] = [40, 15] -> 300

at least I think that’ll work….