Embeded charts

[jessie-ross]

Hi all!

My organisation is using Superset embeds via the superset-embed-sdk and guest-token authentication.

It's working well so far, we were wondering if we'd also be able to extend this system to embedding charts in the same way, via the same code.

This would enable us to add Superset charts to our discussion systems, which would be a neat feature - currently we see lots of screenshots of Superset charts instead.

I would in theory be able to spend time working on this feature.

[hug0b]

I agree with this feature request.

Embedding individual charts is a feature supported by other visualization tools like Grafana and Metabase, and it would significantly enhance the flexibility of UI design and user experience when building custom dashboards. For instance, when creating a frontend app with frameworks like React.js or Vue.js, each graph could be easily embedded within individual cards or sections to create a responsive layout, with custom UI components seamlessly integrated between each graph.

[codingbbq]

if we go to individual charts, we see an option to share the chart and there is an option to embedd the chart, which gives you an iframe URL. Not sure if there is any way to get the embedding iframe URL from API, we get the list of all the charts though.

[hug0b]

The issue is that it doesn't allow secure embeding with the embed sdk, also if I recall the iframe URL is recreated each time the graph is updated.

[codingbbq]

Thanks. It turns out that we cannot embedd individual charts.
So the only option is to create a dashboard with just one chart in it (because you can embedd dashboards), that way you can mimic the behavior you require on your application.

[cin]

There is a way to do this w/out the SDK. You can call the explore APIs directly with the standalone parameter set. You have to know the dataset_id and slice, but setting standalone to 1 will hide everything but the chart.

  const srcUrl = new URL(`${supersetDomain}/superset/explore/`);
  srcUrl.searchParams.set("token", token);
  srcUrl.searchParams.set('standalone', "1");
  srcUrl.searchParams.set(
    "form_data_key",
    "<dataset_id>"
  );
  srcUrl.searchParams.set("slice_id", "<slice>");

Unfortunately, none of the other parameters seem to do anything (uiConfig and show_filters). We'd like to expose the explore view to clients too (so they can create their own charts and dashboards without having to involve support), but we don't want them to be able to navigate away from this page (or logout or see any options their roles won't allow).

[sohaibqasem]

You can do this on two ways:

First way:
go to superset/config.py then go to PUBLIC_ROLE_LIKE and make it equal to Gamma and then run superset init

Second way (more specific for chart-embed flow):
Go to settings >> list Roles >> public >> edit
You need these permissions to be added (can remove or add if needed):
can read on chart can read on Explore can read on ExploreFormDataRestApi can write on ExploreFormDataRestApi
can read on ExplorePermalinkRestApi can write on ExplorePermalinkRestApi can list on dynamicPlugin
can query form data on Api can query on Api can explore json on Superset
all datasource access on all_datasource_access

Note that you need to keep track down what public role can really access

After this you will be allowed to embed charts without Auth required and here also you have two options:
Use embed code option on the chart page (options list) OR the /explore end-point

The first one easy so i will give more details about /explore end-point which allow you to have filters on the same embed URL.

{{SUPERSET_HOST}}/explore/?form_data=encode(form_data_obj&slice_id=10&standalone=1)&slice_id=10&standalone=1

form_data_obj = { adhoc_filters: [{}], slice_id: <number>}

Example:

{"adhoc_filters":[{"clause":"WHERE","comparator":2024,"expressionType":"SIMPLE","operator":"IN","subject":"year"}],"slice_id":10}&slice_id=10&standalone=1

Then encode it

%7B%22adhoc_filters%22%3A%5B%7B%22clause%22%3A%22WHERE%22%2C%22comparator%22%3A2024%2C%22expressionType%22%3A%22SIMPLE%22%2C%22operator%22%3A%22IN%22%2C%22subject%22%3A%22year%22%7D%5D%2C%22slice_id%22%3A10%7D%26slice_id%3D10%26standalone%3D1

Final URL:

{{SUPERSET_HOST}}/explore/?form_data=%7B%22adhoc_filters%22%3A%5B%7B%22clause%22%3A%22WHERE%22%2C%22comparator%22%3A2024%2C%22expressionType%22%3A%22SIMPLE%22%2C%22operator%22%3A%22IN%22%2C%22subject%22%3A%22year%22%7D%5D%2C%22slice_id%22%3A10%7D%26slice_id%3D10%26standalone%3D1&slice_id=10&standalone=1

Final Thoughts:
Until there is something official from Superset to handle this feature, i think you can do more complex solutions and keep Superset secure like embed Superset charts securely by rendering chart HTML on a server and delivering it to a client-side iframe, simplifying authentication and rendering handling (server).

[thalmis-zt]

I tried this approach, however, the filters are not being applied. Can you please look into it and see if I am missing anything.

//configuration
const supersetHost ='http://localhost:8088';
const tableSliceId = 671;
const formData = {
slice_id: tableSliceId,
adhoc_filters: [
{
clause: 'WHERE',
expressionType: 'SIMPLE',
subject: 'state',
operator: 'IN',
comparator: '247'
}
],
standalone: 1
};

// Stringify and encode the form data
const encodedFormDataFive = encodeURIComponent(JSON.stringify(formData));
const url = ${supersetHost}/superset/explore/?form_data=${encodedFormDataFive}&slice_id=${tableSliceId}&standalone=1&height=400;

//html
`<iframe
width="600"
height="400"
seamless
frameBorder="0"
scrolling="no"
title="with embedding charts enabled"
src={url}

</iframe>`

[amandamcvey]

@sohaibqasem I've been banging my head against this issue all Friday and decide to make one last attempt today when I finally your comment with the exact user permissions I need to bypass login for an embedded iFrame chart. THANK YOU.

[sohaibqasem]

Glad I could help! I know how frustrating it can be.