Custom JSON

How to create dashboards with data from Custom JSON

The custom JSON widgets are designed to render information from custom enterprise business software that are typically setup behind a firewall and accessed over VPN. To display widgets in Numerics either the business software itself or some form of “middleware” needs to make the required data available in JSON format according to the Numerics Widget Data Specification at an URL accessible by Numerics.

Each widget type with its data specification are listed below. Your JSON output should be precisely formatted as in the examples below. Once the JSON data is available, simply enter the entire URL to the JSON data into the path field. e.g. http://yourcompany.net/path/to/data.json.

You can optionally set the background color of a widget with a color key via the JSON. If the color key exists, it will over ride any background color chosen in the widget’s display configuration. The following color values can be used: red, blue, green, purple, orange, midnight_blue, coffee, burgundy or wintergreen.

Label from JSON data:

Following is the Widget Data Spec for a label widget:

{
“postfix”: “Build Status”,
"color": "green",
“data”: {
“value”: “Passed”
}
}

The values are settable by your system but the keys must be named as above. If the JSON is formatted correctly, the widget should show a text label from the JSON data.

Number from JSON data:

Following is the Widget Data Spec for a simple number widget:

{
“postfix”: “MyUnits”,
"color": "green",
“data”: {
“value”: 1234
}
}

The values are settable by your system but the keys must be named as above. If the JSON is formatted correctly, the widget should show a number from the JSON data.

Count and difference indicator from JSON data

Following is the Widget Data Spec for a number with change indicator widget:

{
“postfix”: “Units”,
"color": "green",
“data”: [
{
“value”: 1450
}
,
{
“value”: 1250
}
]
}

The first value is the actual number to be displayed while the second value is the number from the previous period that is used to calculate the change or difference percentage. The values are settable by your system but the keys must be named as above. If the JSON is formatted correctly, the widget should show a number with a percentage change indicator from the JSON data.

Line graph from JSON data

Following is the Widget Data Spec for a line graph widget:

{
“postfix”: “Units”,
"color": "green",
“data”: [
{
“value”: 1450
}
,
{
“value”: 350
}
,
…
,
{
“value”: 1850
}
,
{
“value”: 1250
}
]
}

The data array can contain a maximum of 31 items. The values are settable by your system but the keys must be named as above. If the JSON is formatted correctly, the widget should show a line graph from the JSON data.

Named line graph from JSON data

Following is the Widget Data Spec for a named line graph widget:

{
“postfix”: “Units”,
"color": "green",
“data”: [
{
“name”:”Sunday”
,”value”: 1450
}
,
{
“name”:”Monday”
,”value”: 350
}
,
…
,
{
“name”:”Friday”
,”value”: 1850
}
,
{
“name”:”Saturday”
,”value”: 1250
}
]
}

The data array can contain a maximum of 31 items. The values are settable by your system but the keys must be named as above. If the JSON is formatted correctly, the widget should show a named line graph from the JSON data.

Pie chart from JSON data

Following is the Widget Data Spec for a pie chart widget:

{
"color": "green",
“data”: [
{
“name”:”Jean-Luc Picard”
,”value”: 1450
}
,
{
“name”:”James Kirk”
,”value”: 350
}
,
…
,
{
“name”:”Kathryn Janeway”
,”value”: 1850
}
,
{
“name”:”Jonathan Archer”
,”value”: 1250
}
]
}

The top 5 items will be chosen to draw the pie slices and the rest will be added to one slice called other. The values are settable by your system but the keys must be named as above. If the JSON is formatted correctly, the widget should show a pie chart from the JSON data.

Top list funnel chart from JSON data

Following is the Widget Data Spec for a top list funnel widget:

{
“valueNameHeader”: “Captains”,
“valueHeader”: “Kills”,
"color": "green",
“data”: [
{
“name”:”Jean-Luc Picard”
,”value”: 1450
}
,
{
“name”:”James Kirk”
,”value”: 350
}
,
…
,
{
“name”:”Kathryn Janeway”
,”value”: 1850
}
,
{
“name”:”Jonathan Archer”
,”value”: 1250
}
]
}

The top 5 items will be chosen to draw the top list. The values are settable by your system but the keys must be named as above. If the JSON is formatted correctly, the widget should show a top list funnel chart from the JSON data.

Gauge from JSON data

Following is the Widget Data Spec for a gauge widget:

{
"postfix": "%"
"color": "green"
"data": 
{
"minValue: 0,
"value": 63,
"maxValue": 100
}
}

If the JSON is formatted correctly, the widget should show a gauge from the JSON data with a green background color.

Timer from JSON data

Following is the Widget Data Spec for a timer widget:

{ 
"color": "green",
"data": 
{
"name": "Warp drive activation",
"dateValue": "2020-12-21T01:11+0530",
"dateFormat": "yyyy-MM-dd'T'HH:mmZ"
}
}

If the JSON is formatted correctly, the widget should show a timer from the JSON data counting down to the date: 21st December 2020 and the event name Warp drive activation will be displayed below the countdown, with a green background color.

Hour density chart from JSON data

Following is the Widget Data Spec for an hour density clock widget:

{
“postfix”: “Units”,
"color": "green",
“data”: [
{
“hour”:0
,”value”: 1250
}
,
{
“hour”:1
,”value”: 100
}
,
…
,
{
“hour”:22
,”value”: 1250
}
,
{
“hour”:23
,”value”: 1100
}
]
}   

The data array must contain items for 24 hours for a single day. The values are settable by your system but the keys must be named as above. If the JSON is formatted correctly, the widget should show an hour density clock from the JSON data, starting at 00 and broken into 24 equal slices, with each slice of the pie representing an hour. Hours with the highest values are the brightest, while hours with lower values are incrementally more transparent and closer to the background color of the widget.

Day density chart from JSON data

Following is the Widget Data Spec for a day density calendar widget:

{
“postfix”: “Units”,
"color": "green",
“data”: [
{
“date”:”2014-07-01″
,”value”: 100
}
,
{
“date”:”2014-07-02″
,”value”: 200
}
,
…
,
{
“date”:”2014-07-30″
,”value”: 1100
}
,
{
“date”:”2014-07-31″
,”value”: 1250
}
]
}

The data array must contain dates for a month. The values are settable by your system but the keys must be named as above. If the JSON is formatted correctly, the widget should show a day density calendar from the JSON data, with each block representing a day. Days with the highest values are the brightest, while days with lower values are incrementally more transparent and closer to the background color of the widget.