HTML Example for Embedding a Dashboard with Amazon QuickSight Using the URL from the App Server - Amazon QuickSight

HTML Example for Embedding a Dashboard with Amazon QuickSight Using the URL from the App Server

The following example shows HTML that you can use to display an embedded dashboard. This example uses JavaScript. You can use the Amazon QuickSight Embedding SDK (JavaScript) to integrate Amazon QuickSight dashboards in your application pages, set defaults, connect controls, and handle errors. The SDK is also available on GitHub. However, you can achieve the same result with any of the AWS SDK supported languages. For more information, see Tools for Amazon Web Services.

Before you can use this example, you need to get the URL from the app server, as shown in previous sections. There are examples of this in various languages in the following sections.

<!DOCTYPE html> <html> <head> <title>Basic Embed</title> <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.3/dist/quicksight-embedding-js-sdk.min.js" /> <script type="text/JavaScript"> var dashboard function onDashboardLoad(payload) { console.log("Do something when the dashboard is fully loaded."); } function onError(payload) { console.log("Do something when the dashboard fails loading"); } function embedDashboard() { var containerDiv = document.getElementById("dashboardContainer"); var options = { url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode", container: containerDiv, parameters: { country: "United States" }, scrolling: "no", height: "700px", width: "1000px" }; dashboard = QuickSightEmbedding.embedDashboard(options); dashboard.on("error", onError); dashboard.on("load", onDashboardLoad); } function onCountryChange(obj) { dashboard.setParameters({country: obj.value}); } </script> </head> <body onload="embedDashboard()"> <span> <label for="country">Country</label> <select id="country" name="country" onchange="onCountryChange(this)"> <option value="United States">United States</option> <option value="Mexico">Mexico</option> <option value="Canada">Canada</option> </select> </span> <div id="dashboardContainer"></div> </body> </html>