Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

The angular gauge in the FusionCharts Suite XT suite can also act as an input control, allowing users to visually drag and change the value of the dial. Once the value is updated, it can be retrieved by the gauge using the FusionCharts’ events.

In this section, you will be shown how you can:

  • Convert a normal gauge to an editable one

Converting a Normal Gauge to an Editable Gauge

A normal angular gauge can be converted to an editable gauge by converting all its dials to editable ones or just specific ones.

An angular gauge with two dials converted to an editable gauge with both dials editable looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Estimated purchase conversion rate", "subcaption": "food.hsm.com vs cloth.hsm.com", "editMode": "1", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "theme": "fint", "gaugeFillMix": "{dark-30},{light-60},{dark-10}", "gaugeFillRatio": "15", "chartBottomMargin": "25", "valueFontSize": "18", "valueFontColor": "#ffffff" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "70", "showValue": "1", "valueX": "250", "valueY": "240", "bgColor": "#0075c2", "tooltext": "food.hs.com : $value", "rearExtension": "15" }, { "value": "50", "showValue": "1", "valueX": "150", "valueY": "240", "bgColor": "#1aaf5d", "tooltext": "cloth.hsm.com : $value", "rearExtension": "15" } ] }, "annotations": { "origw": "400", "origh": "300", "autoscale": "1", "groups": [ { "id": "valueBG", "items": [ { "id": "food-val-bg", "type": "rectangle", "x": "220", "y": "275", "tox": "290", "toy": "300", "fillcolor": "#0075c2" }, { "id": "cloth-val-bg", "type": "rectangle", "x": "120", "y": "275", "tox": "190", "toy": "300", "fillcolor": "#1aaf5d" } ] } ] } }
{
    "chart": {
        "caption": "Estimated purchase conversion rate",
        "subcaption": "food.hsm.com vs cloth.hsm.com",
        "editMode": "1",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "theme": "fint",
        "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
        "gaugeFillRatio": "15",
        "chartBottomMargin": "25",
        "valueFontSize": "18",
        "valueFontColor": "#ffffff"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "70",
                "showValue": "1",
                "valueX": "250",
                "valueY": "240",
                "bgColor": "#0075c2",
                "tooltext": "food.hs.com : $value",
                "rearExtension": "15"
            },
            {
                "value": "50",
                "showValue": "1",
                "valueX": "150",
                "valueY": "240",
                "bgColor": "#1aaf5d",
                "tooltext": "cloth.hsm.com : $value",
                "rearExtension": "15"
            }
        ]
    },
    "annotations": {
        "origw": "400",
        "origh": "300",
        "autoscale": "1",
        "groups": [
            {
                "id": "valueBG",
                "items": [
                    {
                        "id": "food-val-bg",
                        "type": "rectangle",
                        "x": "220",
                        "y": "275",
                        "tox": "290",
                        "toy": "300",
                        "fillcolor": "#0075c2"
                    },
                    {
                        "id": "cloth-val-bg",
                        "type": "rectangle",
                        "x": "120",
                        "y": "275",
                        "tox": "190",
                        "toy": "300",
                        "fillcolor": "#1aaf5d"
                    }
                ]
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Estimated purchase conversion rate",
            "subcaption": "food.hsm.com vs cloth.hsm.com",
            "editMode": "1",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "theme": "fint",
            "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
            "gaugeFillRatio": "15",
            "chartBottomMargin": "25",
            "valueFontSize": "18",
            "valueFontColor": "#ffffff"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "70",
                "showValue": "1",
                "valueX": "250",
                "valueY": "240",
                "bgColor": "#0075c2",
                "tooltext": "food.hs.com : $value",
                "rearExtension": "15"
            }, {
                "value": "50",
                "showValue": "1",
                "valueX": "150",
                "valueY": "240",
                "bgColor": "#1aaf5d",
                "tooltext": "cloth.hsm.com : $value",
                "rearExtension": "15"
            }]
        },
        "annotations": {
            "origw": "400",
            "origh": "300",
            "autoscale": "1",

            "groups": [{
                "id": "valueBG",
                "items": [{
                    "id": "food-val-bg",
                    "type": "rectangle",
                    "x": "220",
                    "y": "275",
                    "tox": "290",
                    "toy": "300",
                    "fillcolor": "#0075c2"
                }, {
                    "id": "cloth-val-bg",
                    "type": "rectangle",
                    "x": "120",
                    "y": "275",
                    "tox": "190",
                    "toy": "300",
                    "fillcolor": "#1aaf5d"
                }]
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

An angular gauge with only one dial editable looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Average Customer Satisfaction Score", "subcaption": "Actual vs Expected", "lowerLimit": "0", "upperLimit": "100", "theme": "fint", "gaugeFillMix": "{dark-30},{light-60},{dark-10}", "gaugeFillRatio": "15", "chartBottomMargin": "25", "valueFontSize": "18", "valueFontColor": "#ffffff" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "editMode": "1", "value": "85", "showValue": "1", "valueX": "250", "valueY": "240", "bgColor": "#0075c2", "tooltext": "Expected : $value", "rearExtension": "15" }, { "value": "68", "showValue": "1", "valueX": "150", "valueY": "240", "bgColor": "#1aaf5d", "tooltext": "Actual : $value", "rearExtension": "15" } ] }, "annotations": { "origw": "400", "origh": "300", "autoscale": "1", "groups": [ { "id": "valueBG", "items": [ { "id": "food-val-bg", "type": "rectangle", "x": "220", "y": "275", "tox": "290", "toy": "300", "fillcolor": "#0075c2" }, { "id": "cloth-val-bg", "type": "rectangle", "x": "120", "y": "275", "tox": "190", "toy": "300", "fillcolor": "#1aaf5d" } ] } ] } }
{
    "chart": {
        "caption": "Average Customer Satisfaction Score",
        "subcaption": "Actual vs Expected",
        "lowerLimit": "0",
        "upperLimit": "100",
        "theme": "fint",
        "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
        "gaugeFillRatio": "15",
        "chartBottomMargin": "25",
        "valueFontSize": "18",
        "valueFontColor": "#ffffff"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "editMode": "1",
                "value": "85",
                "showValue": "1",
                "valueX": "250",
                "valueY": "240",
                "bgColor": "#0075c2",
                "tooltext": "Expected : $value",
                "rearExtension": "15"
            },
            {
                "value": "68",
                "showValue": "1",
                "valueX": "150",
                "valueY": "240",
                "bgColor": "#1aaf5d",
                "tooltext": "Actual : $value",
                "rearExtension": "15"
            }
        ]
    },
    "annotations": {
        "origw": "400",
        "origh": "300",
        "autoscale": "1",
        "groups": [
            {
                "id": "valueBG",
                "items": [
                    {
                        "id": "food-val-bg",
                        "type": "rectangle",
                        "x": "220",
                        "y": "275",
                        "tox": "290",
                        "toy": "300",
                        "fillcolor": "#0075c2"
                    },
                    {
                        "id": "cloth-val-bg",
                        "type": "rectangle",
                        "x": "120",
                        "y": "275",
                        "tox": "190",
                        "toy": "300",
                        "fillcolor": "#1aaf5d"
                    }
                ]
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Average Customer Satisfaction Score",
            "subcaption": "Actual vs Expected",
            "lowerLimit": "0",
            "upperLimit": "100",
            "theme": "fint",
            "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
            "gaugeFillRatio": "15",
            "chartBottomMargin": "25",
            "valueFontSize": "18",
            "valueFontColor": "#ffffff"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "editMode": "1",
                "value": "85",
                "showValue": "1",
                "valueX": "250",
                "valueY": "240",
                "bgColor": "#0075c2",
                "tooltext": "Expected : $value",
                "rearExtension": "15"
            }, {
                "value": "68",
                "showValue": "1",
                "valueX": "150",
                "valueY": "240",
                "bgColor": "#1aaf5d",
                "tooltext": "Actual : $value",
                "rearExtension": "15"
            }]
        },
        "annotations": {
            "origw": "400",
            "origh": "300",
            "autoscale": "1",
            "groups": [{
                "id": "valueBG",
                "items": [{
                    "id": "food-val-bg",
                    "type": "rectangle",
                    "x": "220",
                    "y": "275",
                    "tox": "290",
                    "toy": "300",
                    "fillcolor": "#0075c2"
                }, {
                    "id": "cloth-val-bg",
                    "type": "rectangle",
                    "x": "120",
                    "y": "275",
                    "tox": "190",
                    "toy": "300",
                    "fillcolor": "#1aaf5d"
                }]
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attribute used to convert a normal gauge to an editable gauge:

Attribute Name Description

editMode

It is used to specify whether the gauge will be rendered as editable. Setting this attribute to 1 will render an editable gauge, setting it to 0 (default) will render a normal gauge. If a gauge has multiple dials and all have them have to be made editable, the editMode attribute is defined for the chart object. If a gauge has multiple dials and only specific dials have to be made editable, the editMode attribute is defined as a part of the dial object, which belongs to the dials object.

Method used to Create Editable Gauges in the Previous Versions

For users who have been using the previous versions, you this a brief recap of how to create an editable gauge.

Once the user has changed the value of the gauge, the gauge automatically calls the FC_ChartUpdated(DOMId) JavaScript function.

You will need to define this method in your HTML page and then write the JavaScript code to retrieve the data using getData(index) or getDataForId(id) method as shown below:

To look at the HTML + JavaScript code required to retrieve data from the dial when a user changes the value, click here.

There! You have now seen how you can create editable gauges from normal ones.

Top