Input Data Structures for Charts
This guide describes expected structures of the input data for charts, and how are they transformed into the data series for individual chart types.
All charts are based on the Array of objects input data type.
Pie and Donut charts
Pie charts are good for showing proportions, while Donut charts for showing proportions with a central metric.
But they are the same from the data series point of view - they expect one data series, where data
point's x contains category name, and y contains number value for that category.
LLM can decide to obtain chart data from the input data in one of these ways.
Category frequency counted from one field
Every object in the input data array represents entity falling into one or more categories named in one field.
LLM selects this one field from the object in the input data array. Field name generated by the LLM becomes data series name. All the values of this field are collected from the whole array, then they are interpreted as category names, and occurrences are counted to be visualized.
Example of the input data:
{
"movies": [
{"genres": ["Action","Sci-fi"], ...},
{"genres": "Comedy", ...},
{"genres": "Crime", ...},
{"genres": "Comedy", ...},
{"genres": "Sci-fi", ...}
]
}
Field value can be either simple value, or array of simple values. Array is flattened into multiple individual categories.
The field can be also null, it is skipped and doesn't appear in the data series.
Example of the chart UI component configuration to be visualized from the data above for genres field:
{
"component": "chart-donut",
"title": "Movie Genres",
"data": [
{
"name": "Genres",
"data": [
{"x": "Action", "y": 1},
{"x": "Comedy", "y": 2},
{"x": "Sci-fi", "y": 2},
{"x": "Crime", "y": 2}
]
}
]
}
Category data from two fields
Warning
This processing type is not implemented yet, we are working on it!
Every object in the input data array represents one category, and contains fields with its name and visualized metric, but can contain others also. LLM selects two fields from the object in the input data array. First represents category name, second number value associated to that category to be visualized.
Example of the input data:
{
"genres": [
{"name": "Action", "numOfMovies": 1, ...},
{"name": "Comedy", "numOfMovies": 2, ...},
{"name": "Sci-fi", "numOfMovies": 2, ...},
{"name": "Crime", "numOfMovies": 1, ...}
]
}
Chart UI component configuration is the same as above if LLM selected name and numOfMovies fields.
Bar chart
Bar charts are good for comparing more metrics across categories. But it can also be used to visualize single metric.
Every object in the input data array represents one category, and contains fields with its name
and metrics, but there can be other fields here also.
LLM selects two or more fields from the object in the input data array,
value of the first field represents category name (x shared by all the data series),
each subsequent field represents one metric (y in own data series).
Field name generated by the LLM for these other fields becomes data series name.
Value type of these other fields in the input data can be either single int/float,
array of int/floats (only first value is used), or string convertible to int/float.
Value not matching these rules is omitted from the data series.
Example of the input data:
{
"sales_by_genre": [
{"name": "Action", "numOfMovies": 1, "numOfBooks": 5, ...},
{"name": "Comedy", "numOfMovies": 2, "numOfBooks": 2, ...},
{"name": "Sci-fi", "numOfMovies": 2, "numOfBooks": 3, ...},
{"name": "Crime", "numOfMovies": 1, "numOfBooks": 1, ...}
]
}
Example of the Bar chart UI component configuration to be visualized from the data above, if LLM selects name, numOfMovies and numOfBooks fields:
{
"component": "chart-bar",
"title": "Sales by Genre",
"x_axis_label": "Genre",
"data": [
{
"name": "Movies",
"data": [
{"x": "Action", "y": 1},
{"x": "Comedy", "y": 2},
{"x": "Sci-fi", "y": 2},
{"x": "Crime", "y": 2}
]
},
{
"name": "Books",
"data": [
{"x": "Action", "y": 5},
{"x": "Comedy", "y": 2},
{"x": "Sci-fi", "y": 3},
{"x": "Crime", "y": 1}
]
}
]
}
Mirrored Bar chart
Mirrored bar charts are good for comparing two metrics side-by-side.
Processing is the same as in case of the Bar chart, LLM selects exactly three fields from the object in the input data array to get two data series representing metrics for the comparison.
Line chart
Line charts show trends over time. Input data can be provided in two shapes:
Standard data
For this shape, every object in the input data array represents data for one point in time.
LLM selects two or more fields from the object, rest of the processing is the same as in case of
the Bar chart to transform data into data series.
Only x axis values do not represent categories, but points in time.
Example of the input data:
{
"data": [
{"month": "Jan", "sales": 100, "profit": 20, "expenses": 80, "note": "lorem ipsum", ...},
{"month": "Feb", "sales": 150, "profit": 35, "expenses": 115, "note": "lorem ipsum", ...},
{"month": "Mar", "sales": 120, "profit": 25, "expenses": 95, "note": "lorem ipsum", ...}
]
}
Example of the Line chart UI component configuration to be visualized from the data above, if LLM selects month, sales, profit and expenses fields:
{
"component": "chart-line",
"title": "Business Over Time",
"x_axis_label": "Month",
"data": [
{
"name": "Sales",
"data": [
{"x": "Jan", "y": 100},
{"x": "Feb", "y": 150},
{"x": "Mar", "y": 120}
]
},
{
"name": "Profit",
"data": [
{"x": "Jan", "y": 20},
{"x": "Feb", "y": 35},
{"x": "Mar", "y": 25}
]
},
{
"name": "Expenses",
"data": [
{"x": "Jan", "y": 80},
{"x": "Feb", "y": 115},
{"x": "Mar", "y": 95}
]
}
]
}
Series oriented data
Input data array is expected to contain one object for each data series, which contains
one simple field with series name, and then field with another array
containing objects with two fields for series x and y values.
So LLM selects exactly three fields from the object in the input data array for this kind of chart.
Note that x data in each series should be the same to get a good visualization.
Example of the input data for this processing:
{
"movies": [
{
"title": "Movie A",
"weeklyData": [
{"week": "W1", "revenue": 100, "note": "lorem ipsum", ...},
{"week": "W2", "revenue": 150, "note": "lorem ipsum", ...}
]
},
{
"title": "Movie B",
"weeklyData": [
{"week": "W1", "revenue": 80, "note": "lorem ipsum", ...},
{"week": "W2", "revenue": 120, "note": "lorem ipsum", ...}
]
}
]
}
Example of the Line chart UI component configuration to be visualized from the data above: