Available in the Full Version

Sparkline - Grid Integration

This sample demonstrates binding certain data of a grid to an igSparkline chart.
CompanyContactContact TitleOrder History
Alfreds FutterkisteMaria AndersSales Representative
Ana Trujillo Emparedados y heladosAna TrujilloOwner
Antonio Moreno TaqueríaAntonio MorenoOwner
Around the HornThomas HardySales Representative
Berglunds snabbköpChristina BerglundOrder Administrator
Blauer See DelikatessenHanna MoosSales Representative
Blondesddsl père et filsFrédérique CiteauxMarketing Manager
Bólido Comidas preparadasMartín SommerOwner
Bon app'Laurence LebihanOwner
Bottom-Dollar MarketsElizabeth LincolnAccounting Manager
B's BeveragesVictoria AshworthSales Representative

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This allows the user to visually analyze the grid data.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>

    <!-- Target element for the igGrid -->   
    <table id="grid"></table>

    <!-- File supplying the northwindInvoices object for the igSparkline data source -->
    <script src="/data-files/nw-customers-with-orders.js"></script>

    <script>

        $(function () {

            $("#grid").igGrid({
                dataSource: nwCustomersWithOrders,
                autoGenerateColumns: false,
                height: "400px",
                rowsRendered: function (evt, ui) {
						 //get data collection
						 var dataSource = ui.owner.dataSource;
						 $(".order-sparkline").each(function(i) {                    
							  $(this).igSparkline({
									dataSource: dataSource.findRecordByKey(
										 $(this).data("id")).Orders,
									height: "24px",
									width: "100%",
									valueMemberPath: 'TotalPrice'
							  })
							  .css("background-color", "transparent");
						 });
                },
                primaryKey: "ID",
                columns: [
                    { key: "ID", hidden: true },
                    { key: "CompanyName", headerText: "Company" },
                    { key: "ContactName", headerText: "Contact" },
                    { key: "ContactTitle", headerText: "Contact Title" },
                    { key: "Orders", headerText: "Order History", template: "<div data-id='${ID}' class='order-sparkline'></div>" }
                ]
            });

        });
    </script>

</body>
</html>