Ignite UI HTML5 / jQuery Sparkline chart

The lightweight Web standards-based Data-Visualization control that can increase the amount of information you can provide in limited space.

HTML

<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<h1 class='logo'>HTML5 / jQuery Sparkline chart</h1>

<label> Line with normal range (45-49) and high/low markers. Statically positioned tooltips.</label>
<div id="Spark0"></div>
<br />
<label> Area with both axes visible and horizontal labels formatted. Statically positioned tooltips.</label>
<div id="Spark1"></div>
<br />
<label> Column with default tooltip positioning and 'quinticFit' trendline</label>
<div id="Spark2"></div>
<br />
<label>  Win-Loss with vertical axis and 'exponentialAverage' trendline</label>
<div id="Spark3"></div>

CSS

/* from http://help.infragistics.com/jQuery/2013.1/ui.igsparkline#theming , active always */
.ui-sparkline {
	font-family:"Segoe UI", Arial, sans-serif;
	font-size:12px;
	background: rgba(255,255,255,0) !important;
	padding:10px 5px 10px 5px;
}

.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
}

/* "background-color", "opacity", "border-width" apply 
*   during initialization only
*/
.ui-sparkline-sparkpath {
	background:#00AADE;
	border:1.5px solid
}
.ui-sparkline-negativesparkpath {
	background:#D0284C;
	border:1px solid
}
.ui-sparkline-trendline {
	background:#555;
	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:4px solid
}
.ui-sparkline-lowmarker {
	background:#AF39FF;
	border:3px solid
}
.ui-sparkline-negativemarkers {
	background:#E5516F;
	border:3px solid
}
.ui-sparkline-range {
	background:gray;
	opacity:.2
}
/* "border-width", "border-color", "color", "font" apply */
.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;
}


/* --- 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.8em;
    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:...

JavaScript

$.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: "igSparkline"
 });

var employees = setupData();

        $.ig.loader(function () {
            // Sparkline definitions: 
            
            $("#Spark0").igSparkline({
                displayType: "line",
                dataSource: employees,
                tooltipTemplate: "First: ${First}<br> Last: ${Last}",
                valueMemberPath: "SickLeaveHours",
                labelMemberPath: "HireDate",
                height: "50px",
                width: "50%",
                normalRangeMaximum: 20,
                normalRangeMinimum: 45,
                normalRangeVisibility: "visible",
                verticalAxisVisibility: "visible",
                highMarkerVisibility: "visible",
                lowMarkerVisibility: "visible",
                horizontalAxisVisibility: "visible",
                updateTooltip: function(evt, ui) {
                    ui.text += "<br>You can also type here and modify the tooltip element via ui.element";
                }
            });

            $("#Spark1").igSparkline({
                displayType: "area",
                dataSource: employees,
                tooltipTemplate: "First: {{HireDate}}<br> Last: ${Last}",
                valueMemberPath: "VacationHours",
                labelMemberPath: "HireDate",
                height: "50px",
                width: "50%",
                normalRangeVisibility: "visible",
                verticalAxisVisibility: "visible",
                horizontalAxisVisibility: "visible",
                formatLabel : function formatFunction(val) {
                    if (typeof val === "string") {
                        val = val.split("T")[0];
                    }
                    return val;
                }
            });

            $("#Spark2").igSparkline({
          ...