Introduction: Embedding Interactive Graphs in Blogs and Websites
This Instructable will show you how create and publish beautiful and free interactive graphs in your website or blog.
Step 1: Create a Plotly Account
To get started you will need a plotly account. In addition to providing access to the graphing tool, a plotly account allows you to save all the data and graphs you ever import or create in a personal online folder. Go to https://plot.ly/ in your web browser. In the top right corner you will see a sign up button. You should enter a username and password and save these for later use.
Step 2: Import or Input the Data You Want to Graph
Signing in will take you to your datawell. From here you can import data or input your own data.
Select import if you have a data set to import. This will let you navigate your actual and virtual drives to find the your dataset. (excel, csv, json, xml, matlab, zip, tar, access database files). You can also click on the sample data if you have no data set and want to use ours. You may also select New (then select table) if you would like to input your own data.
For the purpose of this exercise lets create our own simple data set. Click on New and select table.
Step 3: Enter Your Data - Copying and Pasting From Wikipedia
Lets get some data we can enter into our spreadsheet. You can copy and paste directly from the internet into your table. Keeping plotly open, open a new browser window. Lets go to Wikipedia and copy the Baseball single season home run record table there.
Highlight the table as seen above. Copy the data. Then return to your plotly table and paste it in.
Step 4: Make a Graph
With the data in place in the spreadsheet we can make our graph. Lets make a Bar Graph.
Click on Make a Chart and select Bar Chart
Notice that Babe Ruth appears 4 times in the data. For this type of graph we will need to make sure each "Babe Ruth" is treated as a unique bar in the bar chart. So we will put a 1, 2, 3 and 4 after each of the Babe Ruth entries.
Define your x axis by clicking on the x square above the "Batter" column
Define your y axis variable by clicking on the y square above the "HR" column
Click on the "Bar chart" button and your graph will magically appear!
Step 5: Edit Your Graph
You can now edit the graph to your liking. You should put a title on it and perhaps label the y axis.
You will need to know the height and width of your graph for later. Click on the layout button and set the height and width as needed (or just keep the default if you like). Be sure to write these down you need them in step 7.
The rest is optional but you will find a very powerful set of tools to format and manipulate the graph in Traces, Layout, Axis, Notes, and Legend.
Don't forget to save your finished graph.
Step 6: Share Your Graph
Select "Share" in the upper right hand side of the screen.
Select the "Public" radio button and copy (Ctrl-C) the URL. Then click "Save". The graph can now be viewed by anyone on the internet with the URL.
Step 7: Embed Graph in Webpage With Iframe
Insert the code above into your the HTML of your webpage where you would have otherwise included your image file. You will need to insert the URL of the shared graph, the height and width of your graph into the appropriate highlighted area in the code.
Save the HTML file.
You now have an embedded interactive graph on you webpage that can be forked, opened and manipulated by your readers. This code will also allow you to create a user gallery of all of the user generated graphs that are made with the source data for your graph that you can also show in your blog.
This gallery can be customized on plotly and will look something like this.
Enjoy and happy embedding!!
Participated in the
7 years ago on Step 7
#iframe src="INSET COPIED URL FROM STEP 6 HERE" width="SET TO GRAPH WIDTH" height="SET TO GRAPH HEIGHT" seamless="seamless" scrolling="no"></frame>/
Just replace the first "#" to "<"
8 years ago on Step 7
Is there a way to embed html and css code?