I played around with GChartExample21.java (available in the chart
gallery and linked to in my previous post) a bit, and was able to
produce a 1px overlap between adjacent bars that I think is consistent
with the problem you reported.
I also found that I could eliminate this 1px adjacent bar overlap by
changing the following lines in GChart.java:
VBarBottom(int wm, int hm) {
super(wm, hm,0.5,0.5,0.5,0.5);
}
To instead read:
VBarBottom(int wm, int hm) {
super(wm, hm,0.0,0.0,0.5,0.5);
}
The 0.5s adds a half pixel widening to the left and right edges of the
symbol. This is intended to make symbol edges align better with the
gridlines, and is helpful in some other cases, too, but this half
pixel padding seems to be causing the 1px overlap, and that appears to
be preventing you from doing what you want to do.
The easiest way to eliminate the 1px overlap that I found (without
changing the GChart.java source code) was to switch from
SymbolType.VBAR_SOUTH to SymbolType.VBAR_BASELINE_CENTER. This works
because the VBAR_BASELINE_CENTER symbol type's constructor does not
have the 1/2 pixel padding (it already has 0,0 instead of 0.5, 0.5).
To make the VBAR_BASELINE_CENTER symbol type in other respects behave
the same as VBAR_SOUTH, you'll have to set the baseline of the curve
so that it equals the minimum value displayed on the Y axis, for
example, via something like:
getCurve().getSymbol().setBaseline(theMinValueShownOnTheYAxis);
Will try to correct the root cause (not sure I fully understand that
yet, BTW) in a future release (maybe via a feature that let's you
explicitly control if the 1/2 px padding is present? If you have
suggestions, I'm interested to hear them). Submit this problem to the
GChart issue tracker if you don't want to let me forget it.
Thanks for taking the time to create a test and report the problem
that you found (I never considered this particular usage scenario of
translucent overlapping bars before your post).
Getting back to your original problem, it might be simpler to create
20 1-point curves and just change the background color or other
features of each symbol/point/curve to represent the enabled or
disabled state, rather than the two-curve strategy I suggested earlier
(this is almost certainly a simple/better approach if you only have 20
bars on the chart, and you are not planning to use a chart key).
Finally, the simplest way to indicate that "some of these bars are not
like the others" is via setAnnotationText or setAnnotationWidget,
especially if you are flexible about the way that such differences get
indicated (e.g indicating such differences via a label, a small icon
at the center of each bar, etc.)
John
On Feb 17, 2:37 pm, Paul Wang <[email protected]> wrote:
> Thanks for the idea. I tried it out and it seems like it would work
> except that the bars seems be overlap a bit.
>
> In the example below the bars have width of 53px but are positioned
> 52px apart. When they're solid bars it's not really noticeable but
> with semi-transparent images you notice it right away when they
> overlap a bit.
>
> Following is the test code inside my EntryPoint:
>
> public void onModuleLoad() {
>
> GChart.setBlankImageURL(GWT.getModuleBaseURL()
> +GChart.DEFAULT_BLANK_IMAGE_URL);
>
> GChartgchart= new GChartExample01();
> gchart.update();
>
> RootPanel.get().add(gchart);
>
> }
>
> static class GChartExample01 extendsGChart{
>
> GChartExample01() {
>
> setChartSize(990, 200);
> setHoverTouchingEnabled(false);
>
> long numberOfPoints = 20;
>
> addCurve();
>
> getCurve().getSymbol().setSymbolType
> (GChart.SymbolType.VBAR_SOUTH);
> getCurve().getSymbol().setBackgroundColor("green");
> getCurve().getSymbol().setModelWidth(1.0);
> getCurve().getSymbol().setBorderWidth(0);
>
> for (int i = 0; i < numberOfPoints; i++) {
> getCurve().addPoint(i, Random.nextInt(4000));
> }
>
> addCurve();
> getCurve().getSymbol().setSymbolType
> (GChart.SymbolType.VBAR_SOUTH);
> getCurve().getSymbol().setBackgroundColor("blue");
> getCurve().getSymbol().setModelWidth(1.0);
> getCurve().getSymbol().setBorderWidth(0);
>
> for (int i = 0; i < numberOfPoints; i++) {
> getCurve().addPoint(i, Random.nextInt(4000));
> }
>
> getXAxis().setHasGridlines(false);
>
> }
> }
>
> On Feb 12, 3:18 am, John Gunther <[email protected]> wrote:
>
> > I noticed this is your very first post to any Google forum. Welcome.
>
> > GChart2.4 has a built-in single point selection capability. Here's an
> > example of how to use that:
>
> >http://gchart.googlecode.com/svn/trunk/doc/com/googlecode/gchart/clie...
>
> > To emulate multiple selection, you could add a second curve that had
> > the same symbol type (and other properties such as width) as the first
> > (so that it would overlay it) but only included the points (bars) you
> > wanted to be selected. The setImageURL method could then be applied to
> > this second curve, passing in your semi-transparent image.
>
> > Selection/deselection would then be a matter of adding/removing points
> > to/from this second curve, and calling the update method to refresh
> > the chart.
>
> > John C. Guntherhttp://gchart.googlecode.com
>
> > On Feb 11, 1:38 pm, Paul Wang <[email protected]> wrote:
>
> > > Hi,
>
> > > I'd like to put a semi-transparent panel on top of agchartto show
> > > disabled areas of a bar graph. I looked throughgchart2.4 and didn't
> > > see anything that'd let me easily find out where bars are located so I
> > > can position a panel on top of it.
>
> > > Is there a better way to do this? I also need to do this without any
> > > user input (no events).
>
> > > --
> > > Paul Wang
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
