Home/ Questions/Q 6576335
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T15:29:59+00:00

In short, I’m trying to make a bar (using GWT’s wrapper for HTML5 canvas)

  • 0

In short, I’m trying to make a bar (using GWT’s wrapper for HTML5 canvas) that will show something reasonable for a given value, no matter what the value of the bottom and top of the chart actually are. I’m assuming the best approach is logarithmic, but I’m completely open to any other solution.

Assumptions:

  • Our “bar” vertical, measuring 200 pixels high, 35 pixels wide.

  • We’re showing a “site” versus it’s parent “region”. The units are ones of power (e.g. kW, MW, GW).

  • The “region” has a range of 1 kW to 55.19 GW. The average value is 27.6 MW.

  • Approximately 95% of sites within the region are much closer to 1 W than 55 GW, but the top 5% skew the average significantly.

  • The first site has a value of 12.67 MW. The second site has a value of 192.21 kW.

Obviously the second site wouldn’t even register on a linear graph, while the first would register very low.

How can I make this bar more useful? For example, I’d like the top 5% of sites that skew the region’s average to represent only a small portion (5%) of the total bar, while the other 95% should represent 95%.

Conceptual Image of Problem

The line in the lower area of the bar is the region average line, while the entire bar represents Minimum (bottom) to Maximum (top).

Current Java code using log10:

// BAR_GRAPH_WIDTH = 36, BAR_GRAPH_HEIGHT = 200
// regionNsp (MW): [min=0.0, max=55192.8, avg=27596.5] 
// siteNsp (MW) = 187.18
DrawingArea canvas = new DrawingArea(BAR_GRAPH_WIDTH, BAR_GRAPH_HEIGHT);
Rectangle bgRect = new Rectangle(1, 0, BAR_GRAPH_WIDTH - 1, BAR_GRAPH_HEIGHT); // backgound bar
bgRect.setFillColor("white");
canvas.add(bgRect);
int graphSize = (int)(BAR_GRAPH_HEIGHT / Math.log10(regionNsp.getMax()));
int siteHeight = (int)Math.log10(siteNsp - regionNsp.getMin()) * graphSize;
Rectangle valueRect = new Rectangle(1, BAR_GRAPH_HEIGHT-siteHeight, 35, siteHeight);
valueRect.setFillColor("lightgreen");
canvas.add(valueRect);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I admit that I don’t know much about GWT, so I’m answering on the basis of how would I show your values on a paper-and-pencil graph. That answer is that you’ve answered your own question – use logs. The range from 1000 to 55200000000 with an average around 27600000, after taking (common base 10) logs, becomes about 3 to 11, with the average around 7.4.

    The caveat is that what you gain in “reasonableness” you do loose in perspective. Take the decibel scale, which is (common base 10) log based. The difference between an 80 decibel sound and an 85 decibel sound doesn’t seem like a big change, except that the second is three times more energetic.

    • 0