Available in the Full Version

Javascript Excel - Worksheet Charts

This sample demonstrates how to create charts within a worksheet using the Infragistics Excel Engine.
ExpensesJanFebMarAprMayJunJulAugSepOctNovDec
Expense 1137256374295234390370190350262337286
Expense 2388328169194227279269358170309212218
Expense 3368312332280268139311131159193338166
Expense 4256148225116124151115300389220126393
Expense 5282321343210178311255332217148152234


This sample is designed for a larger screen size.

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

Code View

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

<head>
    <title></title>

    <style>
        .right {
            float: right;
        }

        #exportButton {
            float: left;
        }
    </style>

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

    <!--Required scripts-->    
    <script src="https://igniteui.com/js/modernizr.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

    <!-- External files for exporting -->

    <script src="https://www.igniteui.com/js/external/Blob.js"></script>

    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
	<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
	<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>
	<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.excel-bundled.js"></script>
	<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.spreadsheet-bundled.js"></script>	

    <script type="text/javascript" src="/data-files/expense-data.js"></script>
    <script src="https://www.igniteui.com/js/external/FileSaver.js"></script>
</head>

<body>
    
    <div id="chart">        
    </div>

    <div id="grid">        
    </div>
	
	<br />
    <button id="exportButton" onclick="createWorkbook()">Create File</button>
    <br />    


    <script type="text/javascript">

        var alphabet = "A;B;C;D;E;F;G;H;I;J;K;L;M;N;O;P;Q;R;S;T;U;V;W;X;Y;Z".split(";");
        var headers = "Expenses;Jan;Feb;Mar;Apr;May;Jun;Jul;Aug;Sep;Oct;Nov;Dec".split(";");
        var months = "Jan;Feb;Mar;Apr;May;Jun;Jul;Aug;Sep;Oct;Nov;Dec".split(';');

        var data = getGridData();
        var chartData = getChartData(data, months);

        $(function(){
            $("#chart").igCategoryChart({
                width: "800px",
                height: "400px",
                dataSource: chartData,
                yAxisMinimumValue: 0
            });

            $("#grid").igGrid({
                dataSource: data,
                width: "800px",
                height: "300px"
            });
        });

        function createWorkbook() {

            var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
            var sheet = workbook.worksheets().add("Sheet1");
            sheet.defaultColumnWidth(200 * 20);
    
            for (var i = 0; i < headers.length; i++) {
                var cell = sheet.getCell(alphabet[i] + "3");
                cell.value(headers[i]);
            }

            for (var i = 0; i < data.length; i++) {
                for (var j = 0; j < 13; j++) {

                    var stringAddress = alphabet[j] + (i + 4).toString();
                    var cell = sheet.getCell(stringAddress);

                    switch (j) {
                        case 0: {
                            cell.value(data[i].Expenses);
                            break;
                        }
                        case 1: {
                            cell.value(data[i].Jan);
                            break;
                        }
                        case 2: {
                            cell.value(data[i].Feb);
                            break;
                        }
                        case 3: {
                            cell.value(data[i].Mar);
                            break;
                        }
                        case 4: {
                            cell.value(data[i].Apr);
                            break;
                        }
                        case 5: {
                            cell.value(data[i].May);
                            break;
                        }
                        case 6: {
                            cell.value(data[i].Jun);
                            break;
                        }
                        case 7: {
                            cell.value(data[i].Jul);
                            break;
                        }
                        case 8: {
                            cell.value(data[i].Aug);
                            break;
                        }
                        case 9: {
                            cell.value(data[i].Sep);
                            break;
                        }
                        case 10: {
                            cell.value(data[i].Oct);
                            break;
                        }
                        case 11: {
                            cell.value(data[i].Nov);
                            break;
                        }
                        case 12: {
                            cell.value(data[i].Dec);
                            break;
                        }
                    }
                }
            }

            sheet.rows(0).height(5000);

            var cell1 = sheet.getCell('A1');
            var cell2 = sheet.getCell('M1');

            var chart = sheet.shapes().addChart($ig.excel.ChartType.columnClustered, cell1, { x: 0, y: 0 }, cell2, { x: 100, y: 100 });
            chart.setSourceData('Sheet1!B3:M8', true);

            saveWorkbook(workbook, "Table.xlsx");
        }

        function saveWorkbook(workbook, name) {
            workbook.save({ type: 'blob' }, function (data) {
                saveAs(data, name);
            }, function (error) {
                alert('Error exporting: ' + error);
            });
        }        
    </script>
</body>

</html>