Link Search Menu Expand Document
O-FISH Docs

Create Compliance Charts - Percentage

On this page, you will make the Compliance Rate chart - shown as the percentage below:
A 26.71% figure displayed alongside a donut chart showing a boardings and violations breakdown.

  1. On the Charts Dashboard, select “Add Chart”
    How to add a new chart.

  2. Set the title to “Compliance Rate”
    Typing a chart title within the provided text box.

  3. Set the Data Source to wildaid.BoardingReports Setting the boarding reports data source from a drop-down menu.

  4. Choose a Chart type of Text: Selecting a chart type from the drop-down menu.

  5. Choose a Chart subtype of Number: Picking the number subtype to represent the data.

  6. We need to calculate the percentage of a subset of data as compared to the total amount of data, which we cannot do with a calculated field. However, we can do this with an aggregation, which we can paste into the Query field, and then select “Apply”: 
    [{$group: { _id: null, total: { $sum: 1 },
   justCompliant: { $sum: { $cond: { 
      'if': {$and: [ 
         {$ifNull: ['$inspection.summary.violations.disposition',0]}, 
         {$or: [ 
         {$in: ['Warning','$inspection.summary.violations.disposition']}, 
         {$in: ['Citation','$inspection.summary.violations.disposition']} 
      ] } ] }, 
      'then': 0, 'else': 1 
   } } }
}}, {$project: {
   percentage: { $divide: [ '$justCompliant', '$total' ] },
   inspection: 1, justCompliant: 1, total: 1
}}]

    How to apply the aggregation after pasting it into the query field.

  7. You will see your fields have changed to an ID and three numbers - justCompliant, percentage, and total:
    Sidebar menu shows the fields created by the aggregation for the data source.

  8. Drag “percentage” to the “Number” field, making sure that the aggregate is by “SUM”:
    How to ensure the aggregate percentage is calculated.

  9. The field is in decimal value:
    The result is displayed as a decimal with twelve decimal places.

  10. Select “Customize”, then percentage, then toggle Decimals and set it to 2:
    Simplifying the decimal into two decimal places.

  11. Toggle the Multiplier and set it to 100.
    Multiplying the simplified decimal by 100.

  12. Toggle the Suffix and set it to be %:
    How to clearly represent the decimal as a percentage.

    And you should see the percentage in the window. Select “Save and Close” Saving the newly created percentage.

  13. On your dashboard, mouse over the chart until you see the ellipses. Select the ellipses and select “Embed Chart”: How to access the embeded chart feature.

  14. Select the “Authenticated” section, make sure “Enabled authenticated access” is set to “ON”, and set the User Specified Filters to “date” and select the green “SAVE” button:
    Setting proper authentication access, while specifying the date data field to use to filter this embedded chart.

  15. Copy the Chart ID:
    How to get the URL to share this newly created compliance rate percentage chart.

  16. Select “Close” to close the “Embed Chart” window.

  17. Paste the Chart ID into your web application’s src/config.js file under “compliance-rate”.



Onward to the donut chart!

{ } { }


Troubleshooting - Up to main build page