Issue: How Do I embed My Charts on ____?
Hello once again! We recently received an inquiry from a customer regarding how to embed charts on sites like Medium (that don't accept the use of embedded iframes or JavaScript). This is a problem I have encountered recently when working with Medium. I actually stopped posting there because I couldn't place our charts there.
We want our charts easily accessible across to users, no matter where they will be embedding. So today, I am going to teach you how to use a cool service called Embedly to make sure your charts can be deployed in any environment!
How-To
Before we get into anything else, I am going to show you how easy it is to get a chart up and running on a site like Medium. What better way to show than gifs?
For your first step, you will need the URL of the chart you are attempting to use. In this case, we are using CodePen. Take that URL and paste it into your "Get Embed Code" bar.
Then, after you have properly copy/pasted, you can take your embed link and place it into the site of your choice. Your chart will then appear like magic!
You can now use charts on the environments of your choice! We have run through the process of how-to, now let's go over the features.
Features
Embedly has a few cool features that could help out your flow of charts as well:
-
Social sharing buttons
-
Card style layout
-
Different themes (light or dark)
-
SEO (places descriptive text into the markup of your content.)
-
API use (makes for dynamic usage with modals and othe features)
-
Responsiveness (across different device sizes)
-
Iframe option (if you don't want a card)
-
Alignment (right, left, center)
Example
Alright, you know how to use Embedly for your charts AND you know the features it offers for you! Let's show you a live example of how embedly works. It will be posted below!
Statistics on Github
A line chart showing various events on github....
API Uses
If you are so inclined, Embedly also offers some solid API features you can play around with! If you have a good number of charts available to show, you can create a chart preview. Or, you can present these charts as a modal if you want complete focus on the data being presented. There are a lot of options available!
Google Amp
Google Amp will soon probably be very important to search and user interactivity of content. iframes and JavaScript aren't supported on Google Amp pages either, but with Embedly, you can assure that your charts are being viewed. Now you won't have to limit the reaches of your charts! Here's their documentation on that to get you going.
Conclusion
Cool, the reach of your charts has now expanded! Hopefully, you will find this useful in the deployment of your charts across certain mediums. It has already proven very helpful for me!
If you have any further questions, leave a comment below! Let us know how you are using Embedly to post your charts!