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: | ||||||||||||||||||||||||||||||||||||||||||||||||||||
|