Embedding in Salesforce

Embedding

You can now embed your Chartio dashboards into Salesforce! Embedding Chartio in Salesforce (SFDC) requires that each user has Chartio access to view the dashboard in Salesforce. The Chartio dashboard is embedded as a parameterized iFrame that you can add to your page layouts in Salesforce.

To get started, you’ll need:

  • Chartio access
  • Chartio Embedding 2.0 enabled
  • Salesforce Admin Account

Step 1

Create the dashboard you plan to embed in Chartio. You will need to parameterize any variables you intend to pass from Salesforce. For example, if you would like to pass in Account.Id from Salesforce to filter your dashboard, you’ll need to create a variable that will accept that value.

In the example below, we used a Text Input variable named SFDC_ACCOUNT_ID that will accept a numeric value (Account.Id) from Salesforce. This value will be used to filter your charts and present only data specific to this account within Salesforce.

example embedded dashboard

For an added level of interactivity, try including other dashboard variables to your embedded dashboard. Users will then be able to further filter the charts from Salesforce directly.

Step 2

In Salesforce, navigate to the “Setup” screen and expand Platform Tools > Custom Code > Visualforce Pages and click “Create New View”.

Give your page a name, label, and description. In the Visualforce Markup section, you can paste the following:

<apex:page standardController="Account">
<apex:iframe src="https://chartio.com/d/<your-org-slug>/<your-dashboard-slug>/?embed=1&SFDC_ACCOUNT_ID={!Account.Id}"width="900px" height="600px" id="account_app_usage" scrolling="true"/>
</apex:page>

Adjust the src URL so that the URL contains your org slug and dashboard slug. At the end of the URL, you can insert a wildcard that takes advantage of a Salesforce variable to filter the query. In this example, SFDC_ACCOUNT_ID = {!Account.Id}, maps the Account.Id value from Salesforce to our Chartio dashboard variable SFDC_ACCOUNT_ID.

You can also adjust the width and height to accommodate your dashboard size.

visualforce page

Once you’re done, click Save.

Step 3

Add this view to the Page Layout of the object where you want to embed this page and click Save. In this example, we’re adding the dashboard to the Account page:

Chartio embedded in Salesforce

Now, your Chartio dashboard is embedded in Salesforce!

Troubleshooting

Not Logged In message

SFDC users will need to be logged into Chartio for the embedded dashboard to appear. If they are not logged in, they will get a message directing them to the Chartio login page as seen below:

Chartio not logged in

Upon seeing this message, the user can click on Open Login Page to open Chartio in a separate tab and enter their username and password. Once they’re logged into Chartio, they can simply reload this page and the embedded dashboard will appear on the selected page.


Related Embedding Help Articles

See more