Jörg Rade
09/27/2023, 9:37 AM// Define your Vega chart specification
const vegaSpec = {
"$schema": "<https://vega.github.io/schema/vega/v5.json>",
"description": "A simple bar chart with embedded data.",
"width": 400,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"type": "linear",
"domain": {"data": "table", "field": "amount"},
"range": "height",
"nice": true,
"zero": true
}
],
"axes": [
{"orient": "bottom", "scale": "xscale"},
{"orient": "left", "scale": "yscale"}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
}
}
}
]
};
// Create a Tabulator table
const table = new Tabulator("#example-table", {
data: [
{ id: 1, name: "John Doe" },
{ id: 2, name: "Jane Smith" },
{ id: 3, name: "Bob Johnson" }
],
columns: [
{ title: "ID", field: "id" },
{ title: "Name", field: "name" },
{
title: "Chart",
field: "chart",
formatter: function(cell) {
// Create a container element for the Vega chart
const chartContainer = document.createElement("div");
chartContainer.style.width = "400px";
chartContainer.style.height = "200px";
// Render the Vega chart inside the container
vegaEmbed(chartContainer, vegaSpec);
// Return the container element
return chartContainer;
}
}
]
});