Borderchart

jQuery Charting Plugin. You supply the data and borderchart builds a chart in the form of a colored border around your html element.

Download .zip Download .tar.gz View on GitHub

Get Started

Invoke A Default border chart on an image element:

HTML:

<img class="borderchart" src="examples/profile.jpg" style="height:150px;width:220px">

Javascript:

$(function() {
    $('.borderchart').borderchart();
 });

Data Labels

This border chart has labels that appear when you hover over them. The labels can be passed into borderchart via the dataset option

Note: The content within the border chart can be any html that you'd like

Instantiation of this chart is as follows:

$('.labeledborderchart').borderchart({
  dataset: [{
            data: 10,
            color: '#2c3969',
            label: 'Dark Blue'
        }, {
            data: 10,
            color: '#415989',
            label: 'Blue'
        }, {
            data: 10,
            color: '#a4bfd2',
            label: 'Light Blue'
        }, {
            data: 10,
            color: '#a4c892',
            label: 'Olive'
        }, {
            data: 10,
            color: '#bce0ae',
            label: 'Light Green'
        }, {
            data: 10,
            color: '#ffac29',
            label: 'Orange'
        }, {
            data: 10,
            color: '#edf0f2',
            label: 'White'
        }, {
            data: 10,
            color: '#f2e8da',
            label: 'Tan'
        }, {
            data: 10,
            color: '#c6beb4',
            label: 'Gray'
        }, {
            data: 10,
            color: '#e74e34',
            label: 'Red'
        }],
        strokewidth:25
    });