Embedding in Salesforce

You can now embed your Chartio dashboards into Salesforce! Embedding Chartio in Salesforce (SFDC) requires that each user viewing the dashboard in Salesforce has Chartio access. 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 Interactive Embedding enabled
  • Salesforce Admin Account

Step 1 - Create your Chartio dashboard

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

In the example below, we used a Text Input Control 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 Controls to your embedded dashboard. Users will then be able to further filter the charts from Salesforce directly. You can also use the Current User Variable to customize the viewing experience of each user.

Note: Viewers must be logged into Chartio to any embedded dashboards; otherwise, they’ll receive the “Not Logged In” error message.

Step 2 - Create a new View in Salesforce

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

  2. Give your page a Label, Name, 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>
    

    a. Adjust the src URL to contain your org slug and dashboard slug.

    b. 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 Control SFDC_ACCOUNT_ID.

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

    visualforce page

  3. Once you’re done, click Save.

Step 3 - Add your new View to a Salesforce page

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.