Exports & Share information - Embedding Charts from ClearPoint | Scribe

    Exports & Share information - Embedding Charts from ClearPoint

    • Fernando Montenegro |
    • 0 step |
    • 3 minutes
    Start by logging into ClearPoint Strategy at [app.clearpointstrategy.com/#/home](http://app.clearpointstrategy.com/#/home)

    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](https://www.w3schools.com/tags/tag_iframe.asp).\ \ 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**
    This Scribe is in tip-top shape!Leave feedback if there are any issues with this Scribe