Annotation on Angular Gauge getting cutoff

[jrf]

I am trying to place a label on the left side of the gauge that is centered vertically. The vertical centering is not working and the label is also getting cutoff.

 

Here is the JSFiddle that shows the issue:

 

http://jsfiddle.net/XhdN4/35/

 

 

[Nabajeet]

We have replicated your problem on our side, as of now you should try setting the y co-ordinate statically.

 

http://jsfiddle.net/nabajeet_fusioncharts/apffc1y3/

 

We shall get  back to you with a solution as soon as possible.

[Nabajeet]

Hi,

 

Thank you for your patience.

 

Could you please upgrade your current version to the latest, i.e, FusionCharts Suite v3.6.0, that will resolve your reported issue of vertical centering of annotation texts.

 

You can check out this fiddle:

http://jsfiddle.net/XhdN4/35/

 

You can check with the version history from here: http://www.fusioncharts.com/version-history/

 

Also, we have released updated plugins, wrappers and export handlers which can be checked from here: http://www.fusioncharts.com/extensions/

 

To avail this licensed release, you would need to re-Download the entire package from the My Orders section of FusionCharts Product Update Center.
PUC URL: www.fusioncharts.com/puc/

 

To download the Evaluation version of FusionCharts Suite XT v3.6.0, please visit the link: http://www.fusioncharts.com/download/

[safadig]

I am having problem with the Text Annotations  shifting right vs the gauge when the chart is rotated on device from portrait to landscape. I am running 3.6.0

 

Thanks for the help..

 

var gauge = {

    "type": "angulargauge",

    "renderAt": "container",

    "width": '100%',

    "height": 195,

    "dataFormat": "json",

    "dataSource": {

        "chart": {

            "id": 'myChartId',

            "exportEnabled": "0",

            "manageResize": "1",

            "bgColor": "#ffffff",

            "bgAlpha": "0",

            "outCnvbaseFontSize": "18",

            "outCnvbaseFontColor": "074A09",

            "upperLimit": "130",

            "lowerLimit": "0",

            "showLimits": "0",

            "lowerLimitDisplay": "",

            "upperLimitDisplay": "",

            "gaugeStartAngle": "180",

            "gaugeEndAngle": "0",

            //"bgImage": "Ragweed.jpg",

            "bgImageAlpha": "55",

            "bgImageDisplayMode": "fit",

            "gaugeFillMix": "{light-10},{light-20},{light-60},{dark-30},{dark-40}, {dark-40}",

            "gaugefillpattern": "linear",

            "gaugeBorderColor": "{dark-30}",

            "gaugeOuterRadius": "75",

            "gaugeInnerRadius": "50",

            "pivotRadius": "10",

            "showValue": "0",

            "tickValueStep": "5",

            "placeValuesInside": "1",

            "borderAlpha": "0",

            "canvasBorderAlpha": "0"

        },

        "colorRange": {

            "color": [{

                "minValue": "0",

                "maxValue": "15",

                "code": "#96C900"

            }, {

                "minValue": "15",

                "maxValue": "65",

                "code": "#FFFB14"

            }, {

                "minValue": "65",

                "maxValue": "130",

                "code": "#C90000"

            }]

        },

        "dials": {

            "dial": [{

                "value": "0",

                "tooltext": "Latest count",

                "rearExtension": "15",

                "radius": "66",

                "baseWidth": "12",

                "topWidth": "3",

                "bgColor": "210B02"

            }]

        },

        "annotations": {

            "groups": [{

                "id": "Grp1",

                "x": "160",

                "y": "172",

                "autoscale": "1",

                "scaleText":"1",

                "showBelow": "1",

                "alpha": "50",

                "items": [

                /*

                {

                    "type": "arc",

                    "startAngle": "0",

                    "endAngle": "180",

                    "Alpha": "100",

                    "Color": "678000,FCEF27,E00000",

                    "fillpattern": "linear",

                    "fillratio": "25,35,40",

                    "showborder": "0",

                    "radius": "51",

                    "innerradius": "47"

                }*/

               ]

            }, {

                "id": "Grp2",

                "items": [{

                    "type": "text",

                    "label": "LOW",

                    "font": "Verdana",

                    "scaleText":"1",

                    "x": "55",

                    "y": "105",

                    "align": "left",

                    "vAlign": "left",

                    "fontcolor": "01701D",

                    "fontSize": "14",

                    "isBold": "1"

                }]

            }, {

                "id": "Grp3",

                "items": [{

                    "type": "text",

                    "label": "HIGH",

                    "font": "Verdana",

                    "scaleText":"1",

                    "x": "216",

                    "y": "105",

                    "align": "left",

                    "vAlign": "left",

                    "fontcolor": "FF0000",

                    "fontSize": "14",

                    "isBold": "1"

                }]

            }]

        }

    }

};

[Nabajeet]

Hi,

 

Please use macros to position the annotations, then the placement will be similar in all environments.

 

Please check this fiddle:

http://jsfiddle.net/nabajeet_fusioncharts/a2389zyv/

 

Also you can check out macros here:

http://docs.fusioncharts.com/tutorial-advanced-charting-annotations-dynamically-positioning-annotations-using-macros.html