Help

Embedding a Vega-lite visualization using specific data from Airtable into Softr

257 3
cancel
Showing results for 
Search instead for 
Did you mean: 
meghanm913
4 - Data Explorer
4 - Data Explorer

Hi! I am working with a team member to embed a Vega-lite visualization into Softr using data from Airtable, and we have successfully been able to figure out how to embed the visualization in Softr, but we want the visualization to display different data for each project. When users sign into Softr, they create a project so all of their data is attached to it in Airtable, but we can’t figure out how to modify the embed code so that it pulls data related to a specific project. Does anyone have any ideas on how to go about this issue?

3 Replies 3

Hmm, Airtable extensions can't be embedded, so I take it you're not using the Vega-lite extension for this?  If you could link to the documentation for how you're embedding the Vega-lite visualization into Softr I could take a look at this for you!

Mariam_Ispiryan
6 - Interface Innovator
6 - Interface Innovator

Softr has a custom code block + section, so it would be possible to embed the Vega-lite extension directly with Softr, but I would test this first or contact Softr support team to check if it's actually possible

Whoops, yes I am talking about the Vega-lite extension. This is the code I have for successfully embedding the visualization but I need the visual to generate differently based on which user is logged in: 

<div id="vis"></div>

<script type="text/javascript">

const airtableBaseID = ''; // Replace with your base ID
const airtablePAT = ''; // Replace with your PAT

async function fetchAirtableData() {
const url = ``; // Replace with your table name
const response = await fetch(url, {
headers: {
Authorization: `Bearer ${airtablePAT}`,
},
});


const airtableData = await response.json(); // Parse JSON response

return airtableData.records.map(record => ({
"Hazard type (from Hazard type)": record.fields["Hazard type (from Hazard type)"],
"Exposed Asset / System / Party": record.fields["Exposed Asset / System / Party"],
"Calculation": record.fields["Calculation"]
}));
}


// Define the Vega-Lite spec
function getVegaLiteSpec(data) {
return {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
description: 'A simple bar chart with data from Airtable.',
data: { values: data }, // Use fetched data from Airtable
mark: 'bar',
encoding: {
y: {
field: "Hazard type (from Hazard type)",
type: "nominal"
},
x: {
field: "Exposed Asset / System / Party",
type: "ordinal"
},
color: {
field: "Calculation",
type: "quantitative",
title: "Hazard exposures"
}
}
};
};


// Fetch data and embed the visualization
fetchAirtableData().then(data => {
const spec = getVegaLiteSpec(data);
vegaEmbed('#vis', spec);
});
</script>