Home / Column Articles/ March 2004 Column Article

March 2004 Column Article

CUSTOM drawing in graphics server.net and graphics server com/win32

Customizing and Expanding GS.NET Chart Data Points using GDI+ Drawing Calls
By Matt Berry

Sometimes just displaying a symbol at your data point isn't enough. One might desire an arrow pointing to a specific data point, or arrows pointing to all data points in a given series. Or, to get more elaborate, you could create an annotation (or label) and connect the annotation to certain data points by drawing connecting lines. And you could create multiple annotations where each annotation connects to its own set of data points. There are many other possibilities, which are left up to the Graphics Server programmer's imagination.

To draw extra lines or arrows on the chart itself is straight forward - simply use the OnPostPaint event handler or the OnPrePaint event handler (depending if you want the lines to show up above or beneath the chart) and then within the Paint events call some GDI+ DrawLine methods. The hard part is figuring out where those DrawLine calls should begin and end (the DrawLine's (x1, y1) and (x2, y2) parameters).

In this article we will examine drawing to a particular data point on your chart. This can get mentally tricky because of all the unit changes when moving from one space to another space all in the same chart window. So always be aware of the units that you are using; the units you're converting from and the units you're converting to. I like to name my variables to make it more clear about the units I'm in, such as "xDataPoint" being in data point units, and "xChartPixel" being in pixel units (chart pixel units use the chart's upper left corner as the (0,0) origin). In our example we'll be using three seperate units: data point units, grid pixel units, and chart pixel units. These units are described like so:

Data Point Units: these are the units used when assigning data to a series. When the series is visible on the x/y axes of the chart, you can tell what your data point values are by reading the x/y axes' labels that correspond to your data point's position.
Grid Pixel Units: these are pixel values of a given position on the grid, with the (0,0) origin being defined as the upper left corner of the Grid
Chart Pixel Units: these are pixel values of a given position on the grid, with the (0,0) origin being the upper left corner of the chart. This is just the same as Grid Pixel Units except the upper left corner is the chart window's upper left corner.

The image below visually shows the (0,0) origins for all the 3 different units mentioned above. Note that Chart Pixel Units apply to the entire chart window area (the blue border), the Grid Pixel Units apply to just the Grid area (the red border), and the Data Point Units apply to the axes area (approximately where the green axes begin and end).

Now our example will draw arrows pointing to each data point in the chart's first series. For this example we break it up to tackle each data point on its own and draw an arrow at that data point. This drawing is done in the DrawArrowAtDataPoint() method we create. We pass in the data point to draw the arrow at, as well as the chart we're using, and the graphics object so we can call DrawLine. Drawing at the given data point requires three steps:

that we get the data point value from the chart (in Data Point Units)
convert that data point value in Grid Pixel Units
convert the result into Chart Pixel Units

Once we have the Chart Pixel Units we can call DrawLine and know that our arrow line will draw exactly at the data point location. The sample code accomplishes all this (in both VB.NET and C# languages) and is available in our knowledge base article GSKB310 . The result of running the code will produce the image below.

Custom Drawing using Graphics Server API (COM version) with the Chart Control
By Matt Berry

If you read the first article this month "Customizing and Expanding GS.NET Chart Data Points using GDI+ Drawing Calls" and were wondering how to translate these "custom drawing" ideas to the Graphics Server v6 COM/ActiveX/OCX Chart Control, then this is the article for you. You've been able to use Graphics Server's COM version to add your own customized drawings for quite a while (for a number of versions including v5.x up through v6.1) but not everyone knows how to do this or how much work is involved. The quick answer is that it isn't very hard to add custom drawings, but if you want to dig and and create complex custom drawings then the custom drawing functionality of GS COM allows you to do this.

The main ideas about adding your own drawing code still applies to both GS.NET and GS COM. For both you'll be creating a custom "Paint" event where all the custom painting will go. In GS.NET this event handler is named OnPostPaint, whereas in GS COM the event is SDKPaint. In GS.NET you would use GDI+ drawing calls to create your custom images, but in GS COM this is done using Graphics Server's own drawing API. Also figuring out the conversions between data point units and drawing units is still applicable in GS COM but the drawing units aren't pixels, instead GS COM uses its own drawing units. And whereas GS.NET has a TransformPoint() method to allow the programmer an easy way to transform from data values into (pixel) drawing units, in GS COM the programmer need a few more lines of code to accomplish this conversion.

A detailed example that draws dashed-dotted lines at specific data value locations, as well as extra text on top of the COM/ActiveX/OCX Chart Control can be found in knowledge base article GSKB256. This sample code is in VB (VB5/VB6) but the same ideas would apply to other programming languages supporting ActiveX/OCX controls. Sometimes adding the SDKPaint event can be a little tricky depending on the language you're programming in, so I would suggest to look at these additional articles that tell you how to add the SDKPaint event to Visual C++ (GSKB281), Delphi (GSKB282), Borland C++Builder (GSKB283), and Access / VBA(GSKB284). Once you've setup the SDKPaint event you would need to translate the VB sample code into your appropriate programming language. If you have trouble doing this, our support staff can assist you with this.

Once the sample code is run it will produce an image similar to the one below.

Upgrade Questions?

We frequently get asked if customers can upgrade from an old version of Graphics Server and the answer is YES. If you're using a very old version of Graphics Server but you have a valid serial number, you're eligible for upgrade pricing. This includes Graphics Server .NET.

Other questions about upgrading? Email Sales@GraphicsServer.com. The Graphics Server Developer Support team is also available to answer questions. We invite you to contact them if you're evaluating Graphics Server or if you already own and have questions. You can email Support at Support@GraphicsServer.com or call them at 206-625-9436 (M-F 8am-4pm PST).

For more information about upgrading and getting started check out these articles from the our Online Knowledge Base.

Converting or upgrading to Graphics Server 6.0

Knowledge Base Article: GSKB150
You know Graphics Server 6.0 is backwards compatible but you don't know what it's going to take to upgrade. It's easy, check out this article for step by step instructions on upgrading from previous versions and converting from the preview or demo version to the full version. You'll find answers to your upgrade questions regardless of how old or new your version is.

How to get started with Graphics Server .NET

Knowledge Base Article: GSKB297
New to Graphics Server .NET? Read this article for step by step information on how to get started, how to find the property pages and how to access samples in the Resource Center.

About Us Contact Privacy Sitemap