You can embed live Charts from ClearPoint on your intranet or public websites using chart embed codes and iframes.
Getting the embed code from your Chart
Select Scorecard & Elements from the Control Panel
Click on Manage Elements
Open Measures
Locate the Measure you are going to be working with, in this example, ‘Revenue’.
Double-click on the chart to open the chart editor window
Navigate to the Advanced Options tab
Check the box next to Enable Embed Code
Use the Select Reporting Period dropdown menu to select the desired period
You also have the option to use the Current Period or Show Period dropdown to include a period dropdown option for your embedded chart.
You can also set the Chart Width and Height
If you do not specify values here, it will display the default Width and Height
Click the copy-to-clipboard icon to the right of the embed code.
You will use this to embed the chart in your iframe
Once you are done, click Save
Embedding the chart embed code in an iframe
Important: You will need the webmaster for your website or intranet (someone who has access to edit your web pages) to perform these steps.
Start by inserting an HTML <iframe> element into the HTML for your web page, placing it where you want to display the chart.
The basic code for the iframe is: <iframe src=""> </iframe>
Next, paste the chart embed code from ClearPoint into the quotations following src=.
For example, it may look like this:
<iframe src="https://embed.clearpointstrategy.com/?#/chart?chartId=1517315&periodId=-1"></iframe>
Once you have inserted the chart embed code in the iframe, there are HTML attributes that can be added to format the iframe itself, including width, height, and frame border. Learn more about iframe attributes here.
One popular change we see is setting the width to 100% so that the chart will always fill the space. After saving the newly added iframe referencing the chart embed code, your web page will display your ClearPoint chart.
For example:
<!DOCTYPE HTML>
<html>
<body>
<iframe src="https://embed.clearpointstrategy.com/?#/chart?chartId=1517315&periodId=-1" width=100% height=500 frameborder=0>
</iframe>
</body>
</html>
Refreshing the chart data from ClearPoint
Chart data in embed code data does not update automatically. You'll need to refresh the data from within ClearPoint. There are two ways to refresh the chart data for your embedded chart.
From the chart editor
Select Scorecard & Elements from the Control Panel
Click on Manage Elements
Open Measures
Locate the Measure you are going to be working with, in this example, ‘Revenue’.
Double-click on the chart to open the chart editor window
Navigate to the Advanced Options tab
Check the box next to Update Published Chart
Once you are done, click Save
From Chart Options in System Setup
Click on System Settings
Open System Setup
Click on Advanced & Custom Charts under Professional Features
Navigate to the Embedded Charts tab, you will see a list of all your charts that have activated embed codes
Check the box next to the charts you would like to refresh
Click on the three dots icon
Select Refresh Embedded Chart
Once you are done, click Save
