Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
JavaScript
branch: master
Failed to load latest commit information.
js
.gitignore
LICENSE
README.md
ajax-loader.gif
index.html
plugin_example.html

README.md

Treehouse Charts

jQuery function that pulls the JSON points data from your Team Treehouse profile and then uses circle.js (https://github.com/Whyounes/circle) and adds them to the DOM.

See the demo with documentation Demo Page

Usage

  1. Include jQuery (Included in js/lib (For Quick Testing))
  2. Include cirle.min.js (Included)
  3. Include the plug-in (treehouse.js)
  4. Call the plug-in (Example below)

See index.html example.

Browser support

The library use the canvas element, you can check the support on caniuse

Licence

Circle.js is licensed under the terms of the MIT License.
treehouse.js is licensed under the terms of the MIT License.

The Code

The HTML

<div id="yourname">
    <h1>yourname points: <b class="total"></b></h1>
    <div class="charts"></div>
</div>

The jQuery

$("#yourname .charts").treehouseCharts("yourUserName", 
    {totalSelector: "#yourname .total", c1: "#b4da55", c2: "#eeeeee", 
        radiusSize: 75, exclude: ["android", "ios", "wordpress"]}

Options

  • c1 - Primary Color (Default: #458156)
  • c1 - Secondary Color (Default: #494949)
  • widthSize - Sets the thickness of the Chart (Default: 10)
  • radiusSize - Sets the radius for the Chart (Default: 60)
  • exclude - Allows you to exlude subjects you don't take(Default: Shows All Charts)

Contributor(s)

Andrew Chalkley @chalkers (Tidied up code and turned it into the plug-in).

Something went wrong with that request. Please try again.