To define styling for the entire site using JavaScript (JS) code, follow these steps:
arcapi.settings
, arcapi.getSettings
,
arcapi.sendParameters
, arcapi.getParameters
, and so
on.Under Name, enter Pie Chart Labels
.
Under Description, enter Specifying labels and values in the legend.
Under the JavaScript tab, add the following code to change the name of one the labels and add values after the label name.
return function() {
var f = function() {};
f.version = "1";
f.settings = function() {
return [
{
id: 'Square Size',
defaultValue: '10',
},
];
};
f.beforeDraw = function() {
var rows = arcapi.dataResult().rows();
rows.map(function (r) {
if (r[0].toLowerCase() === 'other') {
r[0] = 'Not Applicable';
}
});
arcapi.dataResult().rows(rows);
};
f.afterDraw = function() {
var rows = arcapi.dataResult().rows();
var length = $('#' + arcapi.chartId() + ' .viz-base-legend-g').children('text').length;
var total = d3.sum(rows, function(row) { return +row[1]; });
var legendlabel;
var fmt = d3.format(",");
rows.forEach(function(d, i) {
for (var c=0; c < length; c++ ){
legendlabel = $('#' + arcapi.chartId() + ' .viz-base-legend-g text')[c].innerHTML;
if(legendlabel == d[0]){
$('#' + arcapi.chartId() + ' .viz-base-legend-g text')[c].innerHTML = legendlabel + ' (' + fmt(+d[1]) + ')';
}
}
});
};
return f;
}();
The following image shows the pie chart before applying the JavaScript code. The legend in the pie chart displays label names without values. Also, one of the labels is named Other.
The following image shows the pie chart after applying the JavaScript code. The legend in the pie chart now displays the values in the legend. Also, the second legend label name is renamed from Others to Not Applicable.
Note that the Custom Styles interface keeps track of all visuals that use each defined style.
Here, you can see that the Custom Styles interface lists the new style, Pie Chart Labels, and that it applies to visualization with ID 6700. Note also that this ID is an active link to the visualization.