Embedding charts from ClearPoint
You can now embed live charts from ClearPoint on your intranet or public websites! Learn more about accessing the embed code, using an iframe, and keeping your chart data current below.
Getting the embed code from your chart
1) From the measure detail page, double click on your chart to open the chart editor window.
2) Click on the ‘Advanced Options’ tab.
3) Check the box next to ‘Enable Embed Code’.
4) From the ‘Select Reporting Period’ dropdown menu, you can select whether to include a period dropdown option for your embedded chart or pre-select to display the current or a specified reporting period.
5) The chart width and height can be determined here by typing into the respective fields. If you do not specify values here, it will display the default chart width and height.
6) Click the paper icon to the right of the embed code. You will use this to embed the chart in your iframe.
7) When you are finished, click Save.
Embedding the chart embed code in an iframe
Note: You will need the webmaster for your website or intranet (someone who has access to edit your web pages) to perform these steps.
1) Insert an HTML <iframe> element into the HTML for your web page, placing it where you want to display the report.
The basic code for the iframe is:
<iframe src=””> </iframe>
2) Paste the chart embed code from ClearPoint into the quotations following src=.
<iframe src=”https://embed.clearpointstrategy.com/?#/chart?chartId=496325&periodId=0″> </iframe>
3) Once you have inserted the chart embed code 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.
<iframe src=”https://embed.clearpointstrategy.com/?#/chart?chartId=496325&periodId=0″ width=”100%” height=”500″ frameborder=0> </iframe>.
4) After saving the newly added iframe referencing the chart embed code, your web page will display your ClearPoint chart in an iframe.
Refreshing the chart data from ClearPoint
There are two ways to refresh the chart data for your embedded chart.
From the chart editor
1) From the chart edit window, click on ‘Advanced Options’.
2) Check the box next to ‘Update Published Chart’.
3) Click Save.
From Chart Options in Admin Options
1) Click on ‘Admin Options’ under System Settings.
2) Click on the ‘Advanced & Custom Charts’ menu tile.
3) Go to the ‘Embedded Charts’ tab. You will see a list of all your charts that have activated embed codes.
4) Check the box next to the charts you would like to refresh.
5) Click the large green refresh button to refresh the chart data for all selected charts. Click the smaller, individual refresh button to refresh a single chart’s data.
6) The blue box and arrow icon will open a new window, taking you to the chart’s detail page in ClearPoint.
7) Click on the red X icon to deactivate the embed code and ‘un-publish’ the chart.
8) When you are finished, click Save.
Now that you’re a pro at using iframes, check out our article on embedding a ClearPoint HTML export in an iframe.