Create dashboards using JSON providing a simple JSON schema to create a dashboard that can be shared with your team, company or users.
Dashboardify lets you create dashboards using a JSON you provide via a URL. This JSON needs to be formatted in a specific way as shown below:
{
"sections": [
{
"title": "Users",
"stats": [
{
"label": "Total",
"value": 1540
},
{
"label": "Today",
"value": 20
},
{
"label": "Pro Users",
"value": 125
}
]
},
{
"title": "Revenue",
"stats": [
{
"label": "Total",
"value": 8654,
"prefix": "$"
},
{
"label": "This month",
"value": 804.5,
"prefix": "$"
},
{
"label": "MRR",
"value": 968.43,
"prefix": "$"
}
]
},
{
"title": "Requests",
"table": {
"columns": [
"User",
"Number of requests"
],
"data": [
[
"[email protected]",
3450
],
[
"[email protected]",
2789
],
[
"[email protected]",
2379
],
[
"[email protected]",
1045
],
[
"[email protected]",
875
],
[
"[email protected]",
294
]
]
}
}
]
}As you can see, the dashboard is made up of sections that can have stats, table and a chart. To see the dashboard generated by this example, you can go to the dashboard page.
To start the schema, you must define the sections you want to show.
| ATTRIBUTE | TYPE | REQUIRED |
|---|---|---|
| sections | Array of Section | Yes |
Sections are how Dashboardify groups information. You can have everything in the same section or create different ones for each context, like "Users", "Recipe", "Requests", etc.
| ATTRIBUTE | TYPE | REQUIRED |
|---|---|---|
| title | String | Yes |
| stats | Array of Stat | No |
| table | Table | No |
| chart | Chart | No |
A stat is used to display numbers as metrics and monetary values.
| ATTRIBUTE | TYPE | REQUIRED |
|---|---|---|
| label | String | Yes |
| value | Number | Yes |
| prefix | String | No |
A table is used to display tabular data. It's useful when you have a list of values you want to see at once.
| ATTRIBUTE | TYPE | REQUIRED |
|---|---|---|
| columns | Array of String | Yes |
| data | Array of Array of String or Number | Yes |
Display a line chart with x and y defined values.
| ATTRIBUTE | TYPE | REQUIRED |
|---|---|---|
| label | String | Yes |
| type | "linear" | Yes |
| lines | Array of Line | Yes |
| ATTRIBUTE | TYPE | REQUIRED |
|---|---|---|
| id | String | Yes |
| color | String | Yes |
| data | Array of Values | Yes |
| ATTRIBUTE | TYPE | REQUIRED |
|---|---|---|
| x | String | Yes |
| y | Number | Yes |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent