MVC5 Classic
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:

  1. Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.
  2. 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>
    
  3. 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>
    

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

  5. 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:

 

 

 


Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback