Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Allan Clark
Allan Clark
10,810 Points

How can I embed TreeHouse profile on personal webpage?

I tried using an <iframe> but it doesn't display at all. I'd like a condensed version of my TreeHouse profile. At the very least have the points and pie graph, if not my languages as well.

<iframe width="300"height="300" src="https://teamtreehouse.com/allanclark2">
</iframe>

This just gives me a white frame. Would I need php here maybe? Or another type of tag? Is it not possible? Any info would be much appreciated.

Allan Clark
Allan Clark
10,810 Points

Thats perfect dude! I would give you points if it let me.

Samuel Webb
Samuel Webb
25,370 Points

If you have any questions about using that, I'd be glad to help.

3 Answers

Samuel Webb
Samuel Webb
25,370 Points

I'm not sure how to embed a website into your website, but if you want to easily be able to access the information contained in your profile, feel free to check out a javascript plugin I made for that:

http://salexzee.github.io/getTreeJSON/

Treehouse has their own API that will return your profile in JSON format, just by adding .json to the end of your profile URL: https://teamtreehouse.com/allanclark2.json

It might be a bit overkill for what you're doing, but you could always learn to use D3.js and then generate your own pie chart: D3.js

Otherwise any number of other front-end frameworks would be able to achieve something similar with a bit of work, math and design magic.

You're essentially mapping the proportion of points in each topic vs. the total number of points to the relative number of degrees in the circle, which you would then 'draw' with either SVG or a canvas element. The idea is relatively simple, but using a JS framework or library certainly makes things easier!

Ken Alger
STAFF
Ken Alger
Treehouse Teacher

Allan;

Another Treehouse user generated a pie chart report based off the user data. See comments below.

Happy coding,

Ken

[edited to remove redundant information after locating the link in the below comment]

Ken Alger
Ken Alger
Treehouse Teacher

Check out the comments by Ethan Neff and his codepen.io link on this forum post.