ExtJS + Sparkline

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://omnipotent.net/jquery.sparkline/2.1.1/jquery.sparkline.min.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">
<div id="autoUpdateGrid"></div>

CSS

.jqstooltip {
    box-sizing: content-box;
    height: auto !important;
    width: auto !important;
}
.custom-col {
    padding-left: 20px;
}

JavaScript

/**
 * @class Ext.ux.column.Sparkline
 * @author Tim Vasil <[email protected]>
 * 
 * Column to render sparklines via jQuery's Sparkline library (http://omnipotent.net/jquery.sparkline).
 *
 * For the best experience with this extension:
 * 
 * 1) See the "manualUpdate" property for information on preventing flicker during dynamic updates.
 * 2) Add a CSS style to ensure the tooltip is sized correctly by overriding incompatible Ext JS sizing:
 *    <pre>
 *    .jqstooltip {
 *       box-sizing: content-box;
 *       height: auto !important;
 *       width: auto !important;
 *    }
 *    </pre> 
 * 
 * MIT open source license
 */
Ext.define('Ext.ux.column.Sparkline', {
    extend: 'Ext.grid.column.Column',
    alias: ['widget.sparklinecolumn'],

    /**
     * {@cfg} {Object/Object[]} sparklineConfig 
     * 
     * Sparkline configuration object, as defined by the jQuery Sparkline API to be used across
     * all rows in this column.  This property is optional.
     * 
     * The config object is passed into the $.sparkline method to draw the sparkline.  If you specify an array of objects,
     * they're treated as composite configs and the charts are laid out on top of each other; you
     * can use this to create a multi-series sparkline.  As noted in the Sparkline documentation,
     * you may wish to set common min/max values across charts.  As a convenience, this implementation 
     * will automatically set the "composite" property to true for you on the subsequent configs in the array.
     * 
     * The special "dataIndex" property of the sparklineConfig object indicates the property
     * of the record to obtain the array of values for the chart.  If not specified, the dataIndex property
     * of the column is sued.
     * 
     * If you'd prefer to configure each cell's sparkline differently, leave sparklineConfig
     * undefined and set dataIndex to the property name in your model with values in this format:
     * <pre>
     * {
     *     config: {...