Available in the Full Version

Javascript Excel - Working With Sparklines

This sample demonstrates the Excel Engine's sparkline support.

Line

Column

This sample is designed for a larger screen size.

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

This sample demonstrates the Excel Engine's sparkline support.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Working with Sparklines</title>

	<!--<meta http-equiv="x-ua-compatible" content="IE=9">-->
	<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.lob.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.excel-bundled.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.spreadsheet-bundled.js"></script>

	<!-- saving worksheet -->
	<script src="https://www.igniteui.com/js/external/FileSaver.js"></script>

</head>
<body>
    <style>
		.sl-layout-container {
			margin: 0px 20px 10px 0px;
			width: 15%;
			float: left;
		}
		@media screen and (max-width: 500px) {
			.sl-layout-container {
				width: 80%;
				min-width: 200px;
			}
		}
		
    </style>
	
    <!-- Target elements for the igSparklines -->
	<div>
		
		
		<div class="sl-layout-container">
			<p>Line</p>        
			<div id="lineSparkline"></div>
			<p>Column</p>        
			<div id="columnSparkline"></div>	
			<p><div>
			<input class="spreadsheet-sample-btn" id="createWorkbookBtn" type="button" value="Generate Workbook" onclick="createWorkbook()">	
			</p></div>
		</div>
		
	</div>

    <script>
		
		var data = [4, 5, 2, 7, -1, 3, 0, 5, 2, 6]

        $(function () {

		
            $("#lineSparkline").igSparkline({
                dataSource: data,
                displayType: "line",
                height: "100px",
                width: "100%", 
				brush: "#376092",				
            });

            $("#columnSparkline").igSparkline({
                dataSource: data,
                displayType: "column",
                height: "100px",
                width: "100%",  
				brush: "#376092",				
            });
			
        });
		
		function createWorkbook() {

            var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
            var sheet1 = workbook.worksheets().add('Sparklines');
			var sheet2 = workbook.worksheets().add('Data');
			sheet1.columns(0).width(10000);							
			sheet1.rows(0).height(3000);
			sheet1.rows(1).height(3000);
            var letters = ["A"]
            var headers = ["Data"]
            
           
            for (var i = 0; i < letters.length; i++) {
                for (var j = 1; j < data.length + 2; j++) {
                    var str = letters[i] + (j).toString();
                    var cell = sheet2.getCell(str);
                    if (j == 1) {
                        
                        cell.value(headers[i]);
                    }
                    else {
                        if (i == 0) {
                            cell.value(data[j - 2]);
                        }
                        
                    }
                }
            }			
			
			sheet1.sparklineGroups().add($.ig.excel.SparklineType.line, "Sparklines!A1:A1", "Data!A2:A11"); 
			sheet1.sparklineGroups().add($.ig.excel.SparklineType.column, "Sparklines!A2:A2", "Data!A2:A11"); 
			
			saveWorkbook(workbook, "Sparklines.xlsx");			
		}
				
		function saveWorkbook(workbook, name) {
            workbook.save({ type: 'blob' }, function (data) {
                saveAs(data, name);
            }, function (error) {
                alert('Error exporting: : ' + error);
            });
        }		
		
    </script>

</body>
</html>