Embedding charts from ClearPoint | ClearPoint Strategy

Embedding charts from ClearPoint

You can 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.

Feature available for Enterprise Plan customers

In This Article

Getting the embed code from your chart

From the measure detail page, double click on your chart to open the chart editor window. Click on the Advanced Options tab. Check the box next to Enable Embed Code. From the Select Reporting Period dropdown menu, you can select whether to include a period dropdown option for your embedded chart or you can pre-select to display the current or a specified reporting period. 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 Chart 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. 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.

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 fills the space. After saving the newly added iframe referencing the chart embed code, your web page will display your ClearPoint chart.

 

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

From the chart edit window, click on Advanced Options. Check the box next to Update Published Chart. Click Save.

From Chart Options in Admin Options

First, click on Admin Options under System Settings. Then, click on the Advanced & Custom Charts menu tile. Go 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 the large green refresh button to refresh the chart data for all selected charts. Alternatively, you could click the smaller, individual refresh button to refresh a single chart’s data. The blue box and arrow icon will open a new window, taking you to the chart’s detail page in ClearPoint. Click on the red X icon to deactivate the embed code and ‘un-publish’ the chart. When you are finished, click Save.