Axis Angles

Overview
Full Circular Gauges
Semi-Circular Gauges
Quarter Gauges

Overview

You may draw your circular gauge at any angle you want and even change its shape according to the chosen angle. The shape of your gauge depends on 3 things: start_angle and sweep_angle attributes of axis node and type attribute of frame node.

start_angle affects on a start point from which your gauge is drawn. Zero value is equal to the lowest point of the gauge and the direction of drawing is CW. Default value for start_angle is "20".

sweep_angle is the actual length of your gauge. Everything is here is obvious, this value must be positive and it doesn't have sense to make it more than 360.

Few words about type attribute of frame node. It determines whether gauge saves its shape if it has unused space. For more details see Frame type.

Full Circular Gauges

Full circular gauges are a standard type of gauges usually to imitate clock. To create a default full circular gauge it isn't obligatory to set options for angles or frame types. We just adjust some options for labels and pointers for better visual appearance and get the result:

Live Sample: Circular axis angles sample 1

Now let's create a real clock and see how skillfully you can use basic AnyChart settings:

Live Sample: Circular axis angles sample 2

The start_angle everywhere is 180, so the count is begun at the upper point of the clock, and sweep_angle is 360, so the pointers may do a full circle.

Sometimes it is also useful to manually set the values of angles to get clocks that differ from what we used to see in our everyday life. For example, here we have start_angle 90 and sweep_angle 270:

Live Sample: Circular axis angles sample 3

Note that the contain was cropped. To avoid this we must add the following string to our XML code:

XML Syntax

XML Code

    
            01
            <frame type="Circular" />

Live Sample: Circular axis angles sample 4

Semi-Circular Gauges

Now some examples of semi-circular gauges. There is nothing complex about them so we will just point out their start_angle and sweep_angle. Note also that in every case type is set to auto.

start_angle="90" sweep_angle="180

Live Sample: Circular axis angles sample 5