Sparkline in Hierarchical Grid 13.2

HTML5 Canvas based Sparkline Chart in a jQuery Grid

by damyanpetev

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.loader.js"></script>
<h1 class='logo'>HTML5 Sparkline in a jQuery Grid</h1>

<div id="grid"></div>


<a title="Donwload your Ignite UI Free Trial now!" href="http://www.infragistics.com/products/jquery/downloads" target="_blank"><img alt="Donwload your Ignite UI Free Trial now!" src="http://media.infragistics.com/community/Release/12.2/jQuery/IgniteUI-download.jpg"></a>

CSS

.ui-sparkline{
    font-family:"Segoe UI", Arial, sans-serif;
    font-size:12px;
    background: rgba(255, 255, 255, 0) !important;  
    /*Remember to disable/reduce the Sparkline default padding when inside a grid cell*/
    padding: 0px!important;
}

/* --- Unrelated sample styling --- */
 .logo {
    background-image: url('http://www.infragistics.com/uploadedImages/Content/PRODUCTS/jQuery/ignite-secondary-navigation-logo.png');
    background-repeat: no-repeat;
    padding-left: 135px;
    margin: 5px;
    vertical-align: top;
    font-size: 1.2em;
}
body {
    font-size: 0.85em;
    font-family :"Segoe UI", Verdana, Helvetica, Sans-Serif;
}

</style> <!-- as per http://doc.jsfiddle.net/use/hacks.html --> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> // from http://trentwalton.com/2013/01/16/windows-phone-8-viewport-fix/ 
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle=document.createElement("style");
    msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
    document.getElementsByTagName("head")[0]. appendChild(msViewportStyle);
}
</script> <style>

JavaScript

var toolTipState = {
    content: "",
    target: null
};
var nwCustomersWithOrders;
setupData();
$.ig.loader({
    scriptPath: 'http://cdn-na.infragistics.com/jquery/20132/latest/js/',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20132/latest/css/',
    resources: "igHierarchicalGrid.Responsive.Hiding.Paging.Tooltips, igSparkline"
});

$.ig.loader(function () {
    $.extend($.ui.igPopover.prototype.options, {
        //you can override Popover defaults if needed
        direction: "top"
    });
    $('#grid').igHierarchicalGrid({
        dataSource: nwCustomersWithOrders,
        autoGenerateColumns: false,
        autoGenerateLayouts: false,
        columns: [{
            key: 'Orders',
            headerText: 'Orders',
            template: '<div class="sparky"></div>'
        }, {
            key: 'CustomerID',
            headerText: 'Customer ID'
        }, {
            key: 'CompanyName',
            headerText: 'Company Name'
        }, {
            key: 'ContactTitle',
            headerText: 'Contact Title'
        }, {
            key: 'Address',
            headerText: 'Address'
        }, {
            key: 'City',
            headerText: 'City'
        }, {
            key: 'Country',
            headerText: 'Country'
        }, {
            key: 'Phone',
            headerText: 'Phone'
        }],
        columnLayouts: [{
            autoGenerateColumns: false,
            autoGenerateLayouts: false,
            columns: [{
                key: 'OrderID',
                dataType: 'number',
                headerText: 'Order ID'
            }, {
                key: 'OrderDate',
                headerText: 'Order Date'
            }, {
                key: 'Freight',
                dataType: "number",
                headerText: 'Freight'
            }, {
                key: 'TotalItems',
                headerText: 'Total Items'
            }, {
                key: 'TotalPrice',
                headerText: 'Total Price'
           ...