In this first chart, we would be plotting the value of Customer Satisfaction Survey on a scale of 0 to 100%. The final result would look similar to the one shown below. |
||||||||||||
![]() |
||||||||||||
The following tasks involved to build this chart are:
With the tasks defined, now lets get to the XML side of things. |
||||||||||||
Creating the XML |
||||||||||||
Defining the color range scale | ||||||||||||
Since we're plotting customer satisfaction index for a fictional company, let us first define the scales to measure this index. The scales in a tabular form would look similar to the one shown below. |
||||||||||||
|
||||||||||||
XML for the chart | ||||||||||||
The XML for the entire chart can be listed as under. We will be saving this XML file as Data.xml, in the same location as our MXML apllication. | ||||||||||||
<chart lowerLimit='0' upperLimit='100' lowerLimitDisplay='Bad' upperLimitDisplay='Good' gaugeStartAngle='180' gaugeEndAngle='0' palette='1' numberSuffix='%' tickValueDistance='20' showValue='1'> <colorRange> <color minValue='0' maxValue='75' code='FF654F'/> <color minValue='75' maxValue='90' code='F6BD0F'/> <color minValue='90' maxValue='100' code='8BBA00'/> </colorRange> <dials> <dial value='92' rearExtension='10'/> </dials> </chart> |
||||||||||||
Explanation | ||||||||||||
First of all comes the <chart> element, which is the starting element for any chart that you create using FusionWidgets. Now we define the lower and upper limits of the gauge scale. To define the limits, we use the lowerLimit and upperLimit attributes of the <chart> element. We want the chart to display the lower limit text as Bad and the upper limit text as Good. We also set the gauge angles, palette number, and number suffix (the character which would show up at the end of end number). |
||||||||||||
<chart lowerLimit='0' upperLimit='100' lowerLimitDisplay='Bad' upperLimitDisplay='Good' gaugeStartAngle='180' gaugeEndAngle='0' palette='1' numberSuffix='%' tickValueDistance='20' showValue='1'> | ||||||||||||
There are other attributes of the <chart> element but we won't be exploring the attributes right now. Next, we need to define the color range. As shown above, this chart has 3 color ranges. To define the color range, we use the <colorRange> element, which is an immediate child of the <chart> element. Under each <colorRange> element, we place a <color> element specifying a single color range as shown in the code below. |
||||||||||||
<colorRange> <color minValue='0' maxValue='75' code='FF654F'/> <color minValue='75' maxValue='90' code='F6BD0F'/> <color minValue='90' maxValue='100' code='8BBA00'/> </colorRange> |
||||||||||||
Now that we've the color ranges in place, we need the dials to point to the desired value (92% in our case). We create the dials using the <dials><dial ...></dials> elements, as shown below. |
||||||||||||
<dials> <dial value='92' rearExtension='10'/> </dials> |
||||||||||||
You can customize the dial's visual properties using the attributes of <dial> element. For example, to change the background color of the dial, the bgColor attribute is used. Similarly, the border color of the dial can be customized using the borderColor attribute. Thus, an <dial> element with custom visual properties would look similar to the one shown below. |
||||||||||||
<dials> <dial value='92' bgColor='FF5904' borderColor='FF0000' /> </dials> |
||||||||||||
FusionWidgets angular gauge chart allows to have multiple dials on a single chart. To have multiple dials, keep on adding <dial...> element within the <dials> tag with the required attributes. Bingo!! you just made your first angular chart. You can now create the HTML container for this page as we had earlier explained under "Creating Your First Chart > Your First Chart" section. |
||||||||||||
Building the ChartWe will assume that you already have a project open and an MXML application, where you are ready to insert your chart. Begin by switching to the
The equivalent code in <?xml version="1.0" encoding="utf-8"?> The file Data.xml is our previously created XML file. The file should be present in the same location as your MXML file. If not, you should specify the path of the file in the FCDataURL property. If you do not wish to create a separate XML data file, you can also bind the data as a string to the FCDataXML property. |