Creating Editable Linear Gauge
The linear gauge in FusionCharts Suite XT can act as an input control, allowing users to visually drag and change the value of pointer. Once the value is updated, it can be retrieved from the chart using client-side JavaScript events.
In this section, you will be shown how you can create an editable gauge.
Creating an Editable Gauge
An editable gauge is a normal gauge configured to process real-time updates.
A normal linear gauge converted into an editable one looks like this:
{
"chart": {
"theme": "fint",
"caption": "Target CSAT Index",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40",
"editMode": "1"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#e44a00"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#6baa01"
}
]
},
"pointers": {
"pointer": [
{
"value": "0"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
id: 'csi-linear-gauge',
width: '400',
height: '190',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Target CSAT Index",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40",
"editMode": "1"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#e44a00"
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#6baa01"
}]
},
"pointers": {
"pointer": [{
"value": "0"
}]
}
}
}
);
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 create an editable gauge:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the gauge will be rendered as editable. Setting this attribute to |
If a gauge has multiple pointers and all have them have to be made editable, the editMode attribute is defined for the chart object. If a gauge has multiple pointers and only specific ones have to be made editable, the editMode attribute is defined as a part of the pointer object, which belongs to the pointers object.
Method used to Create Editable Gauges in the Previous Versions
For users who have been using the previous versions, this a brief recap of how to create an editable gauge.
Once a 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.
To look at the HTML + JavaScript code required to retrieve data from the gauge when a user changes the value, click here.