To define styling for the entire site using JavaScript (JS) code, follow these steps:
Click the Gear icon at the top menu to open the Site
Administration menu, and select Custom Styles. See
Defining site-wide custom styles.
In the Manage Custom Styles interface, click New
Custom Style, and then select the JavaScript
tab.
Optional: If you enable the Autocomplete on option, and then type
arc, you can choose from a list of Arcadia-specific APIs, such as
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;
}();
Click Save.
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.