Zingchart-gaugechart display first and last section only
Question
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>
1 answers
solution1
0 2021-12-31 09:16:36
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 create object for arr_ringrules_custom for last items on data. In else statement of this validation, I have created four objects and insert to inside data array loop in order to avoid create 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.