Iterate through pie values using Vanilla JavaScript(JavaScript)

@shaun

We are using jQuery with D3 for iterating through legends on a custom pie or Donut charts. But I need to use just the normal JavaScript that is Vanilla JavaScript to iterate through the legends of the chart. Is it not possible to achieve this ? Consider the below code for legends along with record value

var ilen = d3.select(’#’ + arcapi.chartId() + ’ .viz-base-legend-g.small-legend’).children(‘text’).length;
var data = rows;
var legendlabel, c;

	data.forEach(function(d, i) {
		for (c=0; c < ilen; c++ ){
			legendlabel = d3.select('#' + arcapi.chartId() + ' .viz-base-legend-g.small-legend').selectAll('text')[c].innerHTML;

			if(d[0].search(legendlabel)>-1){
			  console.log("test"+legendlabel);
			   d3.select('#' + arcapi.chartId() + ' .viz-base-legend-g.small-legend').children('text')[c].innerHTML = d[0] + ' (' + d3.format(',')(d[1]) + ')';  
			}
		}
	});

But I need to use document.getElementsByClassName to iterate through the elements and final output should be like the attached image.

legend_rec_count

@Chaish any reason why you do not want to use JQuery or D3? the libraries come automatically shipped with Arcadia platform.

Either way, using basic JS you will still need to properly select the element on the page, iterate, and append the additional text.

1 Like

@shaun he main reason is being the performance which may affect the Arcadia site load time. Since you mentioned in your previous comment that libraries come automatically shipped with Arcadia Platform, it should not affect the performance of platform right ?

@Chaish correct, there are many strategies we use that help keep high level of performance. Arcadia uses cache proxy at the server side for static assets like JS libraries to load those very quickly. Also there’s static content that’s cached at the client browser side which helps.

1 Like

@shaun Thanks for the very useful info.