I using ZingChart to do gauge chart. The chart only display first and last section only. Two section missing in between. I have 5 values, but I want to display for 4 value only. So, I created 4 rules for ring(arr_ringrules) and plot(arr_plotrules) and pass the rules arrays to object. But, only first and last section display in colour defined in rules.
$(document).ready(function() {
window.feed = function(callback) {
var tick = {};
tick.plot0 = Math.ceil(350 + (Math.random() * 500));
callback(JSON.stringify(tick));
};
d = [150, 200, 250, 300, 400];
let sum = d.reduce(function(a, b) {
return a + b;
}, 0);
perc_array = [];
perc_rulescolor = []
colour_array = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522"];
perc = '';
for (i = 0; i < d.length; i++) {
perc = parseInt((d[i] / sum) * 100);
perc_array.push(perc);
if (typeof colour_array[i] === 'undefined') {
} else {
if (i == 0) {
obj_color = {
rule: "%v < " + perc + " && %v >= 0",
'backgroundColor': colour_array[i]
};
} else {
prev_array_val = perc_array[(i - 1)];
console.log(prev_array_val + '=>' + perc);
obj_color = {
rule: "%v < " + perc + " && %v >= " + prev_array_val,
'backgroundColor': colour_array[i]
}
}
perc_rulescolor.push(obj_color);
}
}
arr_ringrules = [{
rule: '%v >= 0 && %v < 11.54',
backgroundColor: '#0cf311'
},
{
rule: '%v >= 11.54 && %v < 15.38',
backgroundColor: '#eaf50a'
},
{
rule: '%v >= 15.38 && %v < 19.23',
backgroundColor: '#db7b24'
},
{
rule: '%v >= 19.23 && %v < 23.08',
backgroundColor: '#ff0000'
}
];
arr_plotrules = [{
rule: '%v >= 0 && %v < 11.54',
text: '%v<br>EXCELLENT'
},
{
rule: '%v >= 11.54 && %v < 15.38',
text: '%v<br>Good'
},
{
rule: '%v >= 15.38 && %v < 19.23',
text: '%v<br>Fair'
},
{
rule: '%v >= 19.23 && %v < 23.08',
text: '%v<br>Bad'
}
];
var myConfig = {
type: "gauge",
globals: {
fontSize: 25
},
plotarea: {
marginTop: 80
},
plot: {
size: '100%',
valueBox: {
placement: 'center',
text: '%v', //default
fontSize: 35,
rules: arr_plotrules
}
},
tooltip: {
borderRadius: 5
},
scaleR: {
aperture: 180,
values: "0:100:20",
center: {
visible: false
},
tick: {
visible: false
},
item: {
offsetR: 0,
rules: [{
rule: '%i == 9',
offsetX: 15
}]
},
labels: ['0', '20', '40', '60', '80', '100'],
ring: {
size: 100,
rules: arr_ringrules
}
},
series: [{
values: [80], // starting value
backgroundColor: 'black',
indicator: [10, 10, 10, 10, 0.75],
animation: {
effect: 2,
method: 1,
sequence: 4,
speed: 900
},
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 500,
width: '100%'
});
})html,
body {
height: 100%;
width: 100%;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
.zc-ref {
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>
</html>Label R value:-
start angle:end angle:scale
I have change this to 0:180:1
Scale R label- to display scale around the gauge chart
I have change to
['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110', '120', '130', '140', '150', '160', '170', '180'].
Next, I calculate cumulative percentage value and cumulative degree from 180 and store in array while looping. I have used the cumulative degree to create the array object for ringrules,arr_ringrules_custom and plotrules,arr_plotrules_custom.
For my requirement , I want to display color section until section that have value 300. I have created colour_array contain four colours which I want set to display first four value from data array,d.
data array,d = [150, 200, 250, 300, 400];-contain 5 items
colour_array = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522"];-contain 4 items
I do validation on colour_array[index] show undefined inside data array loop in order to avoid creating object for arr_ringrules_custom for last items on data. In else statement of this validation, I have created four objects and insert to arr_ringrules_custom in loop.
For arr_plotrules_custom, I have created 1 objects. The object created in if statement of validating colour_array[index] show undefined. It show undefined in last loop because colour_array[4] not exist.
obj_text = {
rule: '%v >= ' + prev_array_val,
'text': perc_array[(i - 1)] + '%'
}
I have use rule >= prev_array_val, angle for value 300 in order to show the label at center of chart. Since I want to show the percentage value , have stated perc_array[(i - 1)] + '%'.
$(document).ready(function() {
window.feed = function(callback) {
var tick = {};
tick.plot0 = Math.ceil(350 + (Math.random() * 500));
callback(JSON.stringify(tick));
};
d = [150, 200, 250, 300, 400];
let sum = d.reduce(function(a, b) {
return a + b;
}, 0);
perc_array = [];
degree_array = [];
arr_ringrules_custom = [];
arr_plotrules_custom = [];
colour_array = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522"];
//calculate percentage
var perc = 0;
var degree = 0;
for (i = 0; i < d.length; i++) {
perc += parseFloat((d[i] / sum * 100).toFixed(2));
perc_array.push(perc);
degree += parseFloat(((d[i] / sum) * 180).toFixed(2)); //calculating degree
degree_array.push(degree);
if (typeof colour_array[i] === 'undefined') {
prev_array_val = parseFloat(degree_array[(i - 1)]).toFixed(2);
obj_text = {
rule: '%v >= ' + prev_array_val,
'text': perc_array[(i - 1)] + '%'
}
arr_plotrules_custom.push(obj_text);
} else {
if (i == 0) {
obj_color = {
rule: '%v >= 0 && %v < ' + degree,
'backgroundColor': colour_array[i]
};
} else {
prev_array_val = parseFloat(degree_array[(i - 1)]).toFixed(2);
obj_color = {
rule: '%v >= ' + prev_array_val + ' && %v < ' + degree,
'backgroundColor': colour_array[i]
}
}
arr_ringrules_custom.push(obj_color);
}
}
console.log(arr_plotrules_custom);
end_mark = parseFloat(degree_array[(colour_array.length - 1)].toFixed(2));
var myConfig = {
type: "gauge",
globals: {
fontSize: 25
},
plotarea: {
marginTop: 80
},
plot: {
size: '100%',
valueBox: {
placement: 'center',
text: '%v', //default
fontSize: 35,
rules: arr_plotrules_custom
}
},
tooltip: {
borderRadius: 5
},
scaleR: {
aperture: 180,
values: "0:180:1",
center: {
visible: false
},
tick: {
visible: false
},
item: {
offsetR: 0,
rules: [{
rule: '%i == 9',
offsetX: 15
}]
},
labels: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110', '120', '130', '140', '150', '160', '170', '180'],
ring: {
size: 100,
rules: arr_ringrules_custom
}
},
series: [{
values: [end_mark], // starting value
backgroundColor: 'black',
indicator: [10, 10, 10, 10, 0.75],
animation: {
effect: 2,
method: 1,
sequence: 4,
speed: 900
},
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 500,
width: '100%'
});
})html,
body {
height: 100%;
width: 100%;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
.zc-ref {
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="jQuery/jquery-3.4.1.min.js"></script>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>
</html>