You are viewing documentation for an older version. For current documentation - click here.
Configurations

The linear gauge chart from FusionWidgets XT pack offers you a lot of configuration options. Here we'll learn:

Let's see each of them one by one.

Using palettes

The linear gauge offers 5 pre-defined color palettes for you to choose from. Each of these palettes is accessible by the numbers 1-5 respectively. To choose a palette, all you need to do is set: 

<chart palette='2' or '3' or ..>
{
  "chart": {
    "palette": "2" or "3" or
    ...
  }
}

Shown below are a few examples of palettes applied on our previous chart:

 
Palette 2 applied
 
 
Palette 3 applied
 
 
Palette 4 applied

Additionally, you can also define an entire new palette by setting a single theme color using:

<chart paletteThemeColor='669933' ..>
{
  "chart": {
    "palettethemecolor": "669933"
    ...    
}

This will create a new palette derived from this color and then color the chart as under:

 
Configuring pointer properties

You can configure almost all properties of the gauge's pointer at both <chart> level and individual <pointer> level. When using multiple pointers on the chart, it's better to customize at the <pointer> level.

To change the cosmetics of pointer, you can use:

<pointer value='92' borderColor='333333' borderThickness='3' borderAlpha='100' bgColor='FFFFFF'/>
"pointer": [{ 
         "value": "92"
        "bordercolor": "333333",
        "borderthickness": "3",
        "borderalpha": "100",
        "bgcolor": "FFFFFF"      
}
]

This will result in:

You can configure the radius and shape using:

<pointer value='92' radius='10' sides='4' />
"pointer": [      
    {       
        "value": "92"
        "radius": "333333",
        "sides": "4"
       }
]

This will lead to:

 
Adding tool text and link to pointer

You can add tool text and link to each pointer using:

<pointer value='92' toolText='Customer satisfaction %' link='http://www.fusioncharts.com' />
"pointer": [      
      {        
        "value": "92"
        "tooltext": "Customer satisfaction %",
        "link": "http://www.fusioncharts.com"
 
      }
]

The link will need to be in FusionCharts link format. This will result in:

 
Adding multiple pointers

To add multiple pointers, you just need to add multiple <pointer> elements within <pointers> element as under:

 
<pointers>  
  <pointer value="92" toolText="Current year"/>  
  <pointer value="79" bgColor="CCCCCC" borderColor="333333" toolText="Last year"/>
</pointers>
"pointers": {
    "pointer": [
      {
        "value": "92",
        "tooltext": "Current year"
      },
      {
        "value": "79",
        "bgcolor": "CCCCCC",
        "bordercolor": "333333",
        "tooltext": "Last year"
      }
    ]
  }

Here, we've added two pointers - one indicating current year's value and the other previous year's value. You can provide custom cosmetics for each pointer.

This chart results in:

 
Pointer value configurations

You can opt to show/hide the value for each pointer on gauge using:

<chart ... showValue='0'  ...>
{  "chart": {
   ...
    "showvalue": "0"
    ...    }

This will result in:

You can also opt to show the value above/below pointer using:

<chart ... valueAbovePointer='0' ...>
{  "chart": {
            ...    
            "valueabovepointer": "0"    
            ...   
       }
}

This will result in:

 
Pointer position

You can configure the pointer to show on top of scale or bottom using:

<chart ... pointerOnTop='0' ...>
{  "chart": {
     ...   
     "pointerontop": "0"
     ... 
   }   
}

This results in:

 
Configuring gauge gradient mix

FusionWidgets XT linear gauge allows you to configure the gradient fill mix of the gauge by specifying gradient fill formula as under:

<chart ... gaugeFillMix='{light-10},{light-20},{light-60},{dark-30},{dark-40}, {dark-40}'   gaugeFillRatio='' ...>
{
  "chart": {
   ...    
    "gaugefillmix": "{light-10},{light-20},{light-60},{dark-30},{dark-40}, {dark-40}"
    "gaugefillratio": ""   
   ...       
    }
}

Here, we've specified the fill mix as gradient formula (explained in section Advanced charting > Using Gradients) and set the gaugeFillRatio attribute as empty (so as to instruct chart to automatically distribute the gradient color constituents). The color sequence starts applying from the bottom part to top part i.e., first color specified will be applied to the bottom side and then move out towards top side.

The gauge will look as under:

Another example:

<chart ... gaugeFillMix='{dark-10},FFFFFF,{dark-10}' gaugeFillRatio='3' ..>
{  "chart": {
      ...    
      "gaugefillmix": "{dark-10},FFFFFF,{dark-10}"
      "gaugefillratio": "3"   
      ...    
    }
)

It results in:

Another example:

<chart ... gaugeFillMix='{light-10},{light-30},{light-20},{dark-5},{color},{light-30},{light-20},{dark-10}' gaugeFillRatio='' ..>
{  "chart": {
      ...
      "gaugefillmix": "{light-10},{light-30},{light-20},{dark-5},{color},{light-30},{light-20},{dark-10}"
      "gaugefillratio": ""    
      ...    
    }
}

Resulting in:

 
Configuring gauge borders

You can configure to show/hide the gauge border. Additionally, you can configure to show the entire border in single color or a color derived from the color range fill color.

To hide the gauge border, you can set: 

<chart ... showGaugeBorder='0' ...>
{  "chart": {
      ...   
      "showgaugeborder": "0"    
      ...    
   }
}

This will result in (we've removed the shadow from this gauge to make the hidden border's effect more pronounced):

To set a single color as the border for entire gauge, you can set:

<chart ... showGaugeBorder='1' gaugeBorderColor='666666' gaugeBorderThickness='1' gaugeBorderAlpha='100' ...>
{  "chart": {
      ...   
      "showgaugeborder": "1"
      "gaugebordercolor": "666666"
      "gaugeborderthickness": "1"
      "gaugeborderalpha": "100"    
      ...    
   }
}

This will result in:

Or, you can also ask the chart to color each color scale's border in a derivative of its fill color using:

<chart ... gaugeBorderColor='{dark-30}' ...>
{
  "chart": {
   ...
    "gaugebordercolor": "(dark-30)"
    ...    
}

Here, we've used one token of the gradient fill mix to color each color range using 30% darker color than its fill color. It will result in:

As you can see above, each color range now bears a border color, which is 30% darker than its fill color.

Or, if you want a 60% lighter fill shade, you could set: 

<chart ... gaugeBorderColor='{light-60}' ...>
{  "chart": {
    ...
    "gaugebordercolor": "(light-60)"
    ...    
  }
}

You can also set the border property for each color range individually by setting:

<color minValue='0' maxValue='75' code='FF654F' borderColor='FF0000' borderAlpha='100'/>
{  "chart": {
    "minvalue": "0"
    "maxvalue": "75"
    "code": "FF654F"
    "bordercolor": "FF0000"
    "borderalpha": "100"
  }
}

This will result in:

 
Creating rounded gauge corners

You can create gauges with rounded corners using:

<chart ... gaugeRoundRadius='10' ..>
{  "chart": {
   ...
    "gaugeroundradius": "10"    
  ...    
   }
}

This will result in:

 
Hiding gauge labels

You can opt not to show gauge labels in two ways:

  1. Do not provide the label attribute for each <color> element.
  2. Or, set <chart showGaugeLabels='0' ..>

This will result in:

 
Configuring gauge labels
 
You can use Styles to configure the font/effect for gauge labels. Shown below is an XML example:
  
<styles>
  <definition>
    <style type="font" name="labelFont" bgColor="FFFFFF" borderColor="999999"/>
  </definition>
  <application>
    <apply toObject="GAUGELABELS" styles="labelFont,myShadow"/>
  </application>
</styles>
"styles": {
    "definition": [
      {
        "type": "font",
        "name": "labelFont",
        "bgcolor": "FFFFFF",
        "bordercolor": "999999"
      }
    ],
    "application": [
      {
        "toobject": "GAUGELABELS",
        "styles": "labelFont,myShadow"
      }
    ]
  }

This will result in: