Blub Formating

[JamesB2]

Is there a way to format a blub gauge and have the caption to the left side and the bulb to the right side?  It seems the only option is the have the caption on the top and the bulb below that.

Exmple:

Temperate:  BLUB #

[Akash Biswas]

Hi James,

 

The caption of a Bulb Gauge could be configured to be displayed on the top or at the bottom of the gauge, it is not supported to display them by the sides of the bulb gauge. Though you can horizontally align the caption. Please check the attribute list in the below link for the supported caption cosmetics configuration attributes :

https://www.fusioncharts.com/dev/chart-attributes/bulb

 

Thanks,

Akash.

[JamesB2]

Akash, Thank you for the documentation.  That page is really well formatted and very helpful.  A+

Is there a way to get an enhancement request in to allow for what I'm asking?

[Akash Biswas]

Hi James,

 

You can try this work-around solution for your requirement to display caption on the sides of the Bulb Gauge, using Text annotations to place any custom string anywhere on the chart by specifying its "x" and "y" co-ordinates in pixels. Check this sample fiddle for reference :

http://jsfiddle.net/jxg2muv3/1/

You need to set the margin attributes accordingly to set space on the chart to position the text annotation.

To know more about Text annotations, check this documentation link : https://www.fusioncharts.com/dev/chart-guide/chart-configurations/annotations/creating-annotations/create-text-annotations

Please note : Annotations are static in nature.

 

Thanks,

Akash.

[JamesB2]

Thanks Akash,

do you have an XML example?  I've tried this and not getting the annotation to show up.  I think my <annotatoins>  and <group> are incorrect.

 

<chart
     theme="asi"
     chartLeftMargin='100'
     bgAlpha='100'
     showBorder='0'
     placeValuesInside='1'
     captionpadding="0"
     bgColor="#000000"
     lowerLimit='0'
     upperLimit='100'
     valuefontsize="20">
  <colorRange>
    <color minValue='0' maxValue='100' label='Low' code='FF0000' />
  </colorRange>
<annotations>
  <groups>
    <items type="text' text='TEST' x=0' y=0'' fontSize='24' color='#FF0000'/>
  </groups>
</annotations>
  <value>0</value>
</chart>

[JamesB2]

I got it.  I had a double quote infront of "TEXT"

[JamesB2]

Here's the results:

text to the left, number to the right.  SWEET!!!!  Here's the code that got me where I'm at.

 

<chart

     theme="asi"

     chartLeftMargin='100'

     chartTopMargin='5'

     chartRightMargin='5'

     chartBottomMargin='5'

     width='230'

     height='90'

     bgAlpha='100'

     showBorder='0'

     placeValuesInside='1'

     captionpadding="0"

     bgColor="#000000"

     lowerLimit='0'

     upperLimit='100'

     valuefontsize="20"

     chartStartX='0'

     chartCenterY='45'>

  <colorRange>

    <color minValue='0' maxValue='0' label='Low' code='00FF00' />

    <color minValue='1' maxValue='100' label='Low' code='FF0000' />

  </colorRange>

<annotations>

  <groups>

    <items type='text' text='Other' x='$chartStartX+50' y='$chartCenterY' fontSize='16' color='#FFFFFF'/>

    </groups>

</annotations>

<value>0</value>

</chart>