Add to a Grid

Building on the Quick Start example, you can replace the SparkLine with a Grid containing a number of wijsparklines using the wijgrid columns object's cellFormatter function.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which appends SparkLine widgets to the third, fourth, and fifth columns using the cellFormatter function.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijsparkline", "wijmo.wijgrid"], function () { $(document).ready(function () { var gridData = [{ year: 2008, totalSales: 2019802, sales: [95, 87, 103, 75, 91, 66, 112, 90, 83, 65, 99, 87], profit: [12, 5, 23, 0, 8, -10, 30, 7, -3, -13, 14, 6], share: [0.72, 0.75, 0.83, 0.74, 0.81, 0.64, 0.63, 0.79, 0.88, 0.61, 0.64, 0.76] }, { year: 2009, totalSales: 1865424, sales: [69, 76, 82, 92, 120, 102, 110, 95, 88, 75, 96, 107], profit: [-15, -6, 3, 12, 27, 12, 19, 8, 4, -7, 3, 12], share: [0.62, 0.85, 0.81, 0.77, 0.69, 0.74, 0.68, 0.71, 0.78, 0.81, 0.74, 0.86] }, { year: 2010, totalSales: 3006589, sales: [75, 87, 92, 74, 89, 69, 101, 92, 97, 85, 94, 112], profit: [0, 12, 18, -1, 7, -12, 23, 17, 19, 5, 15, 25], share: [0.77, 0.63, 0.71, 0.87, 0.79, 0.67, 0.78, 0.71, 0.87, 0.91, 0.74, 0.81] }, { year: 2011, totalSales: 2662158, sales: [88, 87, 106, 95, 91, 78, 124, 108, 93, 85, 103, 85], profit: [7, 5, 25, 12, 10, -5, 35, 29, -3, -10, 14, 4], share: [0.73, 0.73, 0.78, 0.69, 0.87, 0.80, 0.88, 0.76, 0.77, 0.83, 0.71, 0.85] }, { year: 2012, totalSales: 3165412, sales: [86, 97, 112, 75, 81, 63, 89, 94, 83, 77, 120, 103], profit: [3, 15, 33, -15, -3, -20, 4, 12, 0, -3, 28, 19], share: [0.79, 0.75, 0.83, 0.69, 0.77, 0.82, 0.68, 0.73, 0.74, 0.86, 0.73, 0.75] }, { year: 2013, totalSales: 3326566, sales: [105, 107, 103, 95, 111, 86, 123, 135, 101, 95, 91, 117], profit: [22, 25, 20, 12, 27, 6, 32, 39, 19, 13, 9, 26], share: [0.82, 0.85, 0.73, 0.67, 0.79, 0.80, 0.78, 0.83, 0.74, 0.89, 0.83, 0.78] }]; $("#sparklineInGrid").wijgrid({ selectionMode: "none", highlightOnHover: false, data: gridData, columnsAutogenerationMode: "none", columns: [ { dataKey: "year", headerText: "Year", textAlignment: "center" }, { dataKey: "totalSales", headerText: "Totals", dataType: "currency", dataFormatString: "c0" }, { dataKey: "sales", headerText: "Sales", cellFormatter: function (args) { if (args.row.type & $.wijmo.wijgrid.rowType.data) { var salesSparkline = $("<div></div>") .css({ height: 40, width: 200 }); args.$container.empty() .append(salesSparkline); salesSparkline.wijsparkline({ data: args.row.data.sales }); return true; } } }, { dataKey: "profit", headerText: "Profit", cellFormatter: function (args) { if (args.row.type & $.wijmo.wijgrid.rowType.data) { var profitSparkline = $("<div></div>") .css({ height: 40, width: 200 }); args.$container.empty() .append(profitSparkline); profitSparkline.wijsparkline({ type: "column", valueAxis: true, data: args.row.data.profit }); return true; } } }, { dataKey: "share", headerText: "Share", cellFormatter: function (args) { if (args.row.type & $.wijmo.wijgrid.rowType.data) { var profitSparkline = $("<div></div>") .css({ height: 40, width: 200 }); args.$container.empty() .append(profitSparkline); profitSparkline.wijsparkline({ type: "area", data: args.row.data.share }); return true; } } }] }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijsparkline", "wijmo.wijgrid"], function () {
$(document).ready(function () {
    var gridData = [{
        year: 2008,
        totalSales: 2019802,
        sales: [95, 87, 103, 75, 91, 66, 112, 90, 83, 65, 99, 87],
        profit: [12, 5, 23, 0, 8, -10, 30, 7, -3, -13, 14, 6],
        share: [0.72, 0.75, 0.83, 0.74, 0.81, 0.64, 0.63, 0.79, 0.88, 0.61, 0.64, 0.76]
    },
    {
        year: 2009,
        totalSales: 1865424,
        sales: [69, 76, 82, 92, 120, 102, 110, 95, 88, 75, 96, 107],
        profit: [-15, -6, 3, 12, 27, 12, 19, 8, 4, -7, 3, 12],
        share: [0.62, 0.85, 0.81, 0.77, 0.69, 0.74, 0.68, 0.71, 0.78, 0.81, 0.74, 0.86]
    },
    {
        year: 2010,
        totalSales: 3006589,
        sales: [75, 87, 92, 74, 89, 69, 101, 92, 97, 85, 94, 112],
        profit: [0, 12, 18, -1, 7, -12, 23, 17, 19, 5, 15, 25],
        share: [0.77, 0.63, 0.71, 0.87, 0.79, 0.67, 0.78, 0.71, 0.87, 0.91, 0.74, 0.81]
    },
    {
        year: 2011,
        totalSales: 2662158,
        sales: [88, 87, 106, 95, 91, 78, 124, 108, 93, 85, 103, 85],
        profit: [7, 5, 25, 12, 10, -5, 35, 29, -3, -10, 14, 4],
        share: [0.73, 0.73, 0.78, 0.69, 0.87, 0.80, 0.88, 0.76, 0.77, 0.83, 0.71, 0.85]
    },
    {
        year: 2012,
        totalSales: 3165412,
        sales: [86, 97, 112, 75, 81, 63, 89, 94, 83, 77, 120, 103],
        profit: [3, 15, 33, -15, -3, -20, 4, 12, 0, -3, 28, 19],
        share: [0.79, 0.75, 0.83, 0.69, 0.77, 0.82, 0.68, 0.73, 0.74, 0.86, 0.73, 0.75]
    },
    {
        year: 2013,
        totalSales: 3326566,
        sales: [105, 107, 103, 95, 111, 86, 123, 135, 101, 95, 91, 117],
        profit: [22, 25, 20, 12, 27, 6, 32, 39, 19, 13, 9, 26],
        share: [0.82, 0.85, 0.73, 0.67, 0.79, 0.80, 0.78, 0.83, 0.74, 0.89, 0.83, 0.78]
    }];
    $("#sparklineInGrid").wijgrid({
        selectionMode: "none",
        highlightOnHover: false,
        data: gridData,
        columnsAutogenerationMode: "none",
        columns: [
            { dataKey: "year", headerText: "Year",  textAlignment: "center" },
            { dataKey: "totalSales", headerText: "Totals", dataType: "currency", dataFormatString: "c0" },
            {
                dataKey: "sales", headerText: "Sales", 
                cellFormatter: function (args) {
                    if (args.row.type & $.wijmo.wijgrid.rowType.data) {
                        var salesSparkline = $("<div></div>")
                            .css({
                                height: 40,
                                width: 200
                            });
                        args.$container.empty()
                            .append(salesSparkline);
                        salesSparkline.wijsparkline({
                            data: args.row.data.sales
                        });
                        return true;
                    }
                }
            },
            {
                dataKey: "profit", headerText: "Profit", 
                cellFormatter: function (args) {
                    if (args.row.type & $.wijmo.wijgrid.rowType.data) {
                        var profitSparkline = $("<div></div>")
                            .css({
                                height: 40,
                                width: 200
                            });
                        args.$container.empty()
                            .append(profitSparkline);
                        profitSparkline.wijsparkline({
                            type: "column",
                            valueAxis: true,
                            data: args.row.data.profit
                        });
                        return true;
                    }
                }
            },
            {
                dataKey: "share", headerText: "Share",
                cellFormatter: function (args) {
                    if (args.row.type & $.wijmo.wijgrid.rowType.data) {
                        var profitSparkline = $("<div></div>")
                            .css({
                                height: 40,
                                width: 200
                            });
                    args.$container.empty()
                        .append(profitSparkline);
                    profitSparkline.wijsparkline({
                        type: "area",
                        data: args.row.data.share
                    });
                    return true;
                }
            }
        }]
    });
});
});
</script>

In the <body> section of your HTML file, the <div> tag is changed to a <table> to create the grid widget.
Markup
Copy Code
<table id="sparklineInGrid" />
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with multiple sparklines in the last three columns of the grid.

Markup	Copy Code
<table id="sparklineInGrid" />

Widgets

Grid

SparkLine