Question

I am trying to develop a dynamic funnel graph using JavaScript and HTML5 canvas. I can draw the elements just fine, the only problem I have is with my math. I want my graph to have a linear slope on each side to make an upside-down cone. The problem is that I don’t know if it can be done with the amount of information I have. So, here is the info I do have:

1. The width and height of the total graph (250×300 respectively)
2. The length of the two main bases of the whole graph (250 and 30)
3. The area of the total graph (42000 pixels) ((250+30)/2)*300
4. The number of how many stages there will be (let’s say 3 for simplicity)
5. The percentage of the area each stage will take (let’s say 30%, 50%, and 20% for each stage)
6. The slope/angle of the graph (rise/run) 300/110 (It’s not a perfect triangle and the second base has a length of 30)

Each stage will be a trapezoid (as well as the graph itself).
Now, what formula can I use to create a funnel graph that will make each stage the correct height given the slope and the first base of the stage’s trapezoid?

I have tried and tried and I just can’t seem to make the math work. Either one stage is too long for the slope, or another is too small, which causes the slope to be inconsistent. I need the slope to be consistent and for only the stage’s height to change.

The closest image I can find to represent what I want is this:

http://dwh01.unife.it/microstrategy/help/WebUser/WebHelp/Lang_1033/images/defining_funnel_widget.gif

Answer 1

I appreciated eh9’s answer, but I honestly am not smart enough to solve that sort of equation through JavaScript. However, I ended up coming up with a solution that I will outline here.

1. Find the length of base 1 on whatever stage you’re on. (If it’s the first stage, it’s the width of the graph).
2. Calculate the area that the next stage needs to be. I’m passing in a percent and since I know the total area of the whole graph, I can multiply that area by the percent and find the area of the stage to draw.

3. Iterate through a for loop with ‘i’ being the height and the condition being i <= graph_height.

   1. Calculate the second base length with the given height (i) and the slope by using this equation: b2 = (b1 – ((i/slope)*2))).
   2. Calculate the new temporary area of the stage given that height.
   3. Push the difference of the temporary area and what the area should be into an array along with the height (i).

4. Sort the array placing the lowest difference area difference as the first element in the array.

5. You now have an array that contains, in it’s first element, the smallest area difference with its corresponding height.

Therefore, now you have the height of the stage given its area. This is all you need along with the first base and the slope to figure out the second base’s length and position.

This is not the most efficient solution (mainly due to the computational guesswork that is done), but it does work and it is accurate.