Is it possible to integrate Amazon QuickSight dashboard graphs to a web application?

Question

I need to display live interactive graphs based on customer data present in MySQL,for generating the graphs, I am planning to use Amazon Quick Sight but i would like to know whether the generated graphs can be integrated with my web application UI ? Datasource MYSQL is hosted in AWS.

Any other better design solution is also most welcome :)

Answer 1

• I don't think so. Even if you want to share the dashboard to someone, you need to create a user in QuickSight. Any more than 1 user will be charged by AWS.
• The dashboard cannot be public and you need to login to view the dashboard. If it was public, you could have embedded it in your webpage as an iframe. But you cannot.
• So, I think you are having limited options here, when it comes to QuickSight.
• You can always using D3 or Google Charts to display the data by exposing REST services for your data in MySQL.
• If you have a huge database, you may want to consider indexing the data to Elasticsearch and perform queries on it.
• Check if Kibana + Elasticsearch works out of the box for you.

Good luck!

Update: Dec 28 2018

Amazon announced in Nov 2018, that Amazon QuickSight dashboards can now be embedded in applications. Read more here at this AWS QuickSight Update.

Answer 2

AWS has enabled the embedding of the Dashboards into web apps. The feature was released on 27th Nov 2018. Here are a few helpful links:
1. https://aws.amazon.com/blogs/big-data/embed-interactive-dashboards-in-your-application-with-amazon-quicksight/
2. https://docs.aws.amazon.com/quicksight/latest/user/embedded-dashboards-setup.html

Answer 3

Note: This answer is applicable only if you are using AWS Cognito

In order to generate Quicksight secure dashboard URL, follow the below steps:

Step 1: Create a new Identity Pool. Go to https://console.aws.amazon.com/cognito/home?region=u-east-1 , click ‘Create new Identity Pool’

• Give an appropriate name.
• Go to the Authentication Providers section, select Cognito.
• Give the User Pool ID(your User pool ID) and App Client ID (go to App Clients in user pool and copy id).
• Click ‘Create Pool’. Then click ‘Allow’ to create roles of the identity pool in IAM.

Step 2: Assign Custom policy to the Identity Pool Role

• Create a custom policy with the below JSON.

      {
            "Version": "2012-10-17",
            "Statement": [
                {
                    "Action": "quicksight:RegisterUser",
                    "Resource": "*",
                    "Effect": "Allow"
                },
                {
                    "Action": "quicksight:GetDashboardEmbedUrl",
                    "Resource": "*",
                    "Effect": "Allow"
                },
                {
                    "Action": "sts:AssumeRole",
                    "Resource": "*",
                    "Effect": "Allow"
                }
            ]
        }

Note: if you want to restrict the user to only one dashboard, replace the * with the dashboard ARN name in quicksight:GetDashboardEmbedUrl,

• then goto the roles in IAM.
• select the IAM role of the Identity pool and assign the custom policy to the role.

Step 3: Configuration for generating the temporary IAM(STS) user

• Login to your application with the user credentials.

• For creating temporary IAM user, we use Cognito credentials.

• When user logs in, Cognito generates 3 token IDs - IDToken, AccessToken, RefreshToken. These tokens will be sent to your application server.

For creating a temporary IAM user, we use Cognito Access Token and credentials will look like below.

 AWS.config.region = 'us-east-1';
       AWS.config.credentials = new AWS.CognitoIdentityCredentials({
           IdentityPoolId:"Identity pool ID",
           Logins: {
               'cognito-idp.us-east-1.amazonaws.com/UserPoolID': AccessToken
           }
       });

• For generating temporary IAM credentials, we call sts.assume role method with the below parameters.

var params = {
           RoleArn: "Cognito Identity role arn",
           RoleSessionName: "Session name"
       };

    sts.assumeRole(params, function (err, data) {
               if (err) console.log( err, err.stack); // an error occurred
               else {
                   console.log(data);
    })

• You can add additional parameters like duration (in seconds) for the user.
• Now, we will get the AccessKeyId, SecretAccessKey and Session
  Token of the temporary user.

Step 4: Register the User in Quicksight

• With the help of same Cognito credentials used in Step 3, we will register the user in quicksight by using the quicksight.registerUser method with the below parameters

var params = {
                   AwsAccountId: “account id”,
                   Email: 'email',
                   IdentityType: 'IAM' ,
                   Namespace: 'default',
                   UserRole: ADMIN | AUTHOR | READER | RESTRICTED_AUTHOR | RESTRICTED_READER,
                   IamArn: 'Cognito Identity role arn',
                   SessionName: 'session name given in the assume role creation',
               };

quicksight.registerUser(params, function (err, data1) {
                   if (err) console.log("err register user”); // an error occurred
                   else {
                       // console.log("Register User1”);
                   }
               });

• Now the user will be registered in quicksight.

Step5: Update AWS configuration with New credentials.

• Below code shows how to configure the AWS.config() with new credentials generated Step 3.

    AWS.config.update({
                       accessKeyId: AccessToken,
                       secretAccessKey: SecretAccessKey ,
                       sessionToken: SessionToken, 
                       "region": Region
                     });

Step6: Generate the EmbedURL for Dashboards:

• By using the credentials generated in Step 3, we will call the quicksight.getDashboardEmbedUrl with the below parameters

    var params = {
                AwsAccountId: "account ID",
                DashboardId: "dashboard Id",
                IdentityType: "IAM",
                ResetDisabled: true,
                SessionLifetimeInMinutes: between 15 to 600 minutes,
                UndoRedoDisabled: True | False
    }
    quicksight.getDashboardEmbedUrl(params,
                             function (err, data) {
                               if (!err) {
                                 console.log( data);
                               } else {
                                 console.log(err);
                               }
                             }
                           );

• Now, we will get the embed url for the dashboard.
• Call the QuickSightEmbedding.embedDashboard from front end with the help of the above generated url.
• The result will be the dashboard embedded in your application with filter controls.