The DataHero Blog

Embedding DataHero Charts Into Your Website

July 31st, 2018

DataHero is known for its incredibly quick and easy way of creating charts, reports, and dashboards from your data across dozens of popular cloud services. Many of our customers rely on us to create dashboards that they share with clients and teams to stay on top of key metrics like sales trends, marketing spend, or customer service team performance. But did you know you can also create embeddable charts that you can add to any website, blog, or wiki?

 

DataHero now makes it even easier to share your data insights by creating embeddable charts that are dynamic, interactive, and always up-to-date with your synced data. Notice how in the above embedded chart, you can mouse over and see all the dynamic attributes of the data, directly embedded into the page. Let’s see how this is done.

Creating Your Chart

 

datahero-share

 

In this example, we’ve gone ahead and imported in our sales data from Smartsheet, and combined it with our Annual Sales Conference data stored in Google Sheets. We then created a chart showing the potential revenue of sales prospects attending our Annual Marketing Conference broke down by type of Attendee, and we segmented that across our Sales Team to get a sense for how each individual salesperson was driving prospects to the annual conference.

Enable Sharing For Your Chart

 

Once we created our chart, we can simply click on the ‘SHARE’ button in the top middle of the screen, which will bring up a modal to enable sharing. By clicking ‘ENABLE SHARING’, we’ll then be able to navigate to the ‘Embed’ tab in order to see instructions for how to embed this chart in an external website or blog.

 

datahero-embed-screenshot

Embedding Your Chart On Your Website

 

DataHero gives you two different ways to create embeddable charts for external display. The first method is a Javascript snippet that is a piece of code you can add in your site’s code exactly where you want the chart to appear, and the code snippet will handle the rest. This method gives you more flexibility and control over how you want to display the chart, as you can also custom specify a <div> and edit the associated height and width in order to render the chart exactly the way you want.

The second method is a short iframe snippet that you can easily add to the HTML of your website or drop in the Text editor in WordPress to instantly see your chart appear embedded in your site. This second approach is often easier and well supported by third party blog tools like WordPress, where you can simply copy and paste the iframe snippet exactly where you want the chart to appear using the Text editor.

 

datahero-embed-iframe

 

And that’s it! Once you’ve added your code snippet to your site, you should be able to see a fully embedded, dynamic and interactive DataHero chart with all of your insights shareable wherever you want it.

 

By Alex Hsi

Create my Free DataHero Account

Get the fastest, easiest way to understand your data today.