JavaScript Custom Styles

To define styling for the entire site using JavaScript (JS) code, follow these steps:

1. Click the (gear) icon at the top menu to open the Site Administration menu, and select Custom Styles. See Defining Site-Wide Custom Styles.
2. In the Manage Custom Styles interface, click New Custom Style, and then select the JavaScript tab.
3. [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.

   

4. Under Name, enter Pie Chart Labels.

5. Under Description, enter Specifying labels and values in the legend.

6. 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;
   }();

   

7. Click Save.

8. 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.

   

9. 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.

   

10. 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.