Customizing the Value

After adding an API, you will see N/A right next to the name of the API you added. To display the needed data, you need to complete this step. There are two ways you can bring the data to Radar.

If you had added the data from a one-click installer, you could still customize the value. Click on the pencil icon next to the listing and select next. After that, you can continue following this guide.

There are two ways you can customize the value displayed.

1. JSON path - Pick any value from the API response and add prefix, suffix, etc.,
2. Custom JavaScript Code - Bring custom JS code to customize what you want to display.

JSON path

You can input the JSON path of the data in the API response to the primary value or secondary value textbox. If you don't know the JSON path of the data, click on the Get help link.

It will open a webpage on getradar.co, and you can copy the JSON path by clicking on the icon that appears when you mouse over the data you want.

Now, paste the copied data in the primaryValue or secondaryValue column and select Save to get the data on Radar.

Radar supports mustache templates for the JSON path values. This way, you can prefix or suffix additional string to your API data. You can also add more than one JSON path.

Let us say you want to add the $ symbol to your data on Radar and the JSON path is data.priceUsd. You can fill primary value textbox with ${{data.priceUsd}} to prefix $ to your data.

To display data from more than one JSON path, just concatenate mustache templates. For example, {{data.currency}} {{data.price}}.

Custom JavaScript Code

If the API data needs some post-processing, you can customize it using custom JavaScript code. Check 'Customize data before displaying with JavaScript'.

Now, you will see a code editor. Starting from line #11, you can add custom code. The code editor supports auto-completion. data variable contains your API response.

Your code has access to two parameters data & pastValues. You can use these params to set primaryValue and secondaryValue. pastValues is an array with the past data of the metric. It has the following structure.

pastValues format

[
  {
    "time": 1643967350
    "primaryValue": '$41,327'
    "secondaryValue": ''
  },
  .
  .
  .
]

To access the last value captured you can use pastValues[-1].

When your API response is not a JSON, you get access to an extra parameter $. It is helpful when your response is HTML. You can use this JQuery variable to assign values from the dom. Behind the scene, Radar uses Cheerio to make this work.

Let us take our Bitcoin price API as an example. What if the API data has more numbers after the decimal point? Check the GIF above to see how we fix it with custom JavaScript code.

Assign values to primaryValue or secondaryValue or both. Resolve the issues Radar report and save.

Debugging

You can call the function log.info to print logs within your code. Electron-log is used for this. Log location on your device is as below,

• Mac OS - ~/Library/Logs/radar/main.log
• Windows - %USERPROFILE%\AppData\Roaming\radar\logs\main.log
• Linux - ~/.config/radar/logs/main.log

Some examples of log function calls,

• log.info(data);
• log.info({ primaryValue, data });
• log.info(pastValues, data);