Shanthi Shanthi - 12 days ago 5
Javascript Question

How to set dials to values given as input in angular gauge fusion chart

I'm using fusion chart library. In that I am using Angular Gauge chart for my report. I'm facing issue with dial which is automatically set by fusion chart library based on dial value we are passing to it.

Its splitting the min and max into 4 equal divisions and displaying. I want to overwrite it. I want to display the max value of each section given by us.

current output :

enter image description here

Expected output:

enter image description here

My code is here :

var bw1 = parseInt($('.ideal_weight_graph').data('ideal1'));//46
var bw2 = parseInt($('.ideal_weight_graph').data('ideal2'));//62
var bw = parseInt($('.ideal_weight_graph').data('weight'));//53

var bw3 = bw2 + bw1;

var fusioncharts = new FusionCharts({
type : 'angulargauge',
renderAt : 'ideal_weight_graph',
width : '400',
height : '250',
dataFormat : 'json',
dataSource : {
"chart" : {
"caption" : "Your weight for your gender and age",
"lowerLimit" : 0,
"upperLimit" : bw3,
"lowerLimitDisplay" : "Under weight",
"middleLimitDisplay" : "Normal weight",
"upperLimitDisplay" : "Over weight",
"showValue" : "1",
"valueBelowPivot" : "1",
"theme" : "fint",
showGaugeBorder : "1"
},
"colorRange" : {
"color" : [{
"minValue" : 0,
"maxValue" : bw1,
"code" : "#e44a00"
}, {
"minValue" : bw1,
"maxValue" : bw2,
"code" : "#00CC00"
}, {
"minValue" : bw2,
"maxValue" : bw3,
"code" : "#f8bd19"
}]
},
"dials" : {
"dial" : [{
"value" : bw
}]
}
}
});
fusioncharts.render();

Answer

@Shanthi You may achieve your requirement by using the 'trend points' feature of Angular Gauge of FusionCharts.

Here is a working sample for your requirement.

<!-- A simple angular gauge showing customer satisfaction index for Harry's Supermart. 

Elements :
1. Color Range (Radial scale)
2. Dials (Data Value Indicators)
3. Tick Marks & Values
4. Tooltip
5. Trend points, trend arcs & trend markers
6. Annotations

-->
<div id="chart-container">FusionCharts will render here</div>

Please let me know if you have further concerns.

Comments