ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Linear Meter - Draw Pointer on Outside
Posted by Chris Bergin on Dec-16-2014 05:17
I'd like to draw a linear meter with the pointer starting above the meter area and pointing down to the axis, but I can't seem to make this happen.

I tried using a custom polygon with coordinates greater than 1000, but that didn't seem to work.  The pointer still starts inside the meter area.

Do you have any suggestions?


(C#, ASP.NET 4.5, ChartDirector 5.1)

            int width = 200; //Normally passed in via QueryString
            int height = (int)(width * 0.2);

            LinearMeter chart = new LinearMeter(width, height);
            chart.setBackground(0x222222, 0x000000, 0);
            chart.setColors(Chart.whiteOnBlackPalette);
            chart.setMeterColors(
                axisColor: Chart.Transparent,
                labelColor: 0xEEEEEE,
                tickColor: Chart.Transparent
            );

            chart.setMeter(
                leftX: width / 3, //Leave 1/3 of the chart width for the label.
                topY: (int)(height * 0.2),  //Leave 20% of height for the pointer.
                width: width * 2 / 3,  //Take 2/3 of the chart width for the meter area.
                height: (int)(height * 0.8), //Take 80% of height for the meter area.
                axisPos: Chart.Top
            );
            meter.setScale(0, 100);
            meter.addZone(0, 100, 0x242424);

            MeterPointer arrow = meter.addPointer(50); //Normally passed in via QueryString
            arrow.setShape(new int[] {-30, 1200, 0, 1000, 30, 1200});

            Response.BinaryWrite(chart.makeChart(Chart.PNG));

  Re: Linear Meter - Draw Pointer on Outside
Posted by Peter Kwan on Dec-17-2014 03:07
Attachments:
Hi Chris,

Do you mean something like the attached chart (with the code included)? This is simply
achieved with the axis position set to Chart.Bottom (instead of Chart.Top).

For the meter polygon, the y-coordinate 0 refers to the position of the rail. The y-
coordinate 1000 equals to a position that is N pixels away from the rail, where N is the
"meter height" (the height parameter you use in setMeter). It is not at the top of the meter
area, because the rail itself is not at the bottom of the meter area but is offsetted
downwards for your chart layout. To put a point outside the meter area, y = 1200 may not
be sufficient. You may try y = 1800.

Hope this can help.

Regards
Peter Kwan
hlinearmeter.png
hlinearmeter.aspx
hlinearmeter.aspx

2.27 Kb

  Re: Linear Meter - Draw Pointer on Outside
Posted by Chris Bergin on Dec-17-2014 03:46
Attachments:
No, I'd like the pointer completely outside the meter area if possible.

The attached chart is what I have right now.  The meter area is the black rectangle to the right of the bright green rectangle.  I'd like to move the pointer so that it's in the dark gray area above, pointing downward at the black area with the bottom point just touching it.

It's very close right now, I just can't figure out how to get the pointer to move outside the meter area.  In ChartDirector, I'm used to passing in negative offsets to do things like this (like a negative label gap to get axis labels inside the plot area), but I can't figure out what the equivalent trick would be to drawing the meter polygon.
LinearMeter.PNG

  Re: Linear Meter - Draw Pointer on Outside
Posted by Peter Kwan on Dec-17-2014 14:46
Hi Chris,

Your original code (with the axis position being Chart.Top) in fact will work, except that you
need to move the coordinates further out, like:

arrow.setShape(new int[] {-30, 1600, 0, 1300, 30, 1600});

In my example which uses the axis position of Chart.Bottom, you may notice the pointer is
already partly outside the meter area (it starts from rail above the meter area), so you just
need to use a shorter pointer to make it completely outside the meter area. Of course, you
can also use negative coordinates to put the pointer further up.

In your original code, if you change the axis position to Chart.Bottom in your original code,
you can use the following arrow shape:

meter.setRail(Chart.Transaprent);
arrow.setShape(new int[] {-30, 0, 0, 250, 30, 0});

Hope this can help.

Regards
Peter Kwan

  Re: Linear Meter - Draw Pointer on Outside
Posted by Chris Bergin on Dec-17-2014 22:56
Attachments:
OK, I think I'm starting to understand.  This is the first time I've used a custom polygon, so I'm still getting used to how the coordinates work.

I modified the shape definition as you suggested, and it's exactly what I wanted.  You're a huge help, as always.  I can't thank you enough.
LinearMeter.PNG