BootKit home · Manual home

JQUERY SPARKLINES

This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser.
Visit the plugin page. You can use the documentation section to get to know the options that can be passed through. Each graph type will be discussed separately below.


Line charts

Line charts are the most flexible Sparklines as they can be resized with the browser and can be small or large, allowing for quick and clear data representation.

Example

With padding

195

SALES TODAY

Without padding

195

SALES TODAY

HTML

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-primary bk-fg-white">
        <div class="row bk-mg-b-15">
            <div class="col-xs-8">
                <h2 class="bk-mg-off">195</h2>
                SALES TODAY
            </div>
            <div class="col-xs-4 text-right">
                <i class="fa fa-shopping-cart fa-2x"></i>
            </div>
        </div>
        <span class="sparkline-widget-white" values="9,13,10,9,15,8,9,11,20,16,14,21,15,18,17,23,25,28,8,11,12,29"></span>
    </div>
</div>

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-danger bk-fg-white bk-pd-off">
        <div class="row bk-pd-15">
            <div class="col-xs-8">
                <h2 class="bk-mg-off">195</h2>
                SALES TODAY
            </div>
            <div class="col-xs-4 text-right">
                <i class="fa fa-shopping-cart fa-2x"></i>
            </div>
        </div>
        <div class="bk-mg-b-15">
            <span class="sparkline-widget-white" values="9,13,10,9,15,8,9,11,20,16,14,21,15,18,17,23,25,28,8,11,12,29"></span>
        </div>
    </div>
</div>

jQuery

In js/bootkit/sparklines.js there is an example function called widgetSparklineLine which takes care of line charts.
This function could serve as a starting point from where you build you own depending on your specific needs.

var spkrlWidgetLine = function(el, color, minSpotColor, maxSpotColor, highlightLineColor, fillColor, height, spotRadius) {
    el.sparkline('html', {
        defaultPixelsPerValue: 5,
        enableTagOptions: true,
        chartRangeMin   : 0,
        spotColor       : color,
        minSpotColor    : minSpotColor,
        maxSpotColor    : maxSpotColor,
        highlightLineColor : highlightLineColor,
        lineColor : color,
        fillColor : fillColor,
        width: '100%',
        height: height,
        highlightSpotColor: color,
        spotRadius: spotRadius
    });
};

Remarks:
1.) 7 custom variables can be passed through (besides the target HTML element) so that we can automate a the most important configuration options.
2.) The spkrlWhiteInit function takes care of passing through our settings to the executing function. The function is reused when the window is resized.
3.) We call the waitForFinalEvent function to make sure the Sparkline is reinitialized on window resize. This is a generic function which can take care of multiple event handlers by adding a certain timeout to keep the browser from slowing down. You can pass through a custom timeout period (250ms in this case) and a name for this specific "debouncer" must also be passed (sparkline-widget-white in this case).

!function ($) {

    $(function() {

        // function to init sparkline
        var spkrlInit = function() {
            spkrlWidgetLine(
                $(".sparkline-widget-white"),
                "#fff",
                "#fff",
                "#fff",
                "#fff",
                "",
                60,
                0
            );
        };

        // init at DOM loaded
        spkrlInit();

        // call debounced reinit on resize
        $(window).resize(function() {
            waitForFinalEvent(function() {

                // init at window resize
                spkrlInit();
            }, 250, "sparklines");
        });

    });

}(window.jQuery);

Bar charts

Bar charts can't be adjusted automatically at window resize unlike the line charts below - it's possible but there's no perfect fix which is why it is not included in this project.

The idea with bar charts is to use them as small, cute inline charts that can quickly beautify your website and present data in an orderly way without overwhealming the visitor.

Example

PAGE VIEWS
1,622,367

SHARED LINKS
5,263

DONATIONS
4,566,810

NEW CLIENTS
455

HTML

This is an example for the white-red widget above on the left; the others have very similar HTML. A different technique for passing data is used here: in stead of passing it through and attribute called "values" we include the values inside the element designated as a Sparkline.

<div class="panel bk-widget bk-bd-off bk-chrome-fix">
    <div class="panel-body bk-bg-white bk-fg-danger bk-fg-darken bk-pd-off">
        <div class="row bk-pd-10 bk-pd-off-b bk-pd-t-5">
            <div class="col-xs-7 text-left bk-vcenter">
                <div>
                    <h5>PAGE VIEWS<br><strong>1,622,367</strong></h5>
                </div>
            </div>
            <div class="col-xs-5 bk-vcenter text-right">
                <div class="bar-sparkline" sparktype="bar" sparkbarcolor="#F78852" sparkheight="30" sparkbarwidth="4" sparkbarspacing="3">
                    <!-- 28,15,40,12,13,20,17,29,10,6,11,12 -->
                </div>
            </div>
        </div>

        <hr class="bk-hr-danger bk-mg-off bk-opacity-5">

        <div class="bk-pd-l-10 bk-pd-r-10 bk-pd-t-5 bk-pd-b-5 bk-sml">
            <a href="javascript:" class="bk-fg-danger bk-fg-darken">VIEW DETAILS</a>
        </div>
    </div>
</div>

jQuery

$('.bar-sparkline').sparkline('html', {
    enableTagOptions: true,
    chartRangeMin   : 0
});

Pie charts

Example

These are great for simple but effective data representation in pie form. We can pass through an array of colors in jQuery.

PAGE VIEWS
1,622,367
20,47,33

HTML

<div class="panel bk-widget bk-bd-off bk-chrome-fix">
    <div class="panel-body bk-bg-white bk-fg-primary bk-fg-darken bk-pd-off">
        <div class="row bk-pd-10 bk-pd-off-b bk-pd-t-5">
            <div class="col-xs-7 text-left bk-vcenter">
                <div>
                    <h5>PAGE VIEWS<br><strong>1,622,367</strong></h5>
                </div>
            </div>
            <div class="col-xs-5 bk-vcenter text-right bk-pd-t-10 bk-pd-b-10">
                <span class="sparkpie">20,47,33</span>
            </div>
        </div>

        <hr class="bk-hr-primary bk-mg-off bk-opacity-5">

        <div class="bk-pd-l-10 bk-pd-r-10 bk-pd-t-5 bk-pd-b-5 bk-sml">
            <a href="javascript:" class="bk-fg-primary bk-fg-darken">VIEW DETAILS</a>
        </div>
    </div>
</div>

jQuery

$('.sparkpie').sparkline('html', {
    type: 'pie',
    height: '50px',
    sliceColors: ['#5EABF4', '#3E9BF2', '#98CAF8']
});