Dial Chart

Unknown macro: {scrollbar}

Dial Chart

The dial chart plots a single value on gauge-type image, similar to an odometer. The value needle that represents the value positions itself between the maximum and minimum values for the dial, as specified in the dataset.

Dataset Guidelines

The dial chart expects one row of data with three columns. The value to plot is in the first numeric column. The second column value is the minimum value on the dial, and the third column value is the maximum value on the dial.

Note: the charting component will attempt to convert dial chart values to a numeric value. Acceptable values are locale-specific numeric or currency values, e.g. "1,500", "1.500" or "$1,500". Dial charts are the only type of charts that accept formatted numeric values at this time.

here is a sample dial dataset:

DIAL_VALUE	DIAL_MIN	DIAL_MAX
57.0	0	100

Required Properties

The only property a dial chart requires is the appropriate chart-type.

<chart-type>DialChart</chart-type>

The optional chart properties that are supported for this chart are listed in the Chart Properties Reference.

Example

The following chart definition will produce the chart you see below:

<chart>
	<chart-type>DialChart</chart-type>
	<units></units>
	<!--  this is the color of the needle -->
	<needle-color>#000080</needle-color>
	<!--  this is the background for the whole image -->
	<!-- chart-background type="color">#ffffff</chart-background> -->
	<chart-background type="gradient">
		<x1>0.0</x1>
		<y1>0.0</y1>
		<color1>#dddddd</color1>
		<x2>100.0</x2>
		<y2>100.0</y2>
		<color2>#FFFFFF</color2>
		<cyclic>true</cyclic>
	</chart-background>
	<!--  this ia the background for the dial -->
	<plot-background type="gradient">
		<color1>#000000</color1>
		<color2>#FFFFFF</color2>
		<cyclic>true</cyclic>
	</plot-background>
	<!--  intervals define ranges on the dial that are colored differently from the dial background -->
	<intervals>
		<interval>
			<label>low</label>
			<!-- this is the value that the range starts at -->
			<minimum>0</minimum>
			<!-- this is the value that the range stops at -->
			<maximum>30</maximum>
			<!--  this is the color of the range -->
			<!-- color>#ff8080</color -->
			<interval-background type="gradient">
				<x1>50</x1>
				<y1>50</y1>
				<x2>150</x2>
				<y2>150</y2>
				<color1>#ffffff</color1>
				<color2>#ff0000</color2>
				<cyclic>true</cyclic>
			</interval-background>

			<!--  this is the color of the text for the range value and tick marks -->
			<text-color>#0000bb</text-color>
		</interval>
		<interval>
			<label>medium</label>
			<minimum>30</minimum>
			<maximum>70</maximum>
			<!-- color>#ffff80</color -->
			<text-color>#0000bb</text-color>
			<interval-background type="gradient">
				<x1>50</x1>
				<y1>50</y1>
				<x2>150</x2>
				<y2>150</y2>
				<color1>#ffffff</color1>
				<color2>#ffff00</color2>
				<cyclic>true</cyclic>
			</interval-background>
		</interval>
		<interval>
			<label>high</label>
			<minimum>70</minimum>
			<maximum>100</maximum>
			<text-color>#0000bb</text-color>
			<interval-background type="gradient">
				<x1>50</x1>
				<y1>50</y1>
				<x2>150</x2>
				<y2>150</y2>
				<color1>#ffffff</color1>
				<color2>#40FF40</color2>
				<cyclic>true</cyclic>
			</interval-background>
		</interval>
	</intervals>
</chart>