| Using Styles | ||||||||||||||||||||||||||||||||||||||||||||||||||||
|
The angular gauge can effectively use Styles feature to apply animation, effects and font styling to each and every object on the chart. |
||||||||||||||||||||||||||||||||||||||||||||||||||||
| An example | ||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Shown below is a simple example where we've applied font style to limit and value textboxes and shadow style to tick values: |
||||||||||||||||||||||||||||||||||||||||||||||||||||
<chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="Bad" upperLimitDisplay="Good" gaugeStartAngle="180" gaugeEndAngle="0" palette="1" numberSuffix="%" tickValueDistance="20" showValue="1"> {
"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"
},
{
"minvalue": "75",
"maxvalue": "90",
"code": "F6BD0F"
},
{
"minvalue": "90",
"maxvalue": "100",
"code": "8BBA00"
}
]
},
"dials": {
"dial": [
{
"value": "92",
"rearextension": "10"
}
]
},
"styles": {
"definition": [
{
"type": "font",
"name": "myValueFont",
"bgcolor": "F1f1f1",
"bordercolor": "999999"
},
{
"type": "font",
"name": "limitsFont",
"bold": "1",
"bgcolor": "F1f1f1",
"bordercolor": "999999"
},
{
"type": "shadow",
"name": "myShadow"
}
],
"application": [
{
"toobject": "Value",
"styles": "myValueFont"
},
{
"toobject": "Limitvalues",
"styles": "limitsFont"
},
{
"toobject": "tickvalues",
"styles": "myShadow"
}
]
}
} |
||||||||||||||||||||||||||||||||||||||||||||||||||||
| This results in: | ||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||
| This was just a basic example. You can create complex animation patterns or apply effects to all chart objects as per your wish. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
| Chart Objects | ||||||||||||||||||||||||||||||||||||||||||||||||||||
| You can apply shadow, glow, blur, bevel effects, font styles and animation to the following objects in angular gauge: | ||||||||||||||||||||||||||||||||||||||||||||||||||||
|