Custom Objects

We will go through a quick step-by-step tutorial on how to create two common custom objects – a border around an instrument and text.

Using the bulb instrumentation, our result will look like the following at the end of the tutorial:

Without the use of custom objects, our instrumentation would simply be the bulb alone without the border and text.

See Figure 1

:

The process of adding a border and text is fairly straightforward, but it will not initially look like the result, and you may run into some formatting problems. Let’s begin by adding the border object. Add the code below to your WOWFusion Charts properties somewhere between the <chart …> and </chart> tags:

The objectGroup property is what “groups” the objects together. While you can have separate object groups for the rectangle border and for the text (which will be added soon), it’s cleaner to group them together. The xPos and yPos are where this group starts, 5 pixels down from the top of the chart, and 5 pixels to the right from the left edge of the chart (and in our case, the location of the chart is at the top left corner of the browser window). In the object tag, where you will specify that you want a rectangle, the xPos and yPos is where you want the rectangle to begin relative to where the object group is positioned. This means the top-left corner of the rectangle is also where the object group starts. ThetoXPos and toYPos is where we want the rectangle to be drawn to. Set 300 pixels to both, and since they both originate at 0, our rectangle will first appear as a square:

Unfortunately, the bottom of the square got cutoff since the toYPos was set to a dimension outside of the chart’s dimensions (set to a height of only 250 in the height property). Now, set the toYPos down to 200, and the square will completely appear (you can also increase the size of the actual chart).

To make our border have rounded corners, use the radius property, which sets the radius of the corners. Set it to 15; a higher number makes the corners more and more rounded.

See Figure 2

:

Finally, let’s add the “Total Inventory” text to our gauge. Add another object in the object group by adding to following code within the same object group as the rectangle:

Again, the xPos and yPos sets the starting point of the text, relative to where its object group is. After adding the properties, here’s how the gauge now looks:

The text extends past the edge of our rectangle border, but can be easily fixed by either repositioning the text to start closer to the bulb (decreasing its xPos property), or by increasing the rectangle’s toXPos property. Also, don’t forget to insure that the chart’s width is large enough to accommodate any increase in the rectangle’s width. In our example, the toXPos is increased to 500. Finally, a few extra properties are added to alter the text, such as changing the font and font size, making it bold, etc. Thus, our gauge should look like the result instrumentation at the beginning of this tutorial.

The complete properties code for the final bulb gauge:

Using this tutorial to create these two custom objects provides a solid foundation on creating simple custom objects in general. Just like our charts and instruments, much more advanced and complicated custom objects can be created by adding and altering the numerous properties of each objects, or by combining various objects within the same or different object groups.