Sparkline in Hierarchical Grid

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/20131/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

/* Sparkline styles */
.ui-sparkline{
    font-family:"Segoe UI", Arial, sans-serif;
    font-size:12px;
    background: rgba(255, 255, 255, 0) !important;
}
.ui-sparkline-tooltip {
    -moz-box-shadow:0 0 2px #555;
    -webkit-box-shadow:0 0 2px #555;
    box-shadow:0 0 2px #555;
    padding:3px
}
.ui-sparkline-sparkpath {
    background:#00AADE;
    border:1px solid
}
.ui-sparkline-negativesparkpath {
    background:#D0284C;
    border:1px solid
}
.ui-sparkline-trendline {
    background:#054D99;
    border:2px solid
}
.ui-sparkline-markers {
    background:#36C0F3;
    border:3px solid
}
.ui-sparkline-firstmarker {
    background:#19994F;
    border:5px solid
}
.ui-sparkline-lastmarker {
    background:#FCB025;
    border:5px solid
}
.ui-sparkline-highmarker {
    background:#BFE107;
    border:3px solid
}
.ui-sparkline-lowmarker {
    background:#AF39FF;
    border:3px solid
}
.ui-sparkline-negativemarkers {
    background:#E5516F;
    border:3px solid
}
.ui-sparkline-range {
    background:gray;
    opacity:.2
}
.ui-sparkline-axis-x {
    font-family:"Segoe UI", Arial, sans-serif;
    border:2px solid #989EA3;
    color:#4B4B4D
}
.ui-sparkline-axis-y {
    font-family:"Segoe UI", Arial, sans-serif;
    border:2px solid #989EA3;
    color:#4B4B4D;
    text-align:right
}
/* --- 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;
}
button {
    text-decoration: none;
    line-height: 1.5em;
    background-color: #ACACAC;
    color: #fff;
    border: none;
}
button:hover {
    background-color: #007FAF;
}
button:active {
    background-color: #00AEEF;
}
</style> <!-- as per http://doc.jsfiddle.net/use/hacks.html --> <meta...

JavaScript

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

$.ig.loader(function () {
    $('#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'
            }],
            key: 'Orders',
            foreignKey: 'CustomerID',
            primaryKey: 'OrderID'
        }],
 ...