Available in the Full Version

Sparkline - API and Events

The buttons and the viewer below them showcase some of igSparkline's methods and events.
API Explorer
$("#sparkline").igSparkline("addItem", item);
$("#sparkline").igSparkline("removeItem", 0);
API Viewer
igsparklinedatabound
igsparklinedatabinding

This sample is designed for a larger screen size.

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

Initially, the databinding and databound events fire; you can see the results of the addItem and removeItem methods by clicking the corresponding buttons.

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

    <!-- Used to style the API Viewer and Explorer UI -->
    <link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />

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

    <!-- Used to add markup and provide logging 
        functionality for the API Explorer and API Viewer UI -->
    <script src="/js/apiviewer.js"></script>
</head>
<body>
    <!-- File supplying the northwindInvoices object for the igSparkline data source -->
    <script src="/data-files/nw-invoices.js"></script>

	<!-- Target element for the igSparkline -->
	<div id="sparkline"></div>

    <!-- Begin: API UI -->
    <div class="api-explorer">
        <button id="btnAddData">Add New Data Item</button><span>$("#sparkline").igSparkline("addItem", item);</span><br />
        <button id="btnRemoveData">Remove First Data Item</button><span>$("#sparkline").igSparkline("removeItem", 0);</span><br />
    </div>

    <div class="api-viewer"></div>
    <!-- End: API UI -->

    <script>

        $(function () {

            // Used to show output in the API Viewer at runtime, 
            // defined in external script 'apiviewer.js'           
            var apiViewer = new $.ig.apiViewer();


            /*----------------- Method & Option Examples -------------------------*/

            // Add New Data Item button click handler
            $("#btnAddData").click(function (e) {

                var rnd = Math.floor(Math.random() * 2501);
                var item = { OrderDate: new Date(), ExtendedPrice: rnd };

                $("#sparkline").igSparkline("addItem", item);

                apiViewer.log("Item Added [Value: " + rnd + " ]");
            });

            // Remove First Data Item button click handler
            $("#btnRemoveData").click(function (e) {

                var removedData = $("#sparkline").igSparkline("getDataItem", 0);                

                $("#sparkline").igSparkline("removeItem", 0);

                if (removedData) {
                    removedData = removedData.ExtendedPrice;
                    apiViewer.log("Item Removed [Value: " + removedData + " ]");
                }
            });


            /*----------------- Event Examples -------------------------*/

            $("#sparkline").on("igsparklinedatabinding", function (e, ui) {
                // ** REMOVE ** log event data here, show output at runtime using 
                apiViewer.log("igsparklinedatabinding");
            });

            $("#sparkline").on("igsparklinedatabound", function (e, ui) {
                // ** REMOVE ** log event data here, show output at runtime using 
                apiViewer.log("igsparklinedatabound");
            });


            /*----------------- Instantiation -------------------------*/

            $("#sparkline").igSparkline({
                dataSource: northwindInvoices,
                height: "100px",
                width: "100%",
                valueMemberPath: 'ExtendedPrice',
                labelMemberPath: 'OrderDate'
            });

        });

    </script>
</body>
</html>