Recommended Posts

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 #

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Here's the results:

image.png.dcf5491bc9b5de5dfa23c2856be32321.png

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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now