Add to Grid

You can replace the wijsparkline widget with a wijgrid containing a number of wijsparklines, using the wijgrid columns object's cellFormatter function.

In Source View

Complete the following steps:

Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following reference within the <head></head> tags:

                        
    <!--RequireJs-->
    <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
    <script type="text/javascript">
        requirejs.config({
            baseUrl: "http://cdn.wijmo.com/amd-js/3.20143.59",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
        });
    </script>

Add the following script between the <head></head> tags to append wijsparkline widgets to the third, fourth, and fifth columns, using the cellFormatter function.

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

Add the following markup within the <<body></body> tags of the page, just after @RenderBody() to create the wijgrid widget.
```
<table id="sparklineInGrid" />
```
Press F5 to run the project.

What You've Accomplished

The wijgrid will appear as shown in the image below, with multiple sparklines in the last three columns of the grid: