Drawing shapes with GdiPlusX is super easy, and we can very easilly transport this to solve some of our chart needs.
In this post I'm sending you a very primitive sample for creating Circular Gauge charts. Obviously I hope to apply the techniques shown here in FoxCharts. But FoxCharts is getting big, and I confess that learning from the methods in FoxCharts may not be easy for people that are not that familiar with GdiPlusX.
Please note that this is an unfinished sample. I'm posting it here to let people see that drawing is not that complicated. Just using some imagination, merging it with some geometrical thoughts, and voilá !
Download the Gauge sample, unzip and run TESTGAUGE.SCX ! I'm including the GdiPlusX sources to let everybody immediately run the samples.
Notice that you can control the colors of the background and pointer.
The pointer shape can be modified too. Play with all the spinners to modify the shape and size! And please tell me which you like most. I'll apreciate receiving some image samples with some desired gauge charts.
Below is the relevant code for the circular gauge drawing. You'll find it in the "BeforeDraw()" event of the ImageCanvas class. It extracts the information from the form controls, and it's very easy to adapt it to your needs.
LOCAL lnAngle, lnBaseW, lnBaseX, lnBaseY, lnTopW, lnHeightPercent, lnTopY
LOCAL lnType, lnPointClr, lnBackClr, lnTicks
lnTicks = Thisform.SpnTicks.Value
lnType = Thisform.OptShape.Value
lnAngle = Thisform.SpnAngle.Value
lnBaseW = Thisform.SpnBottomW.Value
lnTopW = Thisform.SpnTopW.Value
lnBaseX = This.Width/2 -lnBaseW/2
lnBaseY = This.Height/2
lnHeightPercent = Thisform.SpnHeight.Value / 100
lnTopY = lnBaseY - (lnBaseY * lnHeightPercent) + lnTopW / 2
lnPointClr = Thisform.ShpPointerColor.BackColor
lnBackClr = Thisform.ShpBackColor.BackColor
LOCAL loGfx as xfcGraphics
loGfx = This.oGfx
WITH _Screen.System.Drawing
LOCAL loBrush as xfcSolidBrush
loBrush = .SolidBrush.New(.Color.FromRGB(lnPointClr))
loGfx.Clear(.Color.FromRGB(Thisform.BackColor))
* Create a Shape for the pointer
LOCAL loPath as xfcGraphicsPath
loPath = .Drawing2D.GraphicsPath.New()
loPath.StartFigure()
loGfx.FillEllipse(.SolidBrush.New(.Color.FromRGB(lnBackClr)), ;
This.Rectangle)
IF lnType = 1
loPath.AddArc(lnBaseX, This.Height/2 -lnBaseW/2, lnBaseW, lnBaseW, 0, 180)
ENDIF
loPath.AddLine(lnBaseX, lnBaseY, This.Width/2 - lnTopW/2, lnTopY)
IF lnType = 1
LOCAL laPoints(3)
laPoints(1) = .Point.New(This.Width/2 - lnTopW/2, lnTopY)
laPoints(2) = .Point.New(This.Width/2 , lnTopY - lnTopW / 2)
laPoints(3) = .Point.New(This.Width/2 + lnTopW/2, lnTopY)
loPath.AddCurve(@laPoints)
ENDIF
loPath.AddLine( This.Width/2 + lnTopW/2, lnTopY, lnBaseX + lnBaseW, lnBaseY)
loPath.CloseFigure()
* Rotate the shape pointer
loGfx.TranslateTransform(This.Width/2, This.Height/2)
loGfx.RotateTransform(lnAngle)
loGfx.TranslateTransform(- This.Width/2, - This.Height/2)
* Draw the pointer
loGfx.FillPath(loBrush, loPath)
* Restore the original Gfx rotation state
loGfx.ResetTransform()
IF lnTicks > 0
FOR lnAngle = 0 TO 360 STEP 360 / lnTicks
* Rotate the Gfx
loGfx.TranslateTransform(This.Width/2, This.Height/2)
loGfx.RotateTransform(lnAngle)
loGfx.TranslateTransform(- This.Width/2, - This.Height/2)
* Draw the ticks
loGfx.DrawLine(.Pens.Black, This.Width/2, 0, This.Width/2, 10)
* Restore the original Gfx rotation state
loGfx.ResetTransform()
ENDFOR
ENDIF
ENDWITH
Enjoy !!!
Download Gauge Prototype sample with GdiPlusX
I've prepared a much more complete sample using FoxCharts.
People can get it from the main download, and run the sample "ChartsSample_CircularGauge.scx"
It allows lots of customizations, like the picture below.
You can get the latest version of FoxCharts here:
http://vfpx.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=18515
