General
Data visualization
Data visualization
This example provides inspiration for how you could setup a data visualization report using Hybiscus charting components.
{
"$schema":"https://hybiscuscdn.blob.core...."
"type":"Report"
"options":{
"report_title":"MangoTechnology"
"report_byline":"Marketing overview"
"version_number":""
}
"config":{
"typography_theme":"ibm-plex"
"color_theme":"royal"
"n_pages":2
}
"components":[
0:{
"type":"Section"
"options":{
"section_title":"KPIs and OKRs"
"highlighted":true
"icon":"report-analytics"
"columns":3
}
"components":[
0:{
"type":"Card"
"options":{
"title":"Unique views"
"value":987
"units":"views"
"icon":"comet"
}
}
1:{
"type":"Card"
"options":{
"title":"Total sales"
"value":"53,476"
"units":"$"
"icon":"coin"
}
}
2:{
"type":"Card"
"options":{
"title":"Product views"
"value":"1,362"
"units":"views"
"icon":"building-store"
}
}
]
}
1:{
"type":"ProgressBar"
"options":{
"title":"Campaign progress"
"progress":75
"stages":[
0:{
"name":"Market</br>identification"
}
1:{
"name":"Customer</br>segmentation"
}
2:{
"name":"Newsletter</br>campaign"
}
3:{
"name":"Customer</br>conversion"
}
]
}
}
2:{
"type":"Section"
"options":{
"section_title":"Key performing products"
"icon":"chart-donut"
"columns":
}
"components":[
0:{
"type":"DoughnutRing"
"options":{
"width":"1/4"
"data":[
0:{
"start":5
"end":55
"label":"Product A"
}
1:{
"start":35
"end":78
"label":"Product B"
}
]
"chart_title":"Chart title"
"inside_title":"Usage"
"inside_subtitle":"(hours)"
}
}
1:{
"type":"Chart.Bar"
"options":{
"width":"3/4"
"aspect_ratio":2
"data":[
0:{
"x":"A"
"y":17
}
1:{
"x":"B"
"y":1
}
2:{
"x":"C"
"y":6
}
3:{
"x":"D"
"y":19
}
4:{
"x":"E"
"y":16
}
5:{
"x":"F"
"y":12
}
6:{
"x":"G"
"y":9
}
7:{
"x":"H"
"y":15
}
8:{
"x":"I"
"y":10
}
9:{
"x":"J"
"y":4
}
10:{
"x":"K"
"y":7
}
11:{
"x":"L"
"y":2
}
12:{
"x":"M"
"y":5
}
13:{
"x":"N"
"y":11
}
14:{
"x":"O"
"y":14
}
15:{
"x":"P"
"y":0
}
16:{
"x":"Q"
"y":18
}
17:{
"x":"R"
"y":8
}
18:{
"x":"S"
"y":13
}
19:{
"x":"T"
"y":3
}
]
"x_label":"Product"
"y_label":"Views"
}
}
]
}
3:{
"type":"Section"
"options":{
"section_title":"SaaS product category"
"icon":"device-laptop"
}
"components":[
0:{
"type":"Text"
"options":{
"width":"1/3"
"text":"Lorem ipsum dolor, sit amet co..."
}
}
1:{
"type":"Row"
"options":{
"columns":2
"width":"2/3"
}
"components":[
0:{
"type":"Card"
"options":{
"title":"Click through rate"
"value":"5"
"units":"%"
"icon":"click"
}
}
1:{
"type":"Card"
"options":{
"title":"Impressions"
"value":"1,364"
"units":"views"
"icon":"chart-area-line"
"highlighted":true
}
}
2:{
"type":"Card"
"options":{
"title":"Total sales"
"value":"3,567"
"units":"$"
"icon":"coin"
}
}
3:{
"type":"Card"
"options":{
"title":"Product views"
"value":"1,018"
"units":"views"
"icon":"building-store"
}
}
]
}
]
}
4:{
"type":"Section"
"options":{
"section_title":"Top performing referrers"
"highlighted":true
}
"components":[
0:{
"type":"Table"
"options":{
"title":""
"headings":[
0:"Referrer"
1:"URL"
2:"Count"
]
"striped":true
"rows":[
0:[
0:"Google"
1:"google.com/search?s=raspberryi..."
2:"13,934"
]
1:[
0:"Bing"
1:"bing.com/search?s=raspberry+pi"
2:"9,231"
]
2:[
0:"Facebook"
1:"facebook.com"
2:"3,673"
]
3:[
0:"Twitter"
1:"twitter.com"
2:"2,190"
]
]
}
}
]
}
]
}
To use this template, simply press the button in the top right corner to copy the JSON to your clipboard. You can paste it directly into the Cloud Editor to get started with this template.