LED Charts are like the ones used to display CPU Usage. The values displayed in an LED chart fills up the LED box to that particular level, horizontally in the horizontal LED chart and vertically in the vertical LED chart. In this sample that we are going to build, we would be using and referring to the horizontal LED throughout. Now as a first chart, we would be building a sound meter to show the sound produced by a particular equipment on a scale on 0-120dB. The final result would look similar to the one shown below. |
![]() |
The following tasks involved in building this chart are:
With the tasks defined, now lets get to the XML side of things. |
Creating the XML |
XML for the chart |
The XML for this chart can be listed as under: |
<chart lowerLimit='0' upperLimit='120' lowerLimitDisplay='Low' upperLimitDisplay='High' palette='1' numberSuffix='dB' chartRightMargin='20' > <colorRange> <color minValue='0' maxValue='60' code='FF0000' /> <color minValue='60' maxValue='90' code='FFFF00' /> <color minValue='90' maxValue='120' code='00FF00' /> </colorRange> <value>102</value> </chart> |
Explanation |
First 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 the upperLimit attributes of the <chart> element. We've notified the chart to display lower limit text as Bad and upper limit text as Good. We also set the palette number and number suffix as dB (the character which would show up at the end of end number). |
<chart lowerLimit='0' upperLimit='120' lowerLimitDisplay='Low' upperLimitDisplay='High' palette='1' numberSuffix='dB' chartRightMargin='20' > |
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='60' code='FF0000' /> <color minValue='60' maxValue='90' code='FFFF00' /> <color minValue='90' maxValue='120' code='00FF00' /> </colorRange> |
Now that we've the color ranges in place, we need to set the value for the chart. We do this by setting: |
<value>102</value> |
Bingo!! you just made your first LED gauge. Next, we'll see how to customize the various facets of this chart. |
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. |