JSON Data Samples
Framer Charts is designed to help you visualize your data effectively. To ensure a smooth experience, it's crucial to format your data correctly.
This guide will walk you through the process of converting your database's JSON data into the format compatible with our chart component.
Original JSON Format (Typical Database Output)
Before modification, your JSON data might look something like this:
{
"salesData": [
{"month": "Jan", "sales": 12000},
{"month": "Feb", "sales": 15500},
{"month": "Mar", "sales": 18000},
{"month": "Apr", "sales": 16500},
{"month": "May", "sales": 19000},
{"month": "Jun", "sales": 17500},
{"month": "Jul", "sales": 20000},
{"month": "Aug", "sales": 22000},
{"month": "Sep", "sales": 21000},
{"month": "Oct", "sales": 23000},
{"month": "Nov", "sales": 24000},
{"month": "Dec", "sales": 25000}
]
}This format is common for database outputs but needs to be adjusted for Framer Charts.
Required JSON Format for Framer Charts
For Bar, Line, Area, Pie, Doughnut, Radar, Polar Area
Framer Charts requires a specific JSON structure as shown below:
{
"labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"datasets": [
{
"label": "Sales Data",
"data": [
12000,
15500,
18000,
16500,
19000,
17500,
20000,
22000,
21000,
23000,
24000,
25000
]
}
]
}For Bubble, Scatter
For a bubble chart, each data point needs to include x (the x-axis coordinate), y (the y-axis coordinate), and r (the radius of the bubble, representing a third dimension of data).
For a scatter chart, data points need to include x and y coordinates, but they do not include the r value.
JSON structure as shown below:
//Bubble
{
"datasets": [
{
"label": "Dataset 1",
"data": [
{"x": 22, "y": 13, "r": 7},
{"x": 10, "y": 36, "r": 15},
{"x": 40, "y": 34, "r": 10},
{"x": 25, "y": 10, "r": 6},
{"x": 12, "y": 22, "r": 9},
{"x": 26, "y": 22, "r": 20}
]
}
]
}
//Scatter
{
"datasets": [
{
"label": "Dataset 1",
"data": [
{"x": 22, "y": 13},
{"x": 10, "y": 36},
{"x": 40, "y": 34},
{"x": 25, "y": 10},
{"x": 12, "y": 22},
{"x": 26, "y": 22}
]
}
]
}JSON Data Samples
Framer Charts is designed to help you visualize your data effectively. To ensure a smooth experience, it's crucial to format your data correctly.
This guide will walk you through the process of converting your database's JSON data into the format compatible with our chart component.
Original JSON Format (Typical Database Output)
Before modification, your JSON data might look something like this:
{
"salesData": [
{"month": "Jan", "sales": 12000},
{"month": "Feb", "sales": 15500},
{"month": "Mar", "sales": 18000},
{"month": "Apr", "sales": 16500},
{"month": "May", "sales": 19000},
{"month": "Jun", "sales": 17500},
{"month": "Jul", "sales": 20000},
{"month": "Aug", "sales": 22000},
{"month": "Sep", "sales": 21000},
{"month": "Oct", "sales": 23000},
{"month": "Nov", "sales": 24000},
{"month": "Dec", "sales": 25000}
]
}This format is common for database outputs but needs to be adjusted for Framer Charts.
Required JSON Format for Framer Charts
For Bar, Line, Area, Pie, Doughnut, Radar, Polar Area
Framer Charts requires a specific JSON structure as shown below:
{
"labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"datasets": [
{
"label": "Sales Data",
"data": [
12000,
15500,
18000,
16500,
19000,
17500,
20000,
22000,
21000,
23000,
24000,
25000
]
}
]
}For Bubble, Scatter
For a bubble chart, each data point needs to include x (the x-axis coordinate), y (the y-axis coordinate), and r (the radius of the bubble, representing a third dimension of data).
For a scatter chart, data points need to include x and y coordinates, but they do not include the r value.
JSON structure as shown below:
//Bubble
{
"datasets": [
{
"label": "Dataset 1",
"data": [
{"x": 22, "y": 13, "r": 7},
{"x": 10, "y": 36, "r": 15},
{"x": 40, "y": 34, "r": 10},
{"x": 25, "y": 10, "r": 6},
{"x": 12, "y": 22, "r": 9},
{"x": 26, "y": 22, "r": 20}
]
}
]
}
//Scatter
{
"datasets": [
{
"label": "Dataset 1",
"data": [
{"x": 22, "y": 13},
{"x": 10, "y": 36},
{"x": 40, "y": 34},
{"x": 25, "y": 10},
{"x": 12, "y": 22},
{"x": 26, "y": 22}
]
}
]
}