<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Benchmark | Wijmo</title>

    <!-- ensure IE uses the latest version of IE (yes, yes...) -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- jQuery/Angular/Bootstrap -->
    <!--<script src="bin/Devel/external/jquery.js" type="text/javascript"></script>-->
    <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js" type="text/javascript"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>

    <!-- Wijmo 3 -->
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20171.112.min.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20171.112.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20171.112.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20171.112.min.js" type="text/javascript"></script>

    <!-- Wijmo -->
    <script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.input.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.grid.filter.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.chart.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.grid.sheet.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.angular.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles/vendor/wijmo.min.css" />

    <!--SpreadJS -->
    <script src="scripts/vendor/gc.spread.sheets.all.10.1.0.min.js"></script>
    <script src="scripts/vendor/gc.spread.sheets.migration.10.1.0.min.js"></script>
    <script src="scripts/vendor/angular.gc.spread.sheets.10.1.0.min.js"></script>
    <link href="styles/gc.spread.sheets.10.1.0.css" rel="stylesheet" />

    <!-- UIGrid -->
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" /> 
    <script type="text/javascript" src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
    
    <!-- ngGrid -->
    <link rel="stylesheet" type="text/css" href="styles/ng-grid.min.css" /> 
    <script type="text/javascript" src="scripts/vendor/ng-grid-2.0.7.debug.js"></script>

    <!-- slickGrid -->
    <link rel="stylesheet" type="text/css" href="styles/slick.grid.css" /> 
    <link rel="stylesheet" type="text/css" href="styles/slick-default-theme.css" /> 
    <script type="text/javascript" src="scripts/vendor/jquery.event.drag.js"></script>
    <script type="text/javascript" src="scripts/vendor/slick.core.js"></script>
    <script type="text/javascript" src="scripts/vendor/slick.editors.js"></script>
    <script type="text/javascript" src="scripts/vendor/slick.grid.js"></script>

    <!-- kendo grid -->
    <link href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js" type="text/javascript"></script>

    <!-- Infragistics grid/chart -->
    <script src="scripts/vendor/infragistics.js"></script>
    <link href="styles/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="styles/infragistics.css" rel="stylesheet" type="text/css" />

    <!-- high charts -->
    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>

    <!-- flot charts -->
    <script src="scripts/vendor/jQuery.flot.js" type="text/javascript"></script>

    <!-- Google charts -->
    <script src="https://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart' ] });
    </script>

    <!-- app scripts and styles -->
    <script src="scripts/app.js" type="text/javascript"></script>
    <script src="scripts/controllers/appCtrl.js" type="text/javascript"></script>
    <script src="scripts/directives/slickDctv.js" type="text/javascript"></script>
    <script src="scripts/directives/kendoDctv.js" type="text/javascript"></script>
    <script src="scripts/directives/igDctv.js" type="text/javascript"></script>
    <script src="scripts/directives/highChartsDctv.js" type="text/javascript"></script>
    <script src="scripts/directives/flotDctv.js" type="text/javascript"></script>
    <script src="scripts/directives/googleDctv.js" type="text/javascript"></script>
    <script src="scripts/directives/spreadjsDctv.js" type="text/javascript"></script>
    <link href="styles/app.css" rel="stylesheet" type="text/css" />

</head>
<body ng-app="app" ng-controller="appCtrl">

    <div class="header">
        <div class="container">
            <h1>
                <img src="resources/stopwatch.png" /> Benchmark</h1>
            <p>
                This application compares the performance of several grid and chart controls.</p>
        </div>
    </div>
    <div class="container">
        <div class="row">

            <!-- main menu -->
            <div class="col-md-3">

                <br />

                <h4>
                    Select a Grid</h4>
                <p>
                    Once you select a grid, the binding time appears next to the 
                    grid name on the list below.</p>
                <p>
                    When the data is loaded, remember to check the grid's features 
                    (such as support for the mouse wheel, keyboard selection/scrolling, 
                    clipboard, sorting, filtering, column re-ordering, etc).</p>
                <ul>
                    <li>
                        <a href="#/flexgrid">Wijmo FlexGrid</a>
                        <span class="label label-default pull-right">{{benchmark.flexgrid}}</span></li>
                    <li>
                        <a href="#/flexsheet">Wijmo FlexSheet</a>
                        <span class="label label-default pull-right">{{benchmark.flexsheet}}</span></li>
                    <li>
                        <a href="#/wijgrid">Wijmo 3 wijgrid</a>
                        <span class="label label-default pull-right">{{benchmark.wijgrid}}</span></li>
                    <li>
                        <a href="#/spreadjs">SpreadJS</a>
                        <span class="label label-default pull-right">{{benchmark.spreadjs}}</span></li>
                    <li>
                        <a href="#/slickgrid">slickGrid</a>
                        <span class="label label-default pull-right">{{benchmark.slickgrid}}</span></li>
                    <li>
                        <a href="#/kendogrid">KendoUI Grid</a>
                        <span class="label label-default pull-right">{{benchmark.kendogrid}}</span></li>
                    <li>
                        <a href="#/iggrid">igGrid</a>
                        <span class="label label-default pull-right">{{benchmark.iggrid}}</span></li>
                    <li>
                        <a href="#/nggrid">ngGrid</a>
                        <span class="label label-default pull-right">{{benchmark.nggrid}}</span></li>
                    <li>
                        <a href="#/uigrid">UI-Grid 4.0</a>
                        <span class="label label-default pull-right">{{benchmark.uigrid}}</span></li>
                </ul>

                <br />

                <h4>
                    Select a Chart</h4>
                <p>
                    Once you select a chart, the binding time appears next to the chart name in the list below.
                    (Charts are limited to a maximum of 10,000 data points).
                </p>
                <ul ng-disabled="itemCount > 5000">
                    <li>
                        <a href="#/flexchart">Wijmo FlexChart</a>
                        <span class="label label-default pull-right">{{benchmark.flexchart}}</span></li>
                    <li>
                        <a href="#/wijchart">Wijmo 3 WijLineChart</a>
                        <span class="label label-default pull-right">{{benchmark.wijchart}}</span></li>
                    <li>
                        <a href="#/highcharts">HighCharts</a>
                        <span class="label label-default pull-right">{{benchmark.highcharts}}</span></li>
                    <li>
                        <a href="#/flotcharts">FlotCharts</a>
                        <span class="label label-default pull-right">{{benchmark.flotcharts}}</span></li>
                    <li>
                        <a href="#/kendochart">KendoUI Chart</a>
                        <span class="label label-default pull-right">{{benchmark.kendochart}}</span></li>
                    <li>
                        <a href="#/igchart">igChart</a>
                        <span class="label label-default pull-right">{{benchmark.igchart}}</span></li>
                    <li>
                        <a href="#/gcharts">Google Charts</a>
                        <span class="label label-default pull-right">{{benchmark.googlecharts}}</span></li>
                </ul>

                <br />

                <!-- menus for configuring the chart -->
                <wj-menu value="itemCount" header="Item Count">
                    <wj-menu-item value="50">50</wj-menu-item>
                    <wj-menu-item value="500">500</wj-menu-item>
                    <wj-menu-item value="5000">5,000</wj-menu-item>
                    <wj-menu-item value="10000">10,000</wj-menu-item>
                    <wj-menu-item value="50000">50,000</wj-menu-item>
                    <wj-menu-item value="100000">100,000</wj-menu-item>
                    <wj-menu-item value="500000">500,000</wj-menu-item>
                    <wj-menu-item value="1000000">1,000,000</wj-menu-item>
                </wj-menu>
            </div>

            <!-- view -->
            <div class="col-md-9">
                <div ng-view></div>
            </div>
        </div>
    </div>

    <!-- Google analytics -->
    
    <script src="http://cdn.wijmo.com/wijmo.sample.toolbar.js" type="text/javascript"></script>
</body>
</html>
