config(EJ2-5374): Modified sample browser layout

README.md

@@ -0,0 +1,17 @@
+
+
+## Installing
+
+To install all dependent packages, use the below command
+
+```
+npm install
+```
+
+## Building
+
+To compile the source files, use the below command
+
+```
+npm run build
+```

config.json

@@ -0,0 +1,9 @@
+{
+    "htmllint": ["./src/**/*.html"],
+    "json": ["./**/*.json"],
+    "samplejson": ["./src/**/*sample.json"],
+    "dedupe": ["./src/**/*.js"],
+    "watchSample": ["./src/**/*.js"],
+    "jshint": ["./src/**/*.js", "!./src/**/*.min.js", "!./src/common/samplelist.js", "!./src/common/api-table-generator.js","!./src/common/search-index.js"],
+    "github": ["./src/**/*.{html,ts,json}", "./styles{,/**}", "./src/**/images{,/**}", "./src/common/lib{,/**}", "./src/common/cldr-data{,/**}", "./src/showcase{,/**}", "!./src/showcase/**/!(webpack.config)*.{js,json}", "!./styles/**/!(index)*.css", "./spec/**/*.ts", "./*.html", "./favicon.ico", "karma.conf.js", "package.json", "test-main.js", "tsconfig.json", "webpack.config.js", "!./googlec03dd4bc003151bc.html", "license"]
+}

debug.log

@@ -0,0 +1,2 @@
+[1128/175427:ERROR:tcp_listen_socket.cc(76)] Could not bind socket to 127.0.0.1:6004
+[1128/175427:ERROR:node_debugger.cc(86)] Cannot start debugger server

gulpfile.js

@@ -0,0 +1,369 @@
+var fs = require('fs');
+var glob = require('glob');
+var cheerio = require('cheerio');
+var gulp = require('gulp');
+var path = require('path');
+var shelljs = global.shelljs || require('shelljs');
+var jsoncombine = require('gulp-jsoncombine');
+var webpackGulp = require('webpack-stream');
+var webpack = require('webpack');
+var elasticlunr = require('elasticlunr');
+var runSequence = require('run-sequence');
+var sampleOrder = JSON.parse(fs.readFileSync(__dirname + '/src/common/sampleOrder.json'));
+//var localConfig = require('../../config.json');
+//var rootConfig = require(fs.realpathSync('./config.json'));
+var config =require(fs.realpathSync('./config.json'));
+
+var curDirectory = '';
+//var build = require("@syncfusion/ej2-build");
+require('./src/common/api-table-generator.js');
+var sampleList;
+
+if (fs.existsSync('./controlWiseSample.json')) {
+    sampleList = JSON.parse(fs.readFileSync('./controlWiseSample.json'));
+}
+
+gulp.task('sample-json', function () {
+    if (sampleList && sampleList.length) {
+        var controls = getControls();
+        var samplejson = glob.sync('./src/**/*sample.json', { silent: true });
+        var obj = [];
+        for (var i = 0; i < samplejson.length; i++) {
+            var samplejsonList = JSON.parse(fs.readFileSync(samplejson[i]));
+            var componentIndex = controls.indexOf(samplejsonList.name);
+            if (componentIndex != -1) {
+                obj.push(samplejsonList.directory);
+            }
+        }
+        fs.writeFileSync('./sampleList.json', JSON.stringify(obj));
+    }
+})
+
+/**
+ * combine sample list
+ */
+gulp.task('combine-samplelist', function () {
+    var apiData = JSON.parse(fs.readFileSync('./src/common/api-table', 'utf8'));
+    var apiReference = {};
+    if (sampleList && sampleList.length) {
+        var controls = getControls();
+        sampleOrder = getSampleOrder(controls);
+    }
+    return gulp.src(config.samplejson)
+        .pipe(jsoncombine('samplelist.js', function (data) {
+            var result = [];
+            var subCategory = [];
+            var intId = 0;
+            var addUID = function (pid, dt) {
+                for (var i = 0; i < dt.length; i++) {
+                    dt[i].uid = pid + i;
+                    if (dt[i].hasOwnProperty('samples')) {
+                        curDirectory = dt[i].directory;
+                        subCategory = [];
+                        addUID('00' + intId + i, dt[i].samples);
+                        intId++;
+                    } else {
+                        var index = subCategory.indexOf(dt[i].category);
+                        if (index !== -1) {
+                            dt[i].order = index;
+                        } else {
+                            subCategory.push(dt[i].category);
+                            dt[i].order = subCategory.length - 1;
+                        }
+                        /**
+                         * api-table processing
+                         */
+                        var apiconfig = dt[i].api || {};
+                        var data = [];
+                        var canUpdate = false;
+                        var ObjectKeys = Object.keys(apiconfig);
+                        for (var key of ObjectKeys) {
+                            var classProperties = apiData[key];
+                            if (!classProperties) {
+                                continue;
+                            }
+                            var propertyCollection = apiconfig[key];
+                            for (var prop of propertyCollection) {
+                                var propData = classProperties[prop];
+                                if (propData) {
+                                    canUpdate = true;
+                                    data.push(propData);
+                                }
+                            }
+                        }
+                        if (canUpdate) {
+                            apiReference[curDirectory + '/' + dt[i].url] = data;
+                        }
+                    }
+                }
+            }
+            var orderKeys = Object.keys(sampleOrder);
+            for (var i = 0; i < orderKeys.length; i++) {
+                var components = sampleOrder[orderKeys[i]];
+                for (var j = 0; j < components.length; j++) {
+                    var currentData = getSamples(data, components[j]);
+                    currentData['order'] = i;
+                    result.push(currentData);
+                }
+            }
+            addUID("0", result);
+            generateSearchIndex(result);
+            return new Buffer('window.samplesList  =' + JSON.stringify(result) + ';\n\n' + 'window.apiList =' + JSON.stringify(apiReference));
+        }))
+        .pipe(gulp.dest('./src/common/'));
+});
+
+function getSamples(data, component) {
+    var dataList = Object.keys(data);
+    for (var i = 0; i < dataList.length; i++) {
+        var currentData = data[dataList[i]];
+        if (component === currentData.name) {
+            return currentData;
+        }
+    }
+}
+
+function getControls() {
+    var controlList = sampleList;
+    var controls = controlList.split(',');
+    for (var i = 0; i < controls.length; i++) {
+        controls[i] = controls[i].replace(/^\s*/, '').replace(/\s*$/, '');
+    }
+    return controls;
+}
+
+function getSampleOrder(controls) {
+    var controlWiseSampleOrder = {};
+    var orderKeys = Object.keys(sampleOrder);
+    for (var i = 0; i < orderKeys.length; i++) {
+        var keys = orderKeys[i];
+        //get the controlslist 
+        var components = sampleOrder[keys];
+        for (j = 0; j < controls.length; j++) {
+            // get the index of controls 
+            var componentIndex = components.indexOf(controls[j]);
+            if (componentIndex != -1) {
+                if (!controlWiseSampleOrder[keys]) {
+                    controlWiseSampleOrder[keys] = [components[componentIndex]];
+                } else {
+                    controlWiseSampleOrder[keys].push(components[componentIndex]);
+                }
+            }
+        }
+    }
+    return controlWiseSampleOrder;
+}
+
+/**
+ * Bundle all module using webpack
+ */
+gulp.task('bundle', function () {
+    var webpackConfig = require(fs.realpathSync('./webpack.config.js'));
+    return gulp.src('')
+        .pipe(webpackGulp(webpackConfig, webpack))
+        .pipe(gulp.dest('.'));
+});
+
+function generateSearchIndex(sampleArray) {
+    elasticlunr.clearStopWords();
+    var instance = elasticlunr(function () {
+        this.addField('component');
+        this.addField('name');
+        this.setRef('uid');
+    });
+    for (sampleCollection of sampleArray) {
+        var component = sampleCollection.name;
+        var directory = sampleCollection.directory;
+        var puid = sampleCollection.uid;
+        for (sample of sampleCollection.samples) {
+            sample.component = component;
+            sample.dir = directory;
+            sample.parentId = puid;
+            instance.addDoc(sample);
+        }
+    }
+    fs.writeFileSync('./src/common/search-index.js', 'window.searchIndex  =' + JSON.stringify(instance.toJSON()));
+}
+
+/**
+ * Compile SampleBrowser Samples.
+ */
+gulp.task('build', ['ship-deps'], function (done) {
+    if (!fs.existsSync('./styles')) {
+        fs.mkdirSync('./styles');
+    }
+    runSequence('process-api', 'combine-samplelist', 'bundle', 'plnkr-json', done);
+});
+
+
+gulp.task('ship-deps', function (done) {
+    gulp.src(['./node_modules/@syncfusion/ej2/*.css', './node_modules/@syncfusion/ej2/dist/*{.js,.p}', './node_modules/fuse.js/dist/fuse.min.js'])
+        .pipe(gulp.dest('./dist/'))
+        .on('end', function () {
+            done();
+        });
+});
+
+/**
+ * Watch ts files of samples
+ */
+gulp.task('watch-sample', ['build'], function () {
+    gulp.watch(config.watchSample, ['build']);
+});
+
+//build.tasks['js-hint'].dep = [];
+
+/**
+ * lint files of samples
+ */
+gulp.task('lint', ['js-hint']);
+
+gulp.task('plnkr-json', function () {
+    var files = glob.sync('./src/**/*.js', { silent: true, ignore: './src/common/**/*.js' });
+    var hDep = '<!DOCTYPE html>\n\n<html>\n<head>\n' +
+        '<meta charset="UTF-8">\n' +
+        '<link href="{{:CDN_LINK}}material.css" rel="stylesheet">\n' +
+        '<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />\n' +
+        '<script type="text/javascript">\n' +
+        '   if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {\n' +
+        '       document.write("<script src=\'https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js\'><\\/script>\");\n' +
+        '   }\n<\/script>\n' +
+        '<script src="{{:PKG_LINK}}dist/ej2.min.js" type="text/javascript"></script>\n' +
+        '</head>\n<body>\n';
+    var ripple = 'ej.base.enableRipple(true)\n';
+    var defRegex = /this.default = function( )*\(\)( )* {/g;
+    var impRegex = /import[\w,\{\} *]+'([^ \@]+)';/g;
+    var allImpRegex = /import[^;]+;/g;
+    var imgRegex = /(<img([\w\W])+src\=\"src)|(imageUrl)|((\'|\")(\.\/|)src\/[^\'\"]+.png(\'|\"))/;
+    var srcRegex = /(|\.\/)src\//;
+    var bgRegex = /background-image: url\((\'|\"|)(\.\/|)src/g;
+    var jsonRegex = /import[\w \*\{\}]+\'[\w\-\/\.]+\.json\'\;/;
+    var jsonSrcRegex = /('|")\.\/src[^'"]+('|")/g;
+    var link = 'http://cdn.syncfusion.com/ej2/';
+    var sbLink ='http://ej2.syncfusion.com/javascript/';
+    //link = {{:CDN_LINK}} //Dependency Packages Link
+    //sbLink = {{:CDN_LINK}} //Sample Browser support Link
+    hDep = hDep.replace(/{{:CDN_LINK}}/g, link).replace(/{{:PKG_LINK}}/g, link);
+    var dataSourcePath = {};
+    for (var i = 0; i < files.length; i++) {
+        var filePath = path.dirname(files[i]);
+        var name = path.basename(files[i], '.js');
+        var plnkr = {};
+        var compname = filePath.replace('./src/', '');
+        if (!dataSourcePath[compname]) {
+            var sampleJson = JSON.parse(fs.readFileSync(filePath + '/' + 'sample.json', 'utf8'));
+            var data = 'nil';
+            if (sampleJson.dataSourcePath) {
+                data = fs.readFileSync('./' + sampleJson.dataSourcePath, 'utf8');
+            }
+            dataSourcePath[compname] = data;
+        }
+        var dataSource = dataSourcePath[compname];
+        var baseName = filePath + '/' + name;
+        if (fs.existsSync(baseName + '.html')) {
+            var eoc = '\n<script src="index.js" type="text/javascript"></script>\n</body>\n</html>';
+            if (dataSource !== 'nil') {
+                eoc = '\n<script src="datasource.js"  type="text/javascript"></script>\n' + eoc;
+                plnkr['datasource.js'] = dataSource;
+            }
+            var hfile = hDep + fs.readFileSync(baseName + '.html', 'utf8') + eoc;
+            var $ = cheerio.load(hfile);
+            $('#description').remove();
+            $('#action-description').remove();
+            hfile = $.html();
+            if (imgRegex.test(hfile) || bgRegex.test(hfile)) {
+                var hLines = hfile.split('\n');
+                for (var y = 0; y < hLines.length; y++) {
+                    if (imgRegex.test(hLines[y]) || bgRegex.test(hLines[y])) {
+                        hLines[y] = hLines[y].replace(srcRegex, sbLink + 'demos/src/');
+                    }
+                }
+                hfile = hLines.join('\n');
+            }
+            var jsFile = fs.readFileSync(files[i], 'utf8').replace(defRegex, '');
+            var lInd = jsFile.lastIndexOf('};');
+            jsFile = jsFile.substring(0, lInd) + jsFile.substring(lInd + 2);
+            var imp = jsFile.match(impRegex);
+            if (imp) {
+                for (var j = 0; j < imp.length; j++) {
+                    var im = imp[j].slice(imp[j].indexOf('\'') + 1, imp[j].lastIndexOf('\''));
+                    if (im.indexOf('.json') !== -1) {
+                        if (fs.existsSync('./src' + im.slice(2))) {
+                            plnkr[im.slice(3)] = fs.readFileSync('./src' + im.slice(2), 'utf8');
+                        }
+                    }
+                }
+            }
+            var allImp = jsFile.match(allImpRegex);
+            if (jsonRegex.test(jsFile)) {
+                var jsLines = jsFile.split('\n');
+                for (var k = 0; k < allImp.length; k++) {
+                    if (jsonRegex.test(jsLines[k])) {
+                        jsLines[k] = jsLines[k].substring(0, jsLines[k].indexOf('\'../') + 1) + jsLines[k].substring(jsLines[k].indexOf('\'../') + 2);
+                    }
+                }
+                jsFile = jsLines.join('\n');
+            }
+            if (jsonSrcRegex.test(jsFile)) {
+                var jsonImports = jsFile.match(jsonSrcRegex);
+                for (var z = 0; z < jsonImports.length; z++) {
+                    var jsonfile = jsonImports[z].replace(/\'/g, '').replace(/\"/g, '');
+                    if (fs.existsSync(jsonfile)) {
+                        plnkr[jsonfile.slice(jsonfile.indexOf('/') + 1)] = fs.readFileSync(jsonfile, 'utf8');
+                    }
+                }
+            }
+            if (imgRegex.test(jsFile)) {
+                var tlines = jsFile.split('\n');
+                for (var a = 0; a < tlines.length; a++) {
+                    if (imgRegex.test(tlines[a])) {
+                        tlines[a] = tlines[a].replace(srcRegex, sbLink + 'demos/src/');
+                    }
+                }
+                jsFile = tlines.join('\n');
+            }
+            jsFile = ripple + jsFile;
+            plnkr['index.html'] = hfile;
+            if (jsFile.indexOf('src/common/cldr-data/') !== -1) {
+                var cldrLink = sbLink.indexOf('javascript') !== -1 ? 'demos/\' +' : 'javascript/demos/\' +';
+                cldrLink = '\'' + sbLink + cldrLink;
+                jsFile = jsFile.replace(/location.origin \+ location.pathname \+/g, cldrLink);
+            }
+            plnkr['index.js'] = jsFile;
+            fs.writeFileSync(baseName + '-plnkr.json', JSON.stringify(plnkr));
+            var samplePath = 'samples' + filePath.slice(5) + '/' + name;
+            shelljs.mkdir('-p', samplePath);
+            samplePath += '/';
+            var plFiles = Object.keys(plnkr);
+            for (var p = 0; p < plFiles.length; p++) {
+                if (plFiles[p].split('/').length === 1) {
+                    fs.writeFileSync(samplePath + plFiles[p], plnkr[plFiles[p]]);
+                } else {
+                    var dirPath = plFiles[p].split('/');
+                    shelljs.mkdir('-p', samplePath + dirPath.splice(0, dirPath.length - 1).join('/'));
+                    fs.writeFileSync(samplePath + plFiles[p], plnkr[plFiles[p]]);
+                }
+            }
+        }
+    }
+});
+gulp.task('serve', ['build'], function (done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2 javascript');
+    var options = {
+        server: {
+            baseDir: './'
+        },
+        ui: false
+    };
+    bs.init(options, done);
+});
+gulp.task('js-hint', function () {
+    var print =require('gulp-print');
+    var jshint = require('gulp-jshint');
+    return gulp.src(config.jshint)
+        .pipe(print())
+        .pipe(jshint())
+        .pipe(jshint.reporter('default'))
+        .pipe(jshint.reporter('fail'));
+});

index.html

@@ -0,0 +1,324 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <title>Essential JS 2 for Pure JavaScript (Preview)</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2 for Pure JavaScript (Preview)" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="favicon.ico" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
+    <link href="styles/highlight.css" rel="stylesheet" />
+    <style rel="stylesheet" id="themelink"></style>
+    <link href="styles/index.css" rel="stylesheet" />
+
+    <script type="text/javascript">
+        if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
+            document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"><\/script>');
+        }
+    </script>
+    <script src="dist/ej2.min.js"></script>
+    <script id='sample-datasource' type='text/javascript'></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/elasticlunr/0.9.6/elasticlunr.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossroads/0.12.0/crossroads.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hasher/1.2.0/hasher.min.js"></script>
+    <script src="src/common/samplelist.js" type="text/javascript"></script>
+    <script src="src/common/search-index.js" type="text/javascript"></script>
+</head>
+
+<body class='e-view' aria-busy="true">
+    <div class="sample-browser e-view">
+        <div class="sb-mobile-overlay sb-hide"></div>
+        <div class="sb-mobile-left-pane sb-hide">
+        </div>
+        <div class="sb-mobile-right-pane sb-hide">
+            <div class="sb-mobile-preference sb-hide"></div>
+            <div class="sb-mobile-prop-pane sb-hide"></div>
+            <div class="sb-mobile-right-pane-close sb-icons"></div>
+        </div>
+        <div id='sample-header' class="sb-header e-view" role="banner">
+            <div class='sb-header-left sb-left sb-table'>
+                <div class='sb-header-item sb-table-cell'>
+                    <div id="sb-toggle-left" role="button" tabindex="0" class="sb-slide-nav sb-icons toggle-active sb-icon-Hamburger" aria-label="toggle all controls navigation"
+                        title='toggle leftpane'></div>
+                </div>
+                <div class='sb-header-item sb-table-cell'>
+                    <div id='sb-header-text' class='e-sb-header-text'>
+                        <span class='sb-header-text-left'>Essential JS 2 for</span>
+                        <span class='sb-header-text-right'>JavaScript</span>
+                    </div>
+                </div>
+                <div class='sb-header-item sb-table-cell sb-lang-toggler-wrapper'>
+                    <span id='sb-switcher' role="button" tabindex="0" class='sb-lang-toggler sb-icons sb-icon-Dropdown' aria-label="change the samplebrowser"></span>
+                </div>
+                <div class='sb-header-item sb-table-cell sb-preview-wrapper'>
+                    <div  class='sb-header-preview'></div>
+                </div>
+            </div>
+            <div class='sb-header-right sb-right sb-table'>
+                <div class="sb-header-item sb-table-cell">
+                    <div id="header-theme-switcher" role="button" tabindex="0" class="theme-wrapper" title='Change theme of sample browser'>
+                        <div id="sb-theme-text" class="sb-theme-text">
+                            <span class="sb-header-text-left">CHOOSE THEME</span>
+                        </div>
+                        <div class="sb-theme-switcher-wrapper">
+                            <span id="sb-theme-switcher" class="sb-theme-switch sb-icons sb-icon-Dropdown"></span>
+                        </div>
+                    </div>
+                </div>
+                <div class='sb-header-item sb-table-cell sb-search-wrapper'>
+                    <div class='sb-search-btn' id='sb-trigger-search' role="button" tabindex="0" aria-label="toggle sample search" title="Toggle sample search">
+                        <span class='sb-settings sb-icons sb-icon-Search'></span>
+                    </div>
+                </div>
+                <div class='sb-header-item sb-table-cell sb-settings-wrapper'>
+                    <div class='sb-setting-btn' role="button" tabindex="0" aria-label="toggle settings menu" tabindex="">
+                        <span class='sb-settings sb-icons sb-icon-Settings-Preferences'></span>
+                    </div>
+                </div>
+                <div class="sb-header-item sb-table-cell  sb-header-settings sb-icons"></div>
+                <div class="sb-header-splitter sb-download-splitter"></div>
+                <div class='sb-header-item sb-table-cell sb-download-wrapper'>
+                    <button id='download-now' class='sb-download-btn'>
+                        <a href='https://www.syncfusion.com/downloads/essential-js2' target="_blankss">
+                            <span class='sb-download-text'>Download Now</span>
+                        </a>
+                    </button>
+                </div>
+            </div>
+
+        </div>
+        <div id='sb-popup-section' class='sb-popups'>
+            <div id='sb-switcher-popup' role='navigation' class='sb-switch-popup'>
+                <ul id='switch-sb' role="list">
+                    <li class='sb-current' role="listiem">JavaScript</li>
+                    <li>
+                        <a id='angular'>Angular</a>
+                    </li>
+                    <li role="listiem">
+                        <a id='react'>React</a>
+                    </li>
+                    <li role="listiem">
+                        <a id='typescript'>TypeScript</a>
+                    </li>
+                </ul>
+            </div>
+            <div id='theme-switcher-popup' class='sb-theme-popup'>
+                <ul id="themelist" class="options" role="list">
+                    <li class='active' id="material" role="listitem">
+                        <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
+                        <span class="switch-text">Material</span>
+                    </li>
+                    <li id="fabric" role="listitem">
+                        <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
+                        <span class="switch-text">Fabric</span>
+                    </li>
+                    <li class="e-list" id="bootstrap" role="listitem">
+                        <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
+                        <span class="switch-text">Bootstrap</span>
+                    </li>
+                </ul>
+            </div>
+            <div id='settings-popup' class='sb-setting-popup'>
+                <div class='sb-setting-header'>
+                    <span> Preferences
+                    </span>
+                </div>
+                <div class='sb-setting-content'>
+                    <div class='sb-setting-item sb-setting-theme-section'>
+                        <div class='setting-label'>
+                            <div class='sb-icons sb-setting-icons sb-icon-Palette'></div>
+                            <div class='sb-setting-text'>Theme Selection</div>
+                        </div>
+                        <div class='setting-content  setting-theme-change'>
+                            <select id='sb-setting-theme' class='sb-setting-theme-select'>
+                                <option value="material">Material</option>
+                                <option value="fabric">Fabric</option>
+                                <option value="bootstrap">Bootstrap</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class='sb-setting-item sb-responsive-section'>
+                        <div class='setting-label'>
+                            <div class='sb-icons sb-setting-icons sb-icon-Responsive'></div>
+                            <div class='sb-setting-text'>Mode Selection</div>
+                        </div>
+                        <div class='setting-content btn-group setting-responsive'>
+                            <div id='touch' role="button" tabindex="0" class="sb-responsive-items" title="Increased padding for actionable items to accommodate user touches">Touch</div>
+                            <div id='mouse' role="button" tabindex="0" class="sb-responsive-items" title="Default control sizes, optimized for use with mouse">Mouse</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="sb-content e-view">
+            <div class="sb-body-overlay">
+                <div class="sb-loading">
+                    <svg class="circular" height="40" width="40">
+                        <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" />
+                    </svg>
+                </div>
+            </div>
+            <div class="e-search-overlay sb-hide">
+                <div class='sb-search-input' id='search-input-wrapper'>
+                    <input type='text' aria-required="true" class="e-icons" id='search-input' class='e-icons' placeholder="Search here..." aria-label="search samples"
+                    />
+                    <span class='e-icons  sb-search-icon'></span>
+                </div>
+                <div id='search-popup' class='sb-search-result'></div>
+            </div>
+            <div class='sb-left-pane e-view'>
+                <div class="sb-left-pane-header">
+                    <div class="sb-header-top">
+                        <div class="sb-ej2">
+                            <div class="sb-mobile-logo"></div>
+                            <div class="sb-name">Essential JS 2</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="sb-home" onclick="document.getElementById('sb-home').click()">
+                    <div class="sb-home-link sb-icons sb-icon-Home"></div>
+                    <div class="sb-home-text">
+                        <span>HOME</span>
+                    </div>
+                    <a id="sb-home" href="http://ej2.syncfusion.com/home/javascript.html"></a>
+                </div>
+                <div class='sb-control-navigation'>
+                    <div id="controlTree" class='e-view'></div>
+                    <div id="controlSamples">
+                        <div id="sb-left-back" class="back" role="button" tabindex="0">
+                            <div class="e-icons back-icon"></div>
+                            <div class='control-name'>ALL CONTROLS</div>
+                        </div>
+                        <div id="controlList" class='e-view sb-control-list-top'></div>
+                    </div>
+                </div>
+                <div class='sb-left-footer'>
+                    <div class="sb-mobile-header-buttons">
+                        <a href='https://www.syncfusion.com/products/essential-js2' target="_blank">
+                            <div class="sb-mobile-header-button">
+                                About</div>
+                        </a>
+                        <a href='https://www.syncfusion.com/downloads/essential-js2' target="_blank">
+                            <div class="sb-mobile-header-button">Pricing</div>
+                        </a>
+                    </div>
+                    <div class='sb-left-footer-links'>
+
+                    </div>
+                </div>
+            </div>
+            <div class='sb-right-pane e-view' id='right-pane'>
+                <div class="sb-content-overlay">
+                    <div class="sb-loading">
+                        <svg class="circular" height="40" width="40">
+                            <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" />
+                        </svg>
+                    </div>
+                </div>
+                <div class='sb-desktop-wrapper'>
+                    <div id='component-name' role='header' class='sb-component-name sb-rightpane-padding'>
+                        <span class='sb-sample-text'>Chart</span>
+                    </div>
+                    <div id='sample-bread-crumb' class='sb-bread-crumb sb-rightpane-padding'>
+                        <div class='sb-bread-crumb-text'>
+                            <div class='category-text bread-ctext'> </div>
+                            <div class='category-seperator sb-icons sb-icon-Next seperator'> </div>
+                            <div class='component  bread-ctext'></div>
+                            <div class="component-seperator sb-icons  sb-icon-Next seperator"> </div>
+                            <div class='crumb-sample '></div>
+                        </div>
+                    </div>
+                    <div class='sb-action-description sb-rightpane-padding'></div>
+                    <div class='sb-content-tab' id='content-tab'>
+                        <div id="sb-content" class='sb-content-section'>
+                            <div id='sb-content-header' class="e-tab-header sb-content-tab-header">
+                                <div>
+                                    <span class="sb-icons sb-icon-Demo"></span> DEMO </div>
+                                <div>
+                                    <span class="sb-icons sb-icon-Code"></span> SOURCE </div>
+                            </div>
+                            <div class="e-content sb-sample-content-area">
+                                <div>
+                                    <div class='sb-demo-section'>
+                                        <div class="control-fluid">
+                                            <div class="container-fluid">
+                                                <div id="control-content"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class='sb-source-section'>
+                                        <div id='sb-source-tab' class="">
+                                            <div id='sb-content-header' class="e-tab-header sb-content-tab-header">
+                                                <div>
+                                                    <span class="sb-js-snippet-header"></span> jsfileName </div>
+                                                <div>
+                                                    <span class="sb-html-snippet-header"></span> htmlfileName </div>
+                                            </div>
+                                            <div class="e-content sb-sample-content-area">
+                                                <div>
+                                                    <div id="js-src-tab" class="js-source-content sb-src-code javascript">js Content</div>
+                                                </div>
+                                                <div>
+                                                    <div id="html-src-tab" class="html-source-content sb-src-code xml">html Content</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class='description-section sb-rightpane-padding'>
+                    </div>
+                    <div class="sb-footer">
+                        <div class="sb-footer-left">
+                            <div class="sb-footer-links">
+                                <a href="https://help.syncfusion.com/essential-js2/documentation/?lang=es6" target="_blank">
+                                    <div class="sb-footer-link">Documentation</div>
+                                </a>
+                                <a href="https://www.syncfusion.com/forums/essential-js2" target="_blank">
+                                    <div class="sb-footer-link">Forum</div>
+                                </a>
+                                <a href="https://www.syncfusion.com/blogs/" target="_blank">
+                                    <div class="sb-footer-link">Blog</div>
+                                </a>
+                                <a href="https://www.syncfusion.com/kb/" target="_blank">
+                                    <div class="sb-footer-link">Knowledge Base</div>
+                                </a>
+                            </div>
+                            <div class="sb-footer-copyright">Copyright © 2001-2017 Syncfusion Inc.</div>
+                        </div>
+                        <div class="sb-footer-logo">
+                            <a href="https://www.syncfusion.com/" target="_blank">
+                                <div class="sb-footer-logo-icon"></div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class='sb-mobilefooter e-view sample-navigation' id='mobile-footer'>
+                <button id='mobile-prev-sample' class="sb-navigation-prev sb-left" aria-label="previous sample">
+                    PREVIOUS
+                </button>
+                <button id='mobile-next-sample' class="sb-navigation-next sb-right" aria-label="next sample">
+                    NEXT
+                </button>
+
+            </div>
+        </div>
+
+    </div>
+
+
+    <script src="src/common/index.min.js" type="text/javascript"></script>
+</body>
+
+</html>

license

@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@syncfusion/ej2-javascript-samples",
+  "version": "1.0.0",
+  "description": "Pure Javascript Samples for Syncfusion Essential JS 2",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "dependencies": {
+    "@syncfusion/ej2": "*",
+    "browser-sync": "^2.18.13",
+    "cheerio": "^1.0.0-rc.1",
+    "crossroads": "^0.12.2",
+    "gulp": "^3.9.1",
+    "gulp-jsoncombine": "^1.0.3",
+    "gulp-print": "^2.0.1",
+    "hasher": "^1.2.0",
+    "markdown-it": "^8.4.0",
+    "run-sequence": "^2.2.0",
+    "webpack": "2.5.1",
+    "webpack-stream": "^4.0.0"
+  },
+  "devDependencies": {
+    "elasticlunr": "0.9.5",
+    "gulp-jshint": "^2.0.1",
+    "fuse.js": "^3.2.0",
+    "jshint": "^2.9.2"
+  },
+  "scripts": {
+    "test": "gulp js-hint && gulp build",
+    "serve": "gulp serve"
+  },
+  
+  "config": {
+    "ghooks": {
+      "pre-commit": "npm run test",
+      "commit-msg": "gulp commit-message"
+    }
+  }
+}

src/accordion/Ajax_content.html

@@ -0,0 +1,41 @@
+<style>
+    .e-accordion table {
+        border-collapse: collapse;
+        border-spacing: 0;
+        width: 100%;
+    }
+    
+    .e-accordion table th,
+    .e-accordion table td {
+        font-weight: normal;
+        padding: 5px;
+        text-align: left;
+        border: 1px solid #ddd
+    }
+</style>
+<div>
+    <table>
+        <tr>
+            <th rowspan="2">CELLULAR</th>
+            <td class='e-bold'>Technology</td>
+            <td>GSM / CDMA / HSPA / EV-DO / LTE</td>
+        </tr>
+        <tr>
+            <td class='e-bold'>Edge</td>
+            <td>Yes</td>
+        </tr>
+        <tr>
+            <th rowspan="3">WIRELESS</th>
+            <td class='e-bold'>Wi-Fi</td>
+            <td>Yes ( 802.11 a/b/g/n/ac )</td>
+        </tr>
+        <tr>
+            <td class='e-bold'>Bluetooth</td>
+            <td>Yes ( v 5.0 )</td>
+        </tr>
+        <tr>
+            <td class='e-bold'>NFC</td>
+            <td>Yes</td>
+        </tr>
+    </table>
+</div>

src/accordion/ajax.html

@@ -0,0 +1,160 @@
+<div class="control-section">
+    <div class="control_wrapper accordion-control-section">
+        <div class='product_title'> iPhone X Product Specification </div>
+        <div id='Accordion_Nested'></div>
+    </div>
+    <div id='Sensor_features' style="display:none">
+        <table>
+            <tr>
+                <td class='e-bold'>Proximity sensor</td>
+                <td>Yes</td>
+            </tr>
+            <tr>
+                <td class='e-bold'>Face ID</td>
+                <td>Yes</td>
+            </tr>
+            <tr>
+                <td class='e-bold'>Accelerometer</td>
+                <td>Yes</td>
+            </tr>
+        </table>
+    </div>
+    <div id='Hard_Soft_features' style="display:none">
+        <table>
+            <tr>
+                <th rowspan="3"> Hardware</th>
+                <td class='e-bold' rowspan="2 ">Chip</td>
+                <td>Apple A11 Bionic chip with 64-bit architecture</td>
+            </tr>
+            <tr>
+                <td>Embedded M11 motion coprocessor</td>
+            </tr>
+            <tr>
+                <td class='e-bold'>Capacity</td>
+                <td>64GB/256GB</td>
+            </tr>
+            <tr>
+                <th> Software</th>
+                <td class='e-bold' rowspan="2 ">Operating System</td>
+                <td>iOS 11</td>
+            </tr>
+        </table>
+    </div>
+    <div id='Video_Rec_features' style="display:none">
+        <table>
+            <tr>
+                <th class='e-bold' rowspan='9'>Video Recording</th>
+            </tr>
+            <tr>
+                <td class='e-bold'>4K video recording</td>
+            </tr>
+            <tr>
+                <td class='e-bold'>1080p & 720p HD video recording</td>
+            </tr>
+            <tr>
+                <td class='e-bold'>Optical zoom, 6x digital zoom</td>
+            </tr>
+            <tr>
+                <td class='e-bold'>Slow motion video support</td>
+            </tr>
+            <tr>
+                <td class='e-bold'>Take 8MP still photos while recording 4K video</td>
+            </tr>
+            <tr>
+                <td class='e-bold'>Noise reduction</td>
+            </tr>
+        </table>
+    </div>
+    <div id='Camera_features' style="display:none">
+        <table>
+            <tr>
+                <th class='e-bold' rowspan='3'>Camera</th>
+                <td class='e-bold'> 12MP wide-angle</td>
+            </tr>
+            <tr>
+                <td class='e-bold'>Live Photos with stabilization</td>
+            </tr>
+            <tr>
+                <td class='e-bold'>Body and face detection</td>
+            </tr>
+            <tr>
+                <th class='e-bold' rowspan='4'>TrueDepth Camera</th>
+                <td class='e-bold'> 7MP camera</td>
+            </tr>
+            <tr>
+                <td class='e-bold'> Animoji</td>
+            </tr>
+            <tr>
+                <td class='e-bold'> Face detection</td>
+            </tr>
+        </table>
+    </div>
+    <div id='source_link'>Source: &nbsp;
+        <a href="https://www.apple.com/iphone-x/specs/" target='_blank'>www.apple.com/iphone-x/specs/</a>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample demonstrates rendering <code>Accordion</code> content from external source using <code>Ajax</code> library. The content of panel “Network & Connectivity” is loaded from external element.
+    </p>
+</div>
+<div id="description">
+    <p>
+        This sample illustrates the external webpage content loaded inside the Accordion panel by using AJAX library.
+    </p>
+    <p>
+        More information about Accordion can be found in this <a target="_blank" href="http://ej2.syncfusion.com/documentation/accordion/getting-started.html">
+        documentation</a> section.
+    </p>
+</div>
+<style>
+    @-moz-document url-prefix() {
+        .e-accordion .e-content table {
+            border-collapse: initial;
+        }
+    }
+    
+    .e-accordion table {
+        border-collapse: collapse;
+        border-spacing: 0;
+        width: 100%;
+    }
+    
+    .e-accordion table th,
+    .e-accordion table td {
+        font-weight: normal;
+        padding: 5px;
+        text-align: left;
+        border: 1px solid #ddd
+    }
+    
+    .product_title {
+        text-align: center;
+        margin: 20px 0;
+        padding: 10px 0;
+        text-overflow: ellipsis;
+        font-weight: bold;
+        font-size: 16px;
+    }
+    
+    .accordion-control-section {
+        margin: 0 10% 0 10%;
+        padding-bottom: 25px;
+    }
+    
+    #source_link {
+        float: right;
+        margin-right: 10px;
+    }
+    
+    @media screen and (max-width: 768px) {
+        .accordion-control-section {
+            margin: 0;
+            margin-bottom: 20px;
+        }
+        #source_link {
+            margin-top: -25px;
+            margin-right: 0px;
+        }
+    }
+</style>

src/accordion/ajax.js

@@ -0,0 +1,44 @@
+/**
+ * Accordion Ajax Sample
+ */
+var acrdnObj,nestAcrdn;
+this.default = function () {
+    var ajax = new ej.base.Ajax('./src/accordion/Ajax_content.html', 'GET', true);
+    ajax.send().then();
+    ajax.onSuccess = function (data) {
+        //Initialize Accordion component
+        acrdnObj = new ej.navigations.Accordion({
+            expandMode: 'Single',
+            expanding: expand,
+            items: [
+                { header: 'Network & Connectivity', content: data, expanded: true },
+                { header: 'Feature', content: '<div id="nested_Acc"></div>' },
+                { header: 'Hardware & Software', content: '#Hard_Soft_features' }
+            ]
+        });
+        //Render initialized Accordion component
+        acrdnObj.appendTo('#Accordion_Nested');
+    };
+};
+//Expanding Event function for Accordion component.
+function expand(e) {
+    if (e.isExpanded && [].indexOf.call(this.items, e.item) === 1) {
+        if (e.element.querySelectorAll('.e-accordion').length > 0) {
+            return;
+        }
+        //Initialize Nested Accordion component
+        nestAcrdn = new ej.navigations.Accordion({
+            expandMode: 'Single',
+            items: [
+                { header: 'Sensor', content: '#Sensor_features' },
+                { header: 'Camera', content: '#Camera_features' },
+                { header: 'Video Recording', content: '#Video_Rec_features' },
+            ]
+        });
+        //Render initialized Nested Accordion component
+        nestAcrdn.appendTo('#nested_Acc');
+    }
+}
+
+
+   

src/accordion/default.html

@@ -0,0 +1,32 @@
+<div class="control-section">
+    <div class="control_wrapper accordion-control-section">
+        <div id="Accordion_default"></div>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample demonstrates the default functionalities of the <code>Accordion</code>. Click on the <code>header</code> element to expand/collapse the corresponding Accordion panel, and displays its content.
+    </p>
+</div>
+<div id="description">
+    <p>
+        The Accordion is a vertically collapsible content panel which is displaying panels, one or multiple at a time within the
+        available space. This sample illustrates the simple Accordion rendering with <code>multiple</code> expand
+        mode.
+    </p>
+    <p>
+        More information about Accordion can be found in this <a target="_blank" href="http://ej2.syncfusion.com/documentation/accordion/getting-started.html">
+documentation</a> section.
+    </p>
+</div>
+<style>
+    .accordion-control-section {
+        margin: 0 10% 0 10%;
+    }
+    
+    @media screen and (max-width: 768px) {
+        .accordion-control-section {
+            margin: 0;
+        }
+    }
+</style>

src/accordion/default.js

@@ -0,0 +1,15 @@
+/**
+ * Accordion Default Sample
+ */
+this.default = function () {
+    //Initialize Accordion component
+    var accordion = new ej.navigations.Accordion({
+        items: [
+            { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },
+            { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },
+            { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }
+        ]
+    });
+    //Render initialized Accordion component
+    accordion.appendTo('#Accordion_default');
+};

src/accordion/icons.js

@@ -0,0 +1,16 @@
+/**
+ * Accordion Icon Sample
+ */
+this.default = function () {
+    //Initialize Accordion component
+    var accordion = new ej.navigations.Accordion({
+       items: [
+             { header: 'Athletics', iconCss: 'e-athletics e-acrdn-icons', content: '#athletics', expanded: true },
+             { header: 'Water Games', iconCss: 'e-water-game e-acrdn-icons', content: '#water_games' },
+             { header: 'Racing', iconCss: 'e-racing-games e-acrdn-icons', content: '#racing_games' },
+             { header: 'Indoor Games', iconCss: 'e-indoor-games e-acrdn-icons', content: '#indoor_games' }
+        ]
+    });
+    //Render initialized Accordion component
+    accordion.appendTo('#Accordion_icon');
+};

src/accordion/rtl.js

@@ -0,0 +1,17 @@
+/**
+ * Accordion RTL Sample
+ */
+this.default = function () {
+    //Initialize Accordion component
+    var accordion = new ej.navigations.Accordion({
+        enableRtl: true,
+        items: [
+             { header: 'Athletics', iconCss: 'e-athletics e-acrdn-icons', content: '#athletics', expanded: true },
+             { header: 'Water Games', iconCss: 'e-water-game e-acrdn-icons', content: '#water_games' },
+             { header: 'Racing', iconCss: 'e-racing-games e-acrdn-icons', content: '#racing_games' },
+             { header: 'Indoor Games', iconCss: 'e-indoor-games e-acrdn-icons', content: '#indoor_games' }
+        ]
+    });
+    //Render initialized Accordion component
+    accordion.appendTo('#Accordion_rtl');
+};

src/accordion/sample.json

@@ -0,0 +1,28 @@
+{
+    "name": "Accordion",
+    "directory": "accordion",
+    "category": "Navigation",
+    "samples": [
+        {
+            "url": "default",
+            "name": "Default Functionalities",
+            "category": "Accordion"
+        },
+        {
+            "url": "ajax",
+            "name": "Ajax Content",
+            "category": "Accordion"
+        },
+        {
+            "url": "icons",
+            "name": "Icons",
+            "category": "Accordion"
+        },
+        {
+            "url": "rtl",
+            "name": "RTL",
+            "category": "Accordion"
+        }
+    ]
+}
+

src/autocomplete/custom-filtering.html

@@ -0,0 +1,30 @@
+<div class="col-lg-12 control-section" style="height: 400px;">
+    <div class='control-wrapper'>
+        <div style='padding-top:70px;'>
+            <input type="text" tabindex="1" id='books' />
+        </div>
+    </div>
+</div>
+
+<div id="action-description">
+    <p>This sample demonstrates the custom filtering functionalities of the AutoComplete. You can choose
+        an item from the suggestion list that filtered items based on approximate string matching technique.</p>
+</div>
+
+<div id="description">
+    <p> The AutoComplete can be customized to showcase the suggestion list by using <code>filtering</code> event.
+        In that, you can use your own libraries to filter the data and update it to AutoComplete suggestion list via <code>updateData</code> method.
+    </p>
+
+    <p>In this sample, used Fuse.js library for custom filtering of books data.</p>
+    <p>
+        For more information about Fuse.js can be found in this <a href="http://fusejs.io/" target="_blank"> reference link</a>.
+    </p>
+</div>
+
+<style>
+    .control-wrapper {
+        margin: 0 auto;
+        width: 300px;
+    }
+</style>

src/autocomplete/custom-filtering.js

@@ -0,0 +1,97 @@
+this.default = function () {
+  // define the JSON of data
+  var booksData = [
+      { BookName: 'Support Vector Machines Succinctly', BookID: 'BOOK1' }, { BookName: 'Scala Succinctly', BookID: 'BOOK2' },
+      { BookName: 'Application Security in .NET Succinctly', BookID: 'BOOK3' },
+      { BookName: 'ASP.NET WebHooks Succinctly', BookID: 'BOOK4' },
+      { BookName: 'Xamarin.Forms Succinctly', BookID: 'BOOK5' }, { BookName: 'Asynchronous Programming Succinctly', BookID: 'BOOK6' },
+      { BookName: 'Java Succinctly Part 2', BookID: 'BOOK7' }, { BookName: 'Java Succinctly Part 1', BookID: 'BOOK8' },
+      { BookName: 'PHP Succinctly', BookID: 'BOOK9' }, { BookName: 'Bing Maps V8 Succinctly', BookID: 'BOOK10' },
+      { BookName: 'WPF Debugging and Performance Succinctly', BookID: 'BOOK11' },
+      { BookName: 'Go Web Development Succinctly', BookID: 'BOOK12' },
+      { BookName: 'Go Succinctly', BookID: 'BOOK13' }, { BookName: 'More UWP Succinctly', BookID: 'BOOK14' },
+      { BookName: 'UWP Succinctly', BookID: 'BOOK15' }, { BookName: 'LINQPad Succinctly', BookID: 'BOOK16' },
+      { BookName: 'MongoDB 3 Succinctly', BookID: 'BOOK17' }, { BookName: 'R Programming Succinctly', BookID: 'BOOK18' },
+      { BookName: 'Azure Cosmos DB and DocumentDB Succinctly', BookID: 'BOOK19' },
+      { BookName: 'Unity Game Development Succinctly', BookID: 'BOOK20' },
+      { BookName: 'Aurelia Succinctly', BookID: 'BOOK21' }, { BookName: 'Microsoft Bot Framework Succinctly', BookID: 'BOOK22' },
+      { BookName: 'ASP.NET Core Succinctly', BookID: 'BOOK23' }, { BookName: 'Twilio with C# Succinctly', BookID: 'BOOK24' },
+      { BookName: 'Angular 2 Succinctly', BookID: 'BOOK25' }, { BookName: 'Visual Studio 2017 Succinctly', BookID: 'BOOK26' },
+      { BookName: 'Camtasia Succinctly', BookID: 'BOOK27' }, { BookName: 'SQL Queries Succinctly', BookID: 'BOOK28' },
+      { BookName: 'Keystone.js Succinctly', BookID: 'BOOK29' }, { BookName: 'Groovy Succinctly', BookID: 'BOOK30' },
+      { BookName: 'SQL Server for C# Developers Succinctly', BookID: 'BOOK31' },
+      { BookName: 'Ubuntu Server Succinctly', BookID: 'BOOK32' },
+      { BookName: 'Statistics Fundamentals Succinctly', BookID: 'BOOK33' }, { BookName: '.NET Core Succinctly', BookID: 'BOOK34' },
+      { BookName: 'SOLID Principles Succinctly', BookID: 'BOOK35' }, { BookName: 'Node.js Succinctly', BookID: 'BOOK36' },
+      { BookName: 'Customer Success for C# Developers Succinctly', BookID: 'BOOK37' },
+      { BookName: 'Data Capture and Extraction with C# Succinctly', BookID: 'BOOK38' },
+      { BookName: 'Hadoop Succinctly', BookID: 'BOOK39' }, { BookName: 'SciPy Programming Succinctly', BookID: 'BOOK40' },
+      { BookName: 'Hive Succinctly', BookID: 'BOOK41' }, { BookName: 'React.js Succinctly', BookID: 'BOOK42' },
+      { BookName: 'ECMAScript 6 Succinctly', BookID: 'BOOK43' }, { BookName: 'GitHub Succinctly', BookID: 'BOOK44' },
+      { BookName: 'Gulp Succinctly', BookID: 'BOOK45' }, { BookName: 'Visual Studio Code Succinctly', BookID: 'BOOK46' },
+      { BookName: 'Object-Oriented Programming in C# Succinctly', BookID: 'BOOK47' },
+      { BookName: 'C# Code Contracts Succinctly', BookID: 'BOOK48' },
+      { BookName: 'Leaflet.js Succinctly', BookID: 'BOOK49' }, { BookName: 'Delphi Succinctly', BookID: 'BOOK50' },
+      { BookName: 'SQL on Azure Succinctly', BookID: 'BOOK51' }, { BookName: 'Web Servers Succinctly', BookID: 'BOOK52' },
+      { BookName: 'ASP.NET Multitenant Applications Succinctly', BookID: 'BOOK53' },
+      { BookName: 'ASP.NET MVC Succinctly', BookID: 'BOOK54' },
+      { BookName: 'Windows Azure Websites Succinctly', BookID: 'BOOK55' },
+      { BookName: 'Localization for .NET Succinctly', BookID: 'BOOK56' },
+      { BookName: 'ASP.NET Web API Succinctly', BookID: 'BOOK57' },
+      { BookName: 'ASP.NET MVC 4 Mobile Websites Succinctly', BookID: 'BOOK58' },
+      { BookName: 'jQuery Succinctly', BookID: 'BOOK59' }, { BookName: 'JavaScript Succinctly', BookID: 'BOOK60' },
+  ];
+  // initialize AutoComplete component
+  var atcObj = new ej.dropdowns.AutoComplete({
+      // set the data to dataSource property
+      dataSource: booksData,
+      // maps the appropriate column to fields property
+      fields: { value: 'BookName' },
+      // set placeholder to AutoComplete input element
+      placeholder: 'e.g. Node.js Succinctly',
+      // Bind the filter event
+      filtering: function (e) {
+          var options = {
+              keys: ['BookName'],
+              includeMatches: true,
+              findAllMatches: true
+          };
+          // create object from Fuse constructor
+          var fuse = new Fuse(booksData, options);
+          // store the search result data based on typed characters
+          var result = fuse.search(e.text);
+          var data = [];
+          for (var i = 0; i < result.length; i++) {
+              data.push(result[i].item);
+          }
+          // pass the filter data source to updateData method.
+          e.updateData(data, null);
+          var popupElement = document.getElementById('books_popup');
+          var lists = popupElement.querySelectorAll('.e-list-item');
+          // For highlight the typed characters, pass the result data and list items to highlightSearch method.
+          highlightSearch(lists, result);
+      }
+  });
+  atcObj.appendTo('#books');
+  loadExternalFile();
+  // Dynamically load the fuse.js file
+  function loadExternalFile() {
+      var script = document.createElement('script');
+      script.src = 'dist/fuse.min.js';
+      document.getElementsByTagName('head')[0].appendChild(script);
+  }
+
+  function highlightSearch(listItems, result) {
+      if (result.length > 0) {
+          for (var i = 0; i < listItems.length; i++) {
+              var innerHTML = listItems[i].innerHTML;
+              for (var j = result[i].matches[0].indices.length - 1; j >= 0; j--) {
+                  var indexes = result[i].matches[0].indices[j];
+                  innerHTML = innerHTML.substring(0, indexes[0]) + '<span class="e-highlight">' +
+                      innerHTML.substring(indexes[0], (indexes[1] + 1)) + '</span>' + innerHTML.substring(indexes[1] + 1);
+                  listItems[i].innerHTML = innerHTML;
+              }
+          }
+      }
+  }
+};

src/autocomplete/databinding.html

@@ -0,0 +1,58 @@
+<div class="control-section col-lg-9">
+    <div id='local-data' class='col-lg-6' style='padding-top:15px'>
+        <div class='content'>
+            <h4> Local Data</h4>
+            <input type="text" id='country' />
+        </div>
+    </div>
+    <div id='remote-data' class='col-lg-6' style='padding-top:15px'>
+        <div class='content'>
+            <h4>Remote Data</h4>
+            <input type="text" id='products' />
+        </div>
+    </div>
+</div>
+<div class="col-lg-3 property-section">
+    <div id="property" title="Properties">        
+        <div  style='margin-left: 50px; padding-top:25px;'>
+            <input id="checkAutofill" type="checkbox" checked='true'>
+        </div>
+    </div>
+</div>
+
+<div id="action-description">
+    <p>This sample demonstrates the different data binding supports of the AutoComplete. Type a character(s) in the AutoComplete element and the remaining characters are automatically filled based on the first matched item.
+        Also, provided option to enable/disable this <code>autofill</code> feature in the property panel.</p>
+</div>
+
+<div id="description">
+    <p>The AutoComplete loads the data either from local data sources or remote data services through the <code>dataSource</code> property. It supports the data type of <code>array</code> or <code>DataManager</code>.</p>
+    <p>The DataManager, that act as an interface between service endpoint and AutoComplete, will require the follwoing minimal
+        information to interact with the service endpoint properly.
+    </p>
+    <ul>
+        <li><code>DataManager->url</code> - Defines the service endpoint to fetch data.</li>
+        <li><code>DataManager->adaptor</code> - Defines the adaptor option. By default, <code>ODataAdaptor</code> is used for
+            remote binding.</li>
+    </ul>
+    <p>The adaptor is responsible for processing response and request from/to the service endpoint.
+        <code>@syncfusion/ej2-data</code> package provides some predefined adaptors that are designed to interact with particular
+        service endpoints. They are:</p>
+    <ul>
+        <li><code>UrlAdaptor</code> - Use this to interact any remote services.</li>
+        <li><code>ODataAdaptor</code> - Use this to interact with OData endpoints.</li>
+        <li><code>ODataV4Adaptor</code> - Use this to interact with OData V4 endpoints.</li>
+        <li><code>WebApiAdaptor</code> - Use this to interact with Web API created under OData standards.</li>
+        <li><code>WebMethodAdaptor</code> - Use this to interact with web methods.</li>
+    </ul>
+    <p> More information on the data binding feature configuration can be found in the
+        <a href="http://ej2.syncfusion.com/documentation/auto-complete/data-binding.html" target="_blank"> documentation section</a>.
+    </p>
+</div>
+
+<style>
+    .content {
+        margin: 0 auto;
+        width: 250px;
+    }
+</style>

src/autocomplete/databinding.js

@@ -0,0 +1,55 @@
+
+this.default = function () {
+    // initialize AutoComplete component
+    var atcObj1 = new ej.dropdowns.AutoComplete({
+        // bind the DataManager instance to dataSource property
+        dataSource: new ej.data.DataManager({ url: 'http://services.odata.org/V4/Northwind/Northwind.svc', adaptor: new ej.data.ODataV4Adaptor(), crossDomain: true}),
+        // set the count for displays the suggestion items.
+        suggestionCount: 5,
+        // bind the Query instance to query property
+        query: new ej.data.Query().from('Products').select(['ProductID', 'ProductName']),
+        // map the appropriate columns to fields property
+        fields: { value: 'ProductName' },
+        // set the placeholder to AutoComplete input element
+        placeholder: 'e.g. Alice Mutton',
+        // sort the resulted items
+        sortOrder: 'Ascending',
+        // enable the autofill property to fill a first matched value in input when press a down key
+        autofill: true,
+        // set the filterType to searching operation
+        filterType: 'StartsWith',
+    });
+    atcObj1.appendTo('#products');
+
+    // initialize AutoComplete component
+    var atcObj2 = new ej.dropdowns.AutoComplete({
+        //set the local data to dataSource property
+        dataSource: window.ddCountryData,
+        // map the appropriate columns to fields property
+        fields: { value: 'Name' },
+        // set the placeholder to AutoComplete input element
+        placeholder: 'e.g. Australia',
+        // sort the resulted items
+        sortOrder: 'Ascending',
+        // set the filterType to searching operation
+        filterType: 'StartsWith',
+        // enable the autofill property to fill a first matched value in input when press a down key
+        autofill: true
+    });
+    atcObj2.appendTo('#country');
+    var checkBoxObj = new ej.buttons.CheckBox({
+        // set true for enable the checked state at initial rendering
+        checked: true,
+        // set text value for check box element.
+        label: 'Autofill',
+        // bind change event
+        change: function (args) {
+            // enable or disable the autofill in remote data AutoComplete based on CheckBox checked state
+            atcObj1.autofill = args.checked;
+            // enable or disable the autofill in local data AutoComplete based on CheckBox checked state
+            atcObj2.autofill = args.checked;
+        }
+    });
+    checkBoxObj.appendTo('#checkAutofill');
+
+};

src/autocomplete/default.html

@@ -0,0 +1,28 @@
+<div class="col-lg-12 control-section">
+    <div class="control-wrapper">
+        <div style='padding-top:70px;'>
+            <input type="text" id="games" tabindex="1" />
+        </div>
+    </div>
+</div>
+
+<div id="action-description">
+    <p>This sample demonstrates the default functionalities of the AutoComplete. Type a character in the AutoComplete element and choose an item from the suggestion list.</p>
+</div>
+
+<div id="description">
+    <p>The <code>AutoComplete</code> component provides the matched suggestion list when a character is typed in the input, from that the
+        user can select one.</p> By default, the filter type value is <code>contains</code>.
+    <p>The default sample illustrates the use of AutoComplete that allows the end-users to select an item from the suggestion list.
+    </p>
+    <p> More information on the AutoComplete instantiation can be found in the
+        <a href="http://ej2.syncfusion.com/documentation/auto-complete/getting-started.html" target="_blank"> documentation section</a>.
+    </p>
+</div>
+
+<style>
+    .control-wrapper {
+        margin: 0 auto;
+        width: 250px;
+    }
+</style>

src/autocomplete/default.js

@@ -0,0 +1,16 @@
+
+this.default = function () {
+    // define the array of data
+    var sportsData = ['Badminton', 'Basketball', 'Cricket',
+        'Football', 'Golf', 'Gymnastics',
+        'Hockey', 'Rugby', 'Snooker', 'Tennis'];
+
+    // initialize AutoComplete component
+    var atcObj = new ej.dropdowns.AutoComplete({
+        //set the data to dataSource property
+        dataSource: sportsData,
+        // set the placeholder to AutoComplete input element
+        placeholder: 'e.g. Basketball'
+    });
+    atcObj.appendTo('#games');
+};

src/autocomplete/grouping-icon.js

@@ -0,0 +1,24 @@
+
+this.default = function () {
+    // initialize AutoComplete component
+    var groupObj = new ej.dropdowns.AutoComplete({
+        //set the local data to dataSource property
+        dataSource: window.ddVegetableData,
+        // map the appropriate columns to fields property
+        fields: { groupBy: 'Category', value: 'Vegetable' },
+        // set the placeholder to AutoComplete input element
+        placeholder: 'e.g. Cabbage'
+    });
+    groupObj.appendTo('#vegetables');
+
+    // initialize AutoComplete component
+    var iconObj = new ej.dropdowns.AutoComplete({
+        //set the local data to dataSource property
+        dataSource: window.ddSocialMedia,
+        // map the appropriate columns to fields property
+        fields: { iconCss: 'Class', value: 'SocialMedia' },
+        // set the placeholder to AutoComplete input element
+        placeholder: 'e.g. Facebook'
+    });
+    iconObj.appendTo('#icons');
+};

src/autocomplete/highlight.html

@@ -0,0 +1,46 @@
+<div class="col-lg-8 control-section">
+    <div class="control-wrapper">
+        <div style='padding-top:70px;'>
+            <input type="text" id="country" tabindex="1" />
+        </div>
+    </div>
+</div>
+
+<div class="col-lg-4 property-section">
+    <table id="property" title="Properties" style="width: 100%;">
+        <tr>
+            <td class="left-side">FilterType :</td>
+            <td style="padding-top: 10px"><input type='text' id='filter-type' /> </td>
+        </tr>
+    </table>
+</div>
+
+<div id="action-description">    
+    <p>This sample demonstrates the highlight functionalities of the AutoComplete. Type a character(s) in the AutoComplete element and the typed characters are highlighted in the suggestion list.
+    By default, <code>Contains</code> filter type is set in this sample and provided with the options to choose different filter type in the property panel.</p>    
+</div>
+
+<div id="description">
+    <p>The AutoComplete has built-in support to highlight the searched characters on the suggested list items when <code>highlight</code> is enabled.</p>
+
+    <p>This sample illustrates that, the searched characters on the country suggestion list items are highlighted.</p>
+    <p> More information on the highlight search feature configuration can be found in the
+        <a href="http://ej2.syncfusion.com/documentation/auto-complete/how-to.html#custom-highlight-search" target="_blank"> documentation section</a>.
+    </p>
+</div>
+
+<style>
+    .control-wrapper {
+        margin: 0 auto;
+        width: 250px;
+    }
+
+    .property-panel-content {
+        padding: 10px;
+    }
+
+    .property-section .left-side {
+        width: 50%;
+        padding-left: 10px;
+    }
+</style>

src/autocomplete/highlight.js

@@ -0,0 +1,32 @@
+
+this.default = function () {
+    // initialize AutoComplete component
+    var atcObj = new ej.dropdowns.AutoComplete({
+        // set the local data to dataSource property
+        dataSource: window.ddCountryData,
+        // map the appropriate columns to fields property
+        fields: { value: 'Name' },
+        // set the placeholder to AutoComplete input element
+        placeholder: 'e.g. Australia',
+        // enable the highlight property to highlight the matched character in suggestion list
+        highlight: true
+    });
+    atcObj.appendTo('#country');
+
+    // initialize DropDownList component
+    var ddlObj = new ej.dropdowns.DropDownList({
+        // set the array of string data to dataSource property
+        dataSource: ['Contains', 'StartsWith', 'EndsWith'],
+        // set the value to select an item at initial rendering.
+        text: 'Contains',
+        // set the placeholder to DropDownList input element
+        placeholder: 'Select a type',
+        // set width size of DropDownList element.
+        width: '150px',
+        // bind change event to modify the filter type of AutoComplete element.
+        change: function (e) {
+            atcObj.filterType = e.itemData;
+        }
+    });
+    ddlObj.appendTo('#filter-type');
+};

src/autocomplete/sample.json

@@ -0,0 +1,14 @@
+{
+    "name": "AutoComplete",
+    "directory": "autocomplete",
+    "category": "Editors",
+    "samples": [
+        { "url": "default", "name": "Default Functionalities", "category": "AutoComplete", "api": {"AutoComplete": ["dataSource", "value", "placeholder"]} },
+        { "url": "grouping-icon", "name": "Grouping and Icons", "category": "AutoComplete", "api": {"AutoComplete": ["fields"]} },
+        { "url": "databinding", "name": "Data Binding", "category": "AutoComplete", "api": {"AutoComplete": ["suggestionCount", "query", "sortOrder", "autofill", "filterType", "change", "actionBegin", "actionComplete", "actionFailure"]} },
+        { "url": "template", "name": "Template", "category": "AutoComplete", "api": {"AutoComplete": ["headerTemplate", "itemTemplate"]} },
+        { "url": "highlight", "name": "Highlight", "category": "AutoComplete", "api": {"AutoComplete": ["highlight"]} },
+        { "url": "custom-filtering", "name": "Custom Filtering", "category": "AutoComplete", "api": {"AutoComplete": ["dataSource", "filtering", "fields", "placeholder"]} }
+    ],
+    "dataSourcePath":"src/dropdownlist/datasource.js"
+}

src/autocomplete/template.html

@@ -0,0 +1,135 @@
+<div class="col-lg-12 control-section" style="height: 400px;">
+    <div class='control-wrapper'>
+        <div style='padding-top:70px;'>
+            <input type="text" tabindex="1" id='employees' />
+        </div>
+    </div>
+</div>
+
+<div id="action-description">    
+    <p>This sample demonstrates the template functionalities of the AutoComplete. Type a character in the AutoComplete element and choose an item from the customized list</p>     
+</div>
+
+<div id="description">
+    <p>The AutoComplete has been provided with several options to customize each list items, group title, header and footer
+        elements.
+    </p>
+
+    <p>This sample uses the following list of templates in AutoComplete</p>
+    <ul>
+        <li><code>ItemTemplate</code> - To customize the list item's content.</li>
+        <li><code>HeaderTemplate</code> - To customize the header element.</li>
+    </ul>
+    <p> More information on the template feature configuration can be found in the
+        <a href="http://ej2.syncfusion.com/documentation/auto-complete/templates.html" target="_blank"> documentation section</a>.
+    </p>
+</div>
+
+<style>
+    .control-wrapper {
+        margin: 0 auto;
+        width: 300px;
+    }
+
+    .header {
+        font-weight: 600;
+        color: rgba(0, 0, 0, .54);
+        height: 48px;
+        padding: 15px 0 0 16px;
+        font-size: 16px;
+        background-color: #f5f5f5;
+        font-family: "Segoe UI", "GeezaPro", "DejaVu Serif";  
+    }
+
+    .fabric .header {
+        background-color: #fff;
+        border-bottom: 1px solid #ccc;
+        color: #0078d7;
+        font-weight: 400;
+    }
+
+    .bootstrap .header {
+        background-color: #fff;
+        border-bottom: 1px solid #ccc;
+        color: #777;
+        font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 30px;
+        height: 30px;
+        padding: 0 0 0 24px;
+    }
+    .e-bigger.bootstrap .header {
+        line-height: 44px;
+        height: 44px;
+        font-size: 13px;
+    }
+    .bootstrap .info,
+    .e-bigger.bootstrap .info {
+        margin-left: 25px;
+    }
+    .bootstrap .job {
+        opacity: .54;
+        font-size: 14px;
+        margin-top: -25px;
+        margin-bottom: 20px;
+    }
+    .e-bigger.bootstrap .job {    
+        font-size: 15px;
+        margin-top: -32px;
+        margin-bottom: 17px;
+    }
+    .bootstrap .ename {
+        font-size: 15px;
+        margin-top: 20px;
+        opacity: .87;
+        padding: 3px 0 20px;
+    }
+    .e-bigger.bootstrap .ename{
+        font-size: 16px;
+        padding-bottom: 15px;
+    }
+    .bootstrap .empImage,
+    .e-bigger.bootstrap .empImage {
+        margin: 0px 10px 0 20px;
+    }
+
+    .info {
+        margin-left:17px;
+    }
+
+    .ename {
+        display: block !important;
+        opacity: .87;
+        font-size: 16px;
+        margin-top: 8px;
+    }
+
+    .job {
+        opacity: .54;
+        font-size: 14px;
+        margin-top: -15px;
+        margin-bottom: 7px;
+    }
+
+    .empImage {
+        margin: 6px 16px;
+        float: left;
+        width: 50px;
+        height: 50px;
+    }
+
+    #employees_popup.e-popup .e-list-item * {
+        display: block;
+        text-indent: 0;
+    }
+
+    .e-bigger:not(.bootstrap) #employees_popup .e-dropdownbase .e-list-item {
+        line-height: 42px;
+        height: 80px;
+    }
+
+    .e-bigger:not(.bootstrap) #employees_popup.e-popup .empImage {
+        margin: 10px 16px;
+    }
+</style>

src/autocomplete/template.js

@@ -0,0 +1,21 @@
+
+this.default = function () {
+    // initialize AutoComplete component
+    var atcObj = new ej.dropdowns.AutoComplete({
+        // set the local data to dataSource property
+        dataSource: window.ddEmployeesList,
+        // map the appropriate columns to fields property
+        fields: { value: 'Name' },
+        // set the template content for popup header element
+        headerTemplate:
+        '<div class="header"> <span>Photo</span> <span class="info">Employee Info</span></div>',
+        // set the template content for list items
+        itemTemplate: '<div><img class="empImage" src="styles/images/Employees/${Eimg}.png" alt="employee"/>' +
+            '<div class="ename"> ${Name} </div><div class="job"> ${Designation} </div></div>',
+        // set the placeholder to AutoComplete input element
+        placeholder: 'e.g. Andrew Fuller',
+        // set the height of the popup element
+        popupHeight: '450px'
+    });
+    atcObj.appendTo('#employees');
+};

src/button/check-box.html

@@ -0,0 +1,68 @@
+<div class="control-section">
+    <div class="checkbox-control">
+        <div class="row">
+            <input id="checked" type="checkbox" />
+        </div>
+        <div class="row">
+            <input id="disabled" type="checkbox" />
+        </div>
+        <div class="row">
+            <input id="indeterminate" type="checkbox" />
+        </div>
+    </div>
+</div>
+<div id="action-description">
+    <p>This sample demonstrates the default functionalities of the CheckBox. Click the CheckBox element to toggle states between checked/unchecked.</p>
+</div>
+<div id="description">
+    <p>
+        CheckBox is a graphical user interface element that allows to select one or more options from the choices. It contains checked, unchecked, and indeterminate states.
+    </p>
+    <p>
+        In this sample, checked state is achieved by using the 
+        <a target="_blank" class="code"
+        href="http://ej2.syncfusion.com/documentation/check-box/api-checkBox.html#checked-boolean"><code>checked
+        </code></a> property, indeterminate state is achieved by using the <a target="_blank" class="code"
+        href="http://ej2.syncfusion.com/documentation/check-box/api-checkBox.html#indeterminate-boolean"><code>indeterminate
+        </code></a> property, and disabled state is achieved by using the <a target="_blank" class="code"
+        href="http://ej2.syncfusion.com/documentation/check-box/api-checkBox.html#disabled-boolean"><code>disabled
+        </code></a> property.
+    </p>
+    <p>
+        More information about CheckBox can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/check-box/getting-started.html">
+        documentation section</a>.
+    </p>
+</div>
+<style>
+     /* CheckBox Styles */
+     .checkbox-control {
+        margin: 12% 0 12% 40%;
+    }
+
+    @media only screen and (max-width: 700px) {
+        .checkbox-control {
+            margin: 20% 0 0 32%;
+        }
+
+        .control-section {
+            min-height: 200px;
+        }
+    }
+
+    @media only screen and (max-width: 500px) {
+        .control-section {
+            min-height: 200px;
+        }
+
+        .checkbox-control {
+            margin-top: 27%;
+            margin-left: 20%;
+            margin-bottom: 27%;
+        }
+    }
+
+    .control-section .row {
+        margin: 20px 0;
+    }
+</style>

src/button/check-box.js

@@ -0,0 +1,15 @@
+this.default = function() {
+    var checkBoxObj = new ej.buttons.CheckBox({ label: 'CheckBox: true', checked: true, change: onChange });
+    checkBoxObj.appendTo('#checked');
+
+    checkBoxObj = new ej.buttons.CheckBox({ label: 'Checked, Disabled', disabled: true, checked: true });
+    checkBoxObj.appendTo('#disabled');
+
+    checkBoxObj = new ej.buttons.CheckBox({ label: 'Indeterminate, Disabled', indeterminate: true, disabled: true });
+    checkBoxObj.appendTo('#indeterminate');
+
+    // function to handle the CheckBox change event
+    function onChange(args) {
+        this.label = 'CheckBox: ' + args.checked;
+    }
+};

src/button/default.html

@@ -0,0 +1,117 @@
+<div class="control-section">
+    <div class="button-section">
+        <div id="button-control">
+            <div class="row">
+                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
+                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
+                        <button id="primarybtn">Primary</button>
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
+                        <button id="normalbtn">Normal</button>
+                    </div>
+                </div>
+                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
+                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
+                        <button id="outlinebtn">Outline</button>
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
+                        <button id="flatbtn">Flat</button>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
+                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
+                        <button id="successbtn">Success</button>
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
+                        <button id="warningbtn">Warning</button>
+                    </div>
+                </div>
+                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
+                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
+                        <button id="dangerbtn">Danger</button>
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
+                        <button id="infobtn">Info</button>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
+                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
+                        <button id="roundbtn"></button>
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
+                        <button id="togglebtn">Play</button>
+                    </div>
+                </div>
+                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
+                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
+                        <button id="openiconbtn">Open</button>
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
+                        <button id="smallbtn">Small</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="action-description">
+    <p>This sample demonstrates the default functionalities of the Button with different types and predefined styles.</p>
+</div>
+<div id="description">
+    <p>
+        Button is a graphical user interface element that triggers an event on click action. It contains the text, an image, or both.
+    </p>
+    <p>
+        In this sample, Play button is a toggle button and it can be enabled by using the <a target="_blank" class="code"
+        href="http://ej2.syncfusion.com/documentation/button/api-button.html#istoggle-boolean"><code>isToggle
+        </code></a> property. To change the text and icon you should handle click event.
+    </p>
+    <p>
+        More information about Button can be found in this
+        <a target="_blank" 
+        href="http://ej2.syncfusion.com/documentation/button/getting-started.html">
+        documentation section</a>.
+    </p>
+</div>
+<style>
+    #button-control {
+        width: 100%;
+        margin: 8% 0;
+        text-align: center;
+    }
+    
+    @media only screen and (max-width: 500px) {
+        #button-control {
+            margin-left: -3%;
+        }
+    }
+    
+    .button-section {
+        width: 80%;
+        margin: auto;
+    }
+    
+    #button-control .col-xs-12 {
+        margin: 15px 0;
+    }
+        
+    .e-play-icon::before {
+        content: '\e798';
+    }
+    
+    .e-pause-icon::before {
+        content: '\e753';
+    }
+    
+    .e-open-icon::before {
+        content: '\e782';
+    }
+
+    .e-add-icon::before {
+        content: '\e823';
+    }
+</style>

src/button/default.js

@@ -0,0 +1,48 @@
+this.default = function() {
+    var button = new ej.buttons.Button({ isPrimary: true });
+    button.appendTo('#primarybtn');
+
+    button = new ej.buttons.Button({});
+    button.appendTo('#normalbtn');
+
+    button = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });
+    button.appendTo('#outlinebtn');
+
+    button = new ej.buttons.Button({ cssClass: 'e-flat' });
+    button.appendTo('#flatbtn');
+
+    button = new ej.buttons.Button({ cssClass: 'e-success'  });
+    button.appendTo('#successbtn');
+
+    button = new ej.buttons.Button({ cssClass: 'e-warning' });
+    button.appendTo('#warningbtn');
+
+    button = new ej.buttons.Button({ cssClass: 'e-danger' });
+    button.appendTo('#dangerbtn');
+
+    button = new ej.buttons.Button({ cssClass: 'e-info' });
+    button.appendTo('#infobtn');
+
+    button = new ej.buttons.Button({ iconCss: 'e-icons e-add-icon', cssClass: 'e-small e-round', isPrimary: true });
+    button.appendTo('#roundbtn');
+
+    var toggleBtn = new ej.buttons.Button({ iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isToggle: true });
+    toggleBtn.appendTo('#togglebtn');
+
+    button = new ej.buttons.Button({ iconCss: 'e-icons e-open-icon', cssClass: 'e-flat', iconPosition: 'right' });
+    button.appendTo('#openiconbtn');
+
+    button = new ej.buttons.Button({});
+    button.appendTo('#smallbtn');
+
+    //Toggle button click event handler
+    toggleBtn.element.onclick = function () {
+        if (toggleBtn.element.classList.contains('e-active')) {
+            toggleBtn.content = 'Pause';
+            toggleBtn.iconCss = 'e-icons e-pause-icon';
+        } else {
+            toggleBtn.content = 'Play';
+            toggleBtn.iconCss = 'e-icons e-play-icon';
+        }
+    };  
+};

src/button/radio-button.html

@@ -0,0 +1,72 @@
+<div class="control-section">
+    <div class="radio-control">
+       <h4 class="row">Select a payment method</h4>
+        <div class="row">
+            <input id="radio1" type="radio">
+        </div>
+        <div class="row">
+            <input id="radio2" type="radio">
+        </div>
+        <div class="row">
+            <input id="radio3" type="radio">
+        </div>
+        <div class="row">
+            <input id="radio4" type="radio">
+        </div>
+    </div>
+</div>
+<div id="action-description">
+    <p>This sample demonstrates the default functionalities of the RadioButton. Select the payment mode by clicking the desired RadioButton element.</p>
+</div>
+<div id="description">
+    <p>
+        RadioButton is a graphical user interface element that allows to select one option from the choices. It contains checked and unchecked state.
+    </p>
+    <p>
+        In this sample, Credit/Debit Card option is checked by default, and it can be achieved by using the <a target="_blank" class="code"
+        href="http://ej2.syncfusion.com/documentation/radio-button/api-radioButton.html#checked-boolean"><code>checked
+        </code></a> property.
+    </p>
+     <p>
+        More information about RadioButton can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/radio-button/getting-started.html">
+        documentation section</a>.
+    </p>
+</div>
+<style>
+    /* RadioButton Styles */
+    .radio-control {
+        margin: 5% 0 5% 40%;
+    }
+
+    @media only screen and (max-width: 700px) {
+        .radio-control {
+            margin-left: 35%;
+            margin-top: 8%;
+        }
+
+        .control-section {
+            min-height: 200px;
+        }
+    }
+
+    @media only screen and (max-width: 500px) {
+        .radio-control {
+            margin-top: 20%;
+            margin-left: 21%;
+            margin-bottom: 27%;
+        }
+    }
+
+    .control-section .row {
+        margin: 20px 0;
+    }
+
+    .radio-control h4 {
+        color: rgba(0, 0, 0, 0.64);
+    }
+
+    .e-bigger .radio-control h4 {
+        font-size: 20px;
+    }
+</style>

src/button/radio-button.js

@@ -0,0 +1,13 @@
+this.default = function() {
+    var radioButton = new ej.buttons.RadioButton({ label: 'Credit/Debit Card', name: 'payment', value: 'credit/debit', checked: true });
+    radioButton.appendTo('#radio1');
+
+    radioButton = new ej.buttons.RadioButton({ label: 'Net Banking', name: 'payment', value: 'netbanking' });
+    radioButton.appendTo('#radio2');
+
+    radioButton = new ej.buttons.RadioButton({ label: 'Cash on Delivery', name: 'payment', value: 'cashondelivery' });
+    radioButton.appendTo('#radio3');
+
+    radioButton = new ej.buttons.RadioButton({ label: 'Other Wallets', name: 'payment', value: 'others' });
+    radioButton.appendTo('#radio4');
+};

src/button/sample.json

@@ -0,0 +1,22 @@
+{
+    "name": "Button",
+    "directory": "button",
+    "category": "Editors",
+    "samples": [
+        {
+            "url": "default",
+            "name": "Default Functionalities",
+            "category": "Button"
+        },
+        {
+            "url": "check-box",
+            "name": "CheckBox",
+            "category": "Button"
+        },
+        {
+            "url": "radio-button",
+            "name": "RadioButton",
+            "category": "Button"
+        }
+    ]
+}

src/calendar/default.html

@@ -0,0 +1,34 @@
+<div class="col-lg-12 control-section">
+    <div class="control_wrapper" style="overflow:auto">
+        <div id="container">
+            <div id="calendar"></div><br/>
+            <span id="date_label"> Selected Value: </span>
+        </div>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        The following sample demonstrates the default functionalities of the Calendar. Today's date is always <code>highlighted</code> in the Calendar and it get <code>focused</code> if there is no selected date. Click the desired date from the Calendar and the selected date will be displayed in the below label.
+    </p>
+</div>
+<div id="description">
+    <p>
+        The <code>Calendar</code> is a graphical user interface control which provides the multi-view representation to display
+        and select a date. Also, provide options to navigate in different levels of views like month, year, decade.
+    </p>
+    <p>More information on the calendar instantiation can be found in this
+        <a href="http://ej2.syncfusion.com/documentation/calendar/getting-started.html#create-a-simple-calendar" target="_blank"> documentation section</a>.</p>
+</div>
+<style>
+    #date_label {
+        display: block;
+        width: 248px;
+        color: rgba(0, 0, 0, 0.58);
+        margin-left: 5px;
+    }
+
+    .control_wrapper {
+        max-width: 300px;
+        margin: 0 auto;
+    }
+</style>

src/calendar/default.js

@@ -0,0 +1,8 @@
+this.default = function () {
+    var calendar = new ej.calendars.Calendar({
+        change: function (args) {
+            (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();
+        }
+    });
+    calendar.appendTo('#calendar');
+};

src/calendar/disabled.html

@@ -0,0 +1,34 @@
+<div class="col-lg-12 control-section">
+    <div class="control_wrapper" style="overflow:auto">
+        <div id="container">
+            <div id="calendar"></div><br/>
+            <span id="date_label"> Selected Value: </span>
+        </div>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        In the following sample, all the weekends (Saturday and Sunday) of a month are <code>disabled</code>, and these dates are restricted to set or select in the Calendar.
+    </p>
+</div>
+<div id="description">
+    <p>
+        Disabled Dates sample demonstrates, how to disable a specific dates in a calendar by using <code>renderDayCell</code> event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific dates
+        in calendar. Here the weekend date's are disabled by using renderDayCell.
+    </p>
+    <p>More information on the disabled dates can be found in this
+        <a href="http://ej2.syncfusion.com/documentation/calendar/customization.html" target="_blank"> documentation section</a>.</p>
+</div>
+<style>
+    #date_label {
+        display: block;
+        width: 248px;
+        color: rgba(0, 0, 0, 0.58);
+        margin-left: 5px;
+    }
+    
+    .control_wrapper {
+        max-width: 300px;
+        margin: 0 auto;
+    }
+</style>

src/calendar/disabled.js

@@ -0,0 +1,14 @@
+this.default = function () {
+    var calendar = new ej.calendars.Calendar({
+        renderDayCell: disableDate, change: valueChange
+    });
+    calendar.appendTo('#calendar');
+    function valueChange(args) {
+        (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();
+    }
+    function disableDate(args) {
+        if (args.date.getDay() === 0 || args.date.getDay() === 6) {
+            args.isDisabled = true;
+        }
+    }
+};

src/calendar/internationalization.html

@@ -0,0 +1,57 @@
+<div class="col-lg-8 control-section">
+    <div class="control_wrapper" style="overflow:auto">
+        <div id="container">
+            <div id="calendar"></div><br/>
+            <span id="date_label"> Selected Value: </span>
+        </div>
+    </div>
+</div>
+
+<div class="col-lg-4 property-section">
+    <table id="property" title="Properties">
+        <tr>
+            <td>
+                <div>Culture</div>
+            </td>
+            <td>
+                <div>
+                    <select id="cultures" class="form-control">
+                        <option value="de">de</option>
+                        <option value="en">en</option>            
+                    </select>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
+<div id="action-description">
+    <p>
+        In this sample, the calendar has been configured with <code>German</code> culture. To change this current culture, go to the properties panel at the right side and select a culture from the dropdown options.
+    </p>
+</div>
+<div id="description">
+    <p>
+        The calendar control was rendered with <code>German</code> culture. Here the date separator, week header and month
+        text content are updated based on current culture. You can also change the control culture by selecting it from the
+        culture options in the properties panel.
+    </p>
+    <p>More information on the internationalization configuration can be found in this <a href="http://ej2.syncfusion.com/documentation/calendar/internationalization.html"
+            target="_blank"> documentation section</a>.</p>
+</div>
+<style>
+    .property-panel-content {
+        padding: 0 10px 10px 0;
+    }
+
+    #date_label {
+        display: block;
+        width: 248px;
+        color: rgba(0, 0, 0, 0.58);
+        margin-left: 5px;
+    }
+
+    .control_wrapper {
+        max-width: 300px;
+        margin: 0 auto;
+    }
+</style>

src/calendar/internationalization.js

@@ -0,0 +1,50 @@
+this.default = function () {
+    var calendar = new ej.calendars.Calendar({
+        change: dateChange
+    });
+    calendar.appendTo('#calendar');
+    loadCultureFiles('de');
+    calendar.locale = 'de';
+
+    var dropObj = new ej.dropdowns.DropDownList({
+        width: '100%',
+        value: 'de',
+        change: cultureChange,
+    });
+    dropObj.appendTo('#cultures');
+    var globalize = new ej.base.Internationalization(calendar.locale);
+    function dateChange(args) {
+        (document.getElementById('date_label')).textContent = 'Selected Value: ' + globalize.formatDate(args.value);
+    }
+
+    function cultureChange() {
+        var culture = this.text;
+        calendar.locale = culture;
+        calendar.enableRtl = calendar.locale === 'ar' ? true : false;
+        if (culture !== 'en') {
+            loadCultureFiles(culture);
+        }
+        globalize = new ej.base.Internationalization(calendar.locale);
+        if (calendar.value) {
+            var dateString = globalize.formatDate(calendar.value);
+            (document.getElementById('date_label')).textContent = 'Selected Value: ' + dateString;
+        }
+    }
+
+    function loadCultureFiles(name) {
+        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];
+        var loader = ej.base.loadCldr;
+        var loadCulture = function (prop) {
+            var val, ajax;
+            ajax = new ej.base.Ajax(location.origin + location.pathname + 'src/common/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
+            ajax.onSuccess = function (value) {
+                val = value;
+            };
+            ajax.send();
+            loader(JSON.parse(val));
+        };
+        for (var prop = 0; prop < files.length; prop++) {
+            loadCulture(prop);
+        }
+    }
+};

src/calendar/range.html

@@ -0,0 +1,34 @@
+<div class="col-lg-12 control-section">
+    <div class="control_wrapper" style="overflow:auto">
+        <div id="container">
+            <div id="calendar"></div><br/>
+            <span id="date_label"> Selected Value: </span>
+        </div>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        In the following sample, a specific date ranges from 7th to 27th of a month has been set to select from the Calendar. All the other dates are out of range, and <code>restricted</code> to set or select.
+    </p>
+</div>
+<div id="description">
+    <p>
+        Date Range sample illustrates the date selection within a specific range in a calendar by using <code>min</code> and <code>max</code> properties. Here, the date selection range was resricted within 5/5/2017 - 5/27/2017.
+    </p>
+    <p>More information on the date range restriction can be found in this
+        <a href="http://ej2.syncfusion.com/documentation/calendar/getting-started.html#range" target="_blank"> documentation section</a>.</p>
+
+</div>
+<style>
+    #date_label {
+        display: block;
+        width: 248px;
+        color: rgba(0, 0, 0, 0.58);
+        margin-left: 5px;
+    }
+    
+    .control_wrapper {
+        max-width: 300px;
+        margin: 0 auto;
+    }
+</style>

src/calendar/range.js

@@ -0,0 +1,11 @@
+this.default = function () {
+    var calendar = new ej.calendars.Calendar({
+        min: new Date('05/05/2017'),
+        max: new Date('05/27/2017'),
+        change: startDate
+    });
+    calendar.appendTo('#calendar');
+    function startDate(args) {
+        (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();
+    }
+};

src/calendar/sample.json

@@ -0,0 +1,7 @@
+{ "name": "Calendar", "directory": "calendar", "category":"Editors", "samples" : [
+    {"url":"default", "name": "Default Functionalities", "category":"Calendar"},
+    {"url":"disabled", "name": "Disabled Dates", "category":"Calendar"},
+    {"url":"range", "name": "Date Range", "category":"Calendar"},
+    {"url":"special", "name": "Special Dates", "category":"Calendar"},
+    {"url":"internationalization", "name": "Internationalization", "category":"Calendar"}
+]}

src/calendar/special.html

@@ -0,0 +1,77 @@
+<div class="col-lg-12 control-section">
+    <div class="control_wrapper" style="overflow:auto">
+        <div id="container">
+            <div id="calendar"></div><br/>
+            <span id="date_label"> Selected Value: </span>
+        </div>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        In the following sample, specific dates are <code>highlighted</code> to notify the additional information of that date. Click the <code>special date</code>, and the tooltip information about the date will be displayed in the label below the Calendar.
+    </p>
+</div>
+<div id="description">
+    <p>
+        Special Dates sample demonstrates, how to customize a specific dates in a calendar by using <code>renderDayCell</code> event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific dates
+        in calendar. Here 10, 15 and 20 date's are customized with custom styles and custom classes. </p>
+    <p>More information on the calendar customization can be found in this
+        <a href="http://ej2.syncfusion.com/documentation/calendar/customization.html" target="_blank"> documentation section</a>.</p>
+</div>
+<style>
+    #date_label {
+        display: block;
+        width: 248px;
+        color: rgba(0, 0, 0, 0.58);
+        margin-left: 5px;
+    }
+    
+    .control_wrapper {
+        max-width: 300px;
+        margin: 0 auto;
+    }
+    
+    span.e-icons.highlight {
+        margin-top: -13px;
+        display: block;
+        margin-left: 4px;
+    }
+    
+    span.e-icons.highlight,
+    span.e-icons.highlight:before {
+        color: rgb(0, 0, 255);
+    }
+    
+    span.e-icons.highlight:before {
+        content: "\e865";
+        vertical-align: middle;
+        margin-right: 3px;
+        font-size: 4px;
+        position: relative;
+        top: -1px;
+        font-weight: normal;
+    }
+    
+    .e-bigger.e-calendar span.e-icons.highlight:before,
+    .e-bigger .e-calendar span.e-icons.highlight:before {
+        top: -3px;
+    }
+    
+    .e-selected span.e-icons.highlight:before {
+        color: #fff;
+    }
+    
+    span.e-icons.highlight,
+    .e-calendar .e-content span.special,
+    .e-calendar .e-content span.daycell {
+        font-weight: bold;
+    }
+    
+    .e-calendar .e-content span.special {
+        color: red;
+    }
+    
+    .e-calendar .e-content span.daycell {
+        color: #ff9e00;
+    }
+</style>

src/calendar/special.js

@@ -0,0 +1,26 @@
+this.default = function () {
+    var calendar = new ej.calendars.Calendar({
+        renderDayCell: customDates, change: valueChange
+    });
+    calendar.appendTo('#calendar');
+    function valueChange(args) {
+        (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();
+    }
+    function customDates(args) {
+        if (args.date.getDate() === 10) {
+            var span = document.createElement('span');
+            span.setAttribute('class', 'e-icons highlight');
+            args.element.appendChild(span);
+            args.element.setAttribute('title', 'Birthday !');
+            args.element.setAttribute('data-val', 'Birthday !');
+        }
+        if (args.date.getDate() === 15) {
+            args.element.className = 'special';
+            args.element.setAttribute('title', 'Farewell');
+            args.element.setAttribute('data-val', 'Farewell !');
+        }
+        if (args.date.getDate() === 20) {
+            args.element.className = 'daycell';
+        }
+    }
+};

src/chart/adindicator.html

@@ -0,0 +1,25 @@
+<div class="control-section">
+    <div id="adi-container" align="center"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates a stock chart with candle series and an accumulation distribution indicator. Trackball shows the information about the stock and signal value of a day.
+   </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the Accumulation Distribution Indicator.
+    </p>
+    <p>
+        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+    </p>
+    <p>
+        More information on the Accumulation Distribution Indicator can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/adindicator.js

@@ -0,0 +1,89 @@
+/**
+ * Sample for ADI Indicator
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'DateTime',
+            intervalType: 'Months',
+            majorGridLines: { width: 0 },
+            zoomFactor: 0.1,
+            skeleton: 'yMd',
+            crosshairTooltip: { enable: true },
+        },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            title: 'Price',
+            labelFormat: '${value}',
+            minimum: 50, maximum: 170,
+            interval: 30, rowIndex: 1,
+            plotOffset: 25, 
+            opposedPosition: true, lineStyle: { width: 0 }
+        },
+        //Initializing Rows
+        rows: [ { height: '40%' }, { height: '60%' } ],
+        //Initializing Axes
+        axes: [{
+                name: 'secondary',
+                opposedPosition: true, rowIndex: 0,
+                majorGridLines: { width: 0 }, 
+                minimum: -7000000000, 
+                maximum: 5000000000,
+                lineStyle: { width: 0 }, 
+                interval: 6000000000, 
+                majorTickLines: { width: 0 }, 
+                title: 'Accumulation Distribution',
+                stripLines: [
+                    {
+                        start: -7000000000, opacity: 0.1, zIndex: 'Behind',
+                        end: 6000000000, text: '', color: '#6063ff', visible: true,
+                    }
+                ]
+            }],
+        //Initializing Chart Series
+        series: [{
+                dataSource: window.chartData, width: 2, name: 'Apple Inc', 
+                xName: 'x', yName: 'y', 
+                low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
+                bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
+                type: 'Candle', animation: { enable: true }
+            }],
+        //Initializing Technical Indicator
+        indicators: [{
+                type: 'AccumulationDistribution', 
+                field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
+                period: 3, animation: { enable: true }
+            }],
+        //Initializing User Interaction Zoom, Tooltip and Crosshair
+        zoomSettings: {
+            enableMouseWheelZooming: true,
+            enablePinchZooming: true,
+            enableSelectionZooming: true,
+            mode: 'X'
+        },
+        //Initializing User Interaction Tooltip
+        tooltip: {
+            enable: true, shared: true
+        },
+        axisLabelRender: function (args) {
+            if (args.axis.name === 'secondary') {
+                var value = Number(args.text) / 1000000000;
+                args.text = String(value) + 'bn';
+            }
+        },
+        chartArea: { border: { width: 0 } },
+        //Initializing Chart Title
+        title: 'AAPL 2012-2017',
+        //Initializing User Interaction Crosshair
+        crosshair: { enable: true, lineType: 'Vertical' },
+        width: ej.base.Browser.isDevice ? '100%' : '80%',
+        load: function (args) {
+            var adiTheme = location.hash.split('/')[1];
+            adiTheme = adiTheme ? adiTheme : 'Material';
+            args.chart.theme = (adiTheme.charAt(0).toUpperCase() + adiTheme.slice(1));
+        },
+        legendSettings: { visible: false },
+    });
+    chart.appendTo('#adi-container');
+};

src/chart/area-empty.html

@@ -0,0 +1,26 @@
+<div class="control-section">
+    <div id="area-container"  align="center"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates an area series with empty points. 
+        Data points with null points are dropped here.
+    </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render a area series with empty points. Similar to line type series, but the area get closed and filled with series color.
+        You can use <code>border</code>, <code>fill</code> properties to customize the area. <code>marker</code> and <code>dataLabel</code> are used to represent individual data and its value.
+        Legend is enabled in this example with series type shape.
+     </p>     
+      <br>
+        <p>
+            More information on the area series can be found in this
+            <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+        </p> 
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/area-empty.js

@@ -0,0 +1,53 @@
+/**
+ * Sample for Area Series with empty points
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'Category',
+            interval: 2,
+            majorGridLines: { width: 0 },
+            edgeLabelPlacement: 'Shift'
+        },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            title: 'Rates',
+            majorGridLines: { width: 0 },
+            labelFormat: '{value}M'
+        },
+        chartArea: {
+            border: {
+                width: 0
+            }
+        },//Initializing Chart Series
+        series: [
+            {
+                type: 'Area',
+                dataSource: [{ x: '2002', y: 2 }, { x: '2003', y: 1.7 }, { x: '2004', y: 1.8 }, { x: '2005', y: 2.1 },
+                    { x: '2006', y: 2.3 }, { x: '2007', y: 1.7 }, { x: '2008', y: 1.5 }, { x: '2009', y: 1.8 },
+                    { x: '2010', y: 2 }, { x: 2011, y: 3.1 }],
+                xName: 'x', width: 2,
+                yName: 'y', name: 'France',
+                opacity: 0.8, marker: { visible : false }
+            }, {
+                type: 'Area',
+                dataSource: [{ x: '2002', y: 2.2 }, { x: '2003', y: 3.4 }, { x: '2004', y: 2.8 }, { x: '2005', y: null },
+                    { x: '2006', y: null }, { x: '2007', y: 2.5 }, { x: '2008', y: 2.9 }, { x: '2009', y: 3.8 },
+                    { x: '2010', y: 1.4 }, { x: 2011, y: 3.1 }],
+                xName: 'x', width: 2,
+                yName: 'y', name: 'US',
+                opacity: 0.8, marker: { visible : false }
+            },
+        ],
+        //Initializing Chart Title
+        title: 'Inflation Rate',
+        width: ej.base.Browser.isDevice ? '100%' : '60%',
+        load: function (args) {
+            var areaEmptyTheme = location.hash.split('/')[1];
+            areaEmptyTheme = areaEmptyTheme ? areaEmptyTheme : 'Material';
+            args.chart.theme = (areaEmptyTheme.charAt(0).toUpperCase() + areaEmptyTheme.slice(1));
+        }
+    });
+    chart.appendTo('#area-container');
+};

src/chart/area.html

@@ -0,0 +1,26 @@
+<div class="control-section">
+    <div id="area-container"  align="center"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample visualizes the data about average sales comparison of two products by using default area series in the chart. 
+        Legend in the sample shows the information about the series.
+    </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the area type charts. Similar to line type series, but the area get closed and filled with series color.
+        You can use <code>border</code>, <code>fill</code> properties to customize the area. <code>marker</code> and <code>dataLabel</code> are used to represent individual data and its value.
+        Legend is enabled in this example with series type shape.
+     </p>     
+      <br>
+        <p>
+            More information on the area series can be found in this
+            <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+        </p> 
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/area.js

@@ -0,0 +1,59 @@
+/**
+ * Sample for Area Series
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'DateTime',
+            labelFormat: 'y',
+            majorGridLines: { width: 0 },
+            intervalType: 'Years',
+            edgeLabelPlacement: 'Shift'
+        },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            title: 'Revenue in Millions',
+            minimum: 2,
+            maximum: 5,
+            interval: 1,
+            majorGridLines: { width: 0 },
+            labelFormat: '{value}M'
+        },
+        chartArea: {
+            border: {
+                width: 0
+            }
+        },
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'Area',
+                dataSource: [{ x: new Date(2000, 0, 1), y: 4 }, { x: new Date(2001, 0, 1), y: 3.0 },
+                    { x: new Date(2002, 0, 1), y: 3.8 }, { x: new Date(2003, 0, 1), y: 3.4 },
+                    { x: new Date(2004, 0, 1), y: 3.2 }, { x: new Date(2005, 0, 1), y: 3.9 }],
+                xName: 'x', width: 2,
+                yName: 'y', name: 'Product A',
+                opacity: 0.5, marker: { visible : false }
+            },
+            {
+                type: 'Area',
+                dataSource: [{ x: new Date(2000, 0, 1), y: 2.6 }, { x: new Date(2001, 0, 1), y: 2.8 },
+                    { x: new Date(2002, 0, 1), y: 2.6 }, { x: new Date(2003, 0, 1), y: 3 },
+                    { x: new Date(2004, 0, 1), y: 3.6 }, { x: new Date(2005, 0, 1), y: 3 }],
+                xName: 'x', width: 2,
+                yName: 'y', name: 'Product B',
+                opacity: 0.5, marker: { visible : false }
+            }
+        ],
+        //Initializing Chart Title
+        title: 'Average Sales Comparison',
+        width: ej.base.Browser.isDevice ? '100%' : '60%',
+        load: function (args) {
+            var areaTheme = location.hash.split('/')[1];
+            areaTheme = areaTheme ? areaTheme : 'Material';
+            args.chart.theme = (areaTheme.charAt(0).toUpperCase() + areaTheme.slice(1));
+        }
+    });
+    chart.appendTo('#area-container');
+};

src/chart/atrindicator.html

@@ -0,0 +1,26 @@
+<div class="control-section">
+    <div id="atr-container" align="center"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates a stock chart with candle series and an average true range indicator. 
+        Trackball shows the information about the stock and signal value of a day.
+   </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the Average True Range Indicator.
+    </p>
+    <p>
+        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+    </p>
+    <p>
+        More information on the Average True Range Indicator can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/atrindicator.js

@@ -0,0 +1,86 @@
+/**
+ * Sample for ATR Indicator
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'DateTime',
+            intervalType: 'Months',
+            majorGridLines: { width: 0 },
+            skeleton: 'yMd',
+            zoomFactor: 0.2, zoomPosition: 0.6,
+            crosshairTooltip: { enable: true },
+        },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            title: 'Price',
+            labelFormat: '${value}',
+            minimum: 50, maximum: 170,
+            interval: 30, rowIndex: 1,
+            plotOffset: 25,
+            majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 }
+        },
+        //Initializing Rows
+        rows: [
+            {
+                height: '40%'
+            }, {
+                height: '60%'
+            }
+        ],
+        //Initializing Axes
+        axes: [{
+                name: 'secondary',
+                opposedPosition: true, rowIndex: 0,
+                majorGridLines: { width: 0 }, lineStyle: { width: 0 }, majorTickLines: { width: 0 },
+                maximum: 14, minimum: 0, interval: 7, title: 'ATR',
+                stripLines: [
+                    {
+                        start: 0, end: 14, text: '',
+                        opacity: 0.1, 
+                        color: '#6063ff', visible: true,
+                        zIndex: 'Behind'
+                    }
+                ]
+            }],
+        //Initializing Chart Series
+        series: [{
+                dataSource: window.chartData, width: 2,
+                xName: 'x', yName: 'y', low: 'low', 
+                bullFillColor: '#e74c3d',
+                high: 'high', close: 'close', volume: 'volume', open: 'open',
+                name: 'Apple Inc', bearFillColor: '#2ecd71', 
+                type: 'Candle', animation: { enable: true }
+            }],
+        //Initializing Technical Indicator
+        indicators: [{
+                type: 'Atr', field: 'Close', 
+                seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
+                period: 3, 
+                animation: { enable: true }
+            }],
+        //Initializing Zoom
+        zoomSettings: {
+            mode: 'X',
+            enableMouseWheelZooming: true,
+            enablePinchZooming: true,
+            enableSelectionZooming: true,
+        },
+        //Initializing Tooltip
+        tooltip: {
+            enable: true, shared: true
+        },
+        //Initializing Crosshair
+        crosshair: { enable: true, lineType: 'Vertical' },
+        chartArea: { border: { width: 0 } }, title: 'AAPL 2012-2017',
+        width: ej.base.Browser.isDevice ? '100%' : '80%',
+        load: function (args) {
+            var atrTheme = location.hash.split('/')[1];
+            atrTheme = atrTheme ? atrTheme : 'Material';
+            args.chart.theme = (atrTheme.charAt(0).toUpperCase() + atrTheme.slice(1));
+        },
+        legendSettings: { visible: false }
+    });
+    chart.appendTo('#atr-container');
+};

src/chart/bar.html

@@ -0,0 +1,31 @@
+<div class="control-section">
+    <div id="bar-container" align="center"></div>
+    <div style="float: right; margin-right: 10px;">Source:
+       <a href="https://www.gov.uk/" target='_blank'>www.gov.uk</a>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample visualizes the data about UK trade in food groups of the year 2015 with default bar series in the chart. 
+        Data points values are showed by using data label.
+    </p>
+</div>
+<div id="description">
+    <p>
+    In this example, you can see how to render and configure the bar type charts. Similar to column charts, but the orientation of y axis is horizontal instead of vertical.
+    You can use <code>border</code>, <code>fill</code> properties to customize the data appearance. <code>dataLabel</code> is used to represent individual data and its value.
+    </p>
+    <p>
+      Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+    </p>
+     <br>
+        <p>
+            More information on the bar series can be found in this
+            <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+        </p> 
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/bar.js

@@ -0,0 +1,82 @@
+/**
+ * Sample for Bar Series
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'Category',
+            title: 'Food',
+            interval: 1,
+            majorGridLines: { width: 0 }
+        },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            minimum: 0,
+            maximum: 3.2,
+            labelFormat: '{value}B',
+            edgeLabelPlacement: 'Shift',
+            majorGridLines: { width: 0 },
+            majorTickLines: { width: 0 },
+            lineStyle: { width: 0 },
+            labelStyle: {
+                color: 'transparent'
+            }
+        },
+        chartArea: {
+            border: {
+                width: 0
+            }
+        },
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'Bar',
+                dataSource: [
+                    { x: 'Egg', y: 2.2 }, { x: 'Fish', y: 2.4 },
+                    { x: 'Misc', y: 3 }, { x: 'Tea', y: 3.1 }
+                ],
+                xName: 'x', width: 2,
+                yName: 'y', name: 'Imports', marker: {
+                    dataLabel: {
+                        visible: true,
+                        position: 'Top',
+                        font: {
+                            fontWeight: '600', color:'#ffffff'
+                        }
+                    }
+                }
+            },
+            {
+                type: 'Bar',
+                dataSource: [
+                    { x: 'Egg', y: 1.2 }, { x: 'Fish', y: 1.3 },
+                    { x: 'Misc', y: 1.5 }, { x: 'Tea', y: 2.2 }
+                ],
+                xName: 'x', width: 2,
+                yName: 'y', name: 'Exports', marker: {
+                    dataLabel: {
+                        visible: true,
+                        position: 'Top',
+                        font: {
+                            fontWeight: '600', color:'#ffffff'
+                        }
+                    }
+                }
+            }
+        ],
+        //Initializing Tooltip
+        tooltip: {
+            enable: true
+        },
+        width: ej.base.Browser.isDevice ? '100%' : '60%',
+        //Initializing Chart Title
+        title: 'UK Trade in Food Groups - 2015',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        }
+    });
+    chart.appendTo('#bar-container');
+};

src/chart/bollinger.html

@@ -0,0 +1,27 @@
+<div class="control-section">
+    <div id="bollinger-container" align="center"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates a stock chart with candle series and a Bollinger band indicator. 
+        Trackball shows the information about the stock, signalline, upperline, and lowerline value of a day.
+   </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the BollingerBands type Indicator. You can use <code>border</code>, 
+        <code>fill</code> properties to customize the area.
+    </p>
+    <p>
+        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+    </p>
+    <p>
+        More information on the BollingerIndicator can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/bollinger.js

@@ -0,0 +1,65 @@
+/**
+ * Sample for Bollinger Band Indicator
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        chartArea: {
+            border: {
+                width: 0
+            }
+        },
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'DateTime',
+            intervalType: 'Months',
+            majorGridLines: { width: 0 },
+            zoomFactor: 0.6, zoomPosition: 0.6,
+            skeleton: 'yMd',
+            crosshairTooltip: { enable: true }
+        },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            title: 'Price',
+            labelFormat: '${value}M',
+            minimum: 50, maximum: 170, interval: 30,
+            majorGridLines: { width: 1 },
+            lineStyle: { width: 0 }
+        },
+        //Initializing Technical Indicator
+        indicators: [{
+            type: 'BollingerBands', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',
+            period: 14, animation: { enable: true }, upperLine: { color: '#ffb735', width: 1 }, lowerLine: { color: '#f2ec2f', width: 1 }
+        }],
+        //Initializing Chart Series
+        series: [{
+                dataSource: window.chartData, width: 2,
+                xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', 
+                volume: 'volume', open: 'open',
+                name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
+                type: 'Candle', animation: { enable: false }
+            }],
+        //Initializing Tooltip
+        tooltip: {
+            enable: true, shared: true
+        },
+        //Initializing Crosshair
+        crosshair: { enable: true, lineType: 'Vertical' },
+        //Initializing Zooming
+        zoomSettings: {
+            enableMouseWheelZooming: true,
+            enableSelectionZooming: true,
+            enableDeferredZooming: true,
+            mode: 'X'
+        },
+        width: ej.base.Browser.isDevice ? '100%' : '80%',
+        //Initializing Chart Title
+        title: 'AAPL - 2012-2017',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        },
+        legendSettings: { visible: false }
+    });
+    chart.appendTo('#bollinger-container');
+};

src/chart/boxandwhisker.html

@@ -0,0 +1,57 @@
+<div>
+    <div class="col-lg-9 control-section">
+        <div id="box-container"></div>
+    </div>
+    <div class="col-lg-3 property-section">
+        <table id="property" title="Properties" style="width: 100%">
+            <tr style="height: 50px">
+                <td style="width: 50%">
+                    <div>Mode:
+                    </div>
+                </td>
+                <td style="width: 50%;">
+                    <div>
+                        <select id="mode">				 
+                            <option value='Normal'>Normal</option>        
+                            <option value='Exclusive'>Exclusive</option>
+                            <option value='Inclusive'>Inclusive</option>
+                        </select>
+                    </div>
+                </td>
+            </tr>
+            <tr style="height: 50px">
+                <td style="width: 50%">
+                    <div>Mean: </div>
+                </td>
+                <td style="width: 50%;">
+                    <div>
+                        <input type="checkbox" id="mean" checked>
+                    </div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample visualizes the employees’ age group in various departments of a country with box and whisker type series in the chart. Mode of box and whisker series can be changed by <code>Mode</code> in property panel. To display the <code>mean</code> value in a series, enable the Mean in the property panel.
+    </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the box and whisker type charts. Similar to line type series, but
+        the area get closed and filled with series color. You can use <code>border</code>, <code>fill</code> properties
+        to customize the area. <code>marker</code> and <code>dataLabel</code> are used to represent individual data and its
+        value. Legend is enabled in this example with series type shape.
+    </p>
+    <br>
+    <p>
+        More information on the area series can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/boxandwhisker.js

@@ -0,0 +1,99 @@
+/**
+ * Sample for Box and Whisker Series 
+ */
+this.default = function () {
+    var labelRender = function (args) {
+        var selectedTheme = location.hash.split('/')[1];
+        selectedTheme = selectedTheme ? selectedTheme : 'Material';
+        if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
+            args.fill = window.fabricColors[args.point.index % 10];
+        }
+        else if (selectedTheme === 'material') {
+            args.fill = window.materialColors[args.point.index % 10];
+        }
+        else {
+            args.fill = window.bootstrapColors[args.point.index % 10];
+        }
+        args.border.color = ej.charts.getSaturationColor(args.fill, -0.6);
+    };
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'Category',
+            majorGridLines: { width: 0 },
+            majorTickLines: { width: 0 },
+            edgeLabelPlacement: 'Shift'
+        },
+        chartArea: {
+            border: {
+                width: 0
+            }
+        },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            title: 'Age',
+            minimum: 10,
+            maximum: 60,
+            interval: 10,
+            majorGridLines: { width: 0 },
+            majorTickLines: { width: 0 }
+        },
+        pointRender: labelRender,
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'BoxAndWhisker',
+                dataSource: [
+                    { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
+                    { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
+                    { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
+                    { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
+                    { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
+                    { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
+                    { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
+                    { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
+                    { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
+                ],
+                xName: 'x',
+                yName: 'y',
+                marker: {
+                    visible: true,
+                    width: 10,
+                    height: 10
+                },
+                name: 'Department'
+            }
+        ],
+        tooltip: {
+            enable: true
+        },
+        legendSettings: {
+            visible: false
+        },
+        //Initializing Chart Title
+        title: 'Employee Age Group in Various Department',
+        load: function (args) {
+            var boxTheme = location.hash.split('/')[1];
+            boxTheme = boxTheme ? boxTheme : 'Material';
+            args.chart.theme = (boxTheme.charAt(0).toUpperCase() + boxTheme.slice(1));
+        }
+    });
+    chart.appendTo('#box-container');
+    var mode = new ej.dropdowns.DropDownList({
+        index: 0,
+        placeholder: 'Select Range Bar Color',
+        width: 120,
+        change: function () {
+            chart.series[0].boxPlotMode = mode.value;
+            chart.series[0].animation.enable = false;
+            chart.refresh();
+        }
+    });
+    mode.appendTo('#mode');
+    document.getElementById('mean').onchange = function () {
+        var element = ej.charts.getElement('mean');
+        chart.series[0].showMean = element.checked;
+        chart.series[0].animation.enable = false;
+        chart.refresh();
+    };
+};

src/chart/bubble.html

@@ -0,0 +1,27 @@
+<div class="control-section">
+    <div id="bubble-container" align='center'></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample visualizes the  Literacy Rate and GDP Growth Rate of world countries by using bubble series in the chart. Tooltip shows the information about the  countries.
+    </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the bubble type charts.A bubble chart is a type of chart that displays three dimensions of data. 
+        Each points is drawn as a bubble, where bubble's size deponds on <code>size</code> property. You can use <code>fill</code> property to customize the data appearance.        
+    </p>
+    <p>
+        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+    </p>
+    <br>
+    <p>
+        More information on the bubble series can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/bubble.js

@@ -0,0 +1,82 @@
+var labelRender = function (args) {
+    var selectedTheme = location.hash.split('/')[1];
+    selectedTheme = selectedTheme ? selectedTheme : 'Material';
+    var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',
+        '#ea7a57', '#404041', '#00bdae'];
+    var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',
+        '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];
+    var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',
+        '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];
+    if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
+        args.fill = fabricColors[args.point.index % 10];
+    }
+    else if (selectedTheme === 'material') {
+        args.fill = materialColors[args.point.index % 10];
+    }
+    else {
+        args.fill = bootstrapColors[args.point.index % 10];
+    }
+};
+/**
+ * Sample for Bubble Series
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            title: 'Literacy Rate',
+            minimum: 60,
+            maximum: 100,
+            interval: 5
+        },
+        //Initializing Primary X Axis
+        primaryYAxis: {
+            title: 'GDP Growth Rate',
+            minimum: 0,
+            maximum: 10,
+            interval: 2.5
+        },
+        width: ej.base.Browser.isDevice ? '100%' : '60%',
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'Bubble',
+                dataSource: [
+                    { x: 92.2, y: 7.8, size: 1.347, text: 'China' },
+                    { x: 74, y: 6.5, size: 1.241, text: 'India' },
+                    { x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },
+                    { x: 99.4, y: 2.2, size: 0.312, text: 'US' },
+                    { x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },
+                    { x: 99, y: 0.7, size: 0.0818, text: 'Germany' },
+                    { x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },
+                    { x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },
+                    { x: 99, y: 0.2, size: 0.128, text: 'Japan' },
+                    { x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },
+                    { x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },
+                    { x: 61.3, y: 1.45, size: 0.162, text: 'Nigeria' },
+                    { x: 82.2, y: 3.97, size: 0.7, text: 'Hong Kong' },
+                    { x: 79.2, y: 3.9, size: 0.162, text: 'Netherland' },
+                    { x: 72.5, y: 4.5, size: 0.7, text: 'Jordan' },
+                    { x: 81, y: 3.5, size: 0.21, text: 'Australia' },
+                    { x: 66.8, y: 3.9, size: 0.028, text: 'Mongolia' },
+                    { x: 78.4, y: 2.9, size: 0.231, text: 'Taiwan' }
+                ],
+                minRadius: 3,
+                maxRadius: ej.base.Browser.isDevice ? 6 : 8,
+                xName: 'x', yName: 'y', size: 'size', name: 'Pound',
+                marker: { dataLabel: { name: 'text' } }
+            },
+        ],
+        pointRender: labelRender,
+        //Initializing Chart Series
+        title: 'World Countries Details',
+        //Initializing Tooltip
+        tooltip: {
+            enable: true,
+            format: '${point.text}<br/>Literacy Rate : <b>${point.x}%</b>' +
+            '<br/>GDP Annual Growth Rate : <b>${point.y}</b><br/>Population : <b>${point.size} Billion</b>'
+        },
+        legendSettings: { visible: false }
+    });
+    chart.appendTo('#bubble-container');
+};

src/chart/candle.html

@@ -0,0 +1,26 @@
+<div class="control-section">
+    <div id="candle-container" align="center"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample visualizes the AAPL historical data with default candle series in the chart. Tooltip and crosshair show the information about the data and period.
+   </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the Candle type series. You can use <code>border</code>,
+        <code>fill</code> properties to customize the area.
+    </p>
+    <p>
+        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+    </p>
+    <p>
+        More information on the Candle series can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/candle.js

@@ -0,0 +1,93 @@
+/**
+ * Sample for Candle Series
+ */
+this.default = function () {
+    var getLabelText = function(value) {
+        return (((value) / 1000000000)).toFixed(1) + 'bn';
+    };
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'DateTime',
+            skeleton: 'yMd', zoomFactor: 0.2, zoomPosition: 0.6,
+            crosshairTooltip: { enable: true },
+            majorGridLines: { width: 0 },
+        },
+        //Initializing Primary X Axis
+        primaryYAxis: {
+            title: 'Volume',
+            labelFormat: '{value}',
+            valueType: 'Logarithmic',
+            minimum: 500000000, maximum: 130000000, opposedPosition: true,
+            majorGridLines: { width: 1 },
+            lineStyle: { width: 0 },
+            stripLines: [
+                {
+                    end: 1300000000, startFromAxis: true, text: '', color: 'black', visible: true,
+                    opacity: 0.03, zIndex: 'Behind'
+                }
+            ]
+        },
+        //Initializing Rows
+        rows: [
+            {
+                height: '30%'
+            }, {
+                height: '70%'
+            }
+        ],
+        //Initializing Axes
+        axes: [{
+                name: 'secondary', minimum: 50, maximum: 180, interval: 40, opposedPosition: true, rowIndex: 1, majorGridLines: { width: 1 },
+                labelFormat: '${value}', title: 'Price', plotOffset: 30, lineStyle: { width: 0 }
+            }],
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'Column',
+                dataSource: window.chartData, animation: { enable: true }, xName: 'x', yName: 'volume',
+                name: 'Volume'
+            },
+            {
+                type: 'Candle', yAxisName: 'secondary', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
+                dataSource: window.chartData, animation: { enable: true },
+                xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc',
+                volume: 'volume'
+            }
+        ],
+        //Initializing Zooming
+        zoomSettings: {
+            enableMouseWheelZooming: true,
+            enablePinchZooming: true,
+            enableSelectionZooming: true,
+            mode: 'X'
+        },
+        //Initializing Chart Title
+        title: 'AAPL Historical',
+        //Initializing Tooltip
+        tooltip: {
+            enable: true, shared: true
+        },
+        tooltipRender: function(args) {
+            if (!args.series.index) {
+                args.textCollections = 'Volume : <b>' +
+                    getLabelText(args.textCollections.split('<b>')[1].split('</b>')[0]) + '</b>';
+            }
+        },
+        axisLabelRender: function (args) {
+            if (args.axis.name === 'primaryYAxis') {
+                args.text = getLabelText(+args.text);
+            }
+        },
+        width: ej.base.Browser.isDevice ? '100%' : '80%',
+        chartArea: { border: { width: 0 } },
+        //Initializing Crosshair
+        crosshair: { enable: true, lineType: 'Vertical' },
+        load: function (args) {
+            var candleTheme = location.hash.split('/')[1];
+            candleTheme = candleTheme ? candleTheme : 'Material';
+            args.chart.theme = (candleTheme.charAt(0).toUpperCase() + candleTheme.slice(1));
+        }
+    });
+    chart.appendTo('#candle-container');
+};

src/chart/category.html

@@ -0,0 +1,30 @@
+<div class="control-section">
+    <div id="category-container" align="center"></div>
+    <div style="float: right; margin-right: 10px;">Source:
+        <a href="http://www.internetworldstats.com/top20.htm" target="_blank">www.internetworldstats.com</a>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample demonstrates the rendering of category axis in the chart with internet users of different countries.
+    </p>
+</div>
+<div id="description">
+    <p>
+        Category axis is used to represent the categories in data. To render category axis, set <code>valueType</code> in
+        axis to <code>Category</code>. Category label can placed between the ticks or on the ticks, based on <code>labelPlacement</code>        property.
+    </p>
+    <p>
+        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+    </p>
+    <br>
+    <p>
+        More information on the Category axis can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype-valuetype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/category.js

@@ -0,0 +1,89 @@
+
+var labelRender = function (args) {
+    var selectedTheme = location.hash.split('/')[1];
+    selectedTheme = selectedTheme ? selectedTheme : 'Material';
+    var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',
+        '#ea7a57', '#404041', '#00bdae'];
+    var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',
+        '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];
+    var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',
+        '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];
+    if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
+        args.fill = fabricColors[args.point.index];
+    }
+    else if (selectedTheme === 'material') {
+        args.fill = materialColors[args.point.index];
+    }
+    else {
+        args.fill = bootstrapColors[args.point.index % 10];
+    }
+};
+
+/**
+ * Sample for Catergory Axis
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            title: 'Country',
+            valueType: 'Category',
+            majorGridLines: { width: 0 }
+        },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            minimum: 0,
+            maximum: 800,
+            labelFormat: '{value}M',
+            edgeLabelPlacement: 'Shift',
+            majorGridLines: { width: 0 },
+            majorTickLines: { width: 0 },
+            lineStyle: { width: 0 },
+            labelStyle: {
+                color: 'transparent'
+            }
+        },
+        width: ej.base.Browser.isDevice ? '100%' : '60%',
+        chartArea: {
+            border: {
+                width: 0
+            }
+        },
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'Bar',
+                dataSource: [
+                    { x: 'GER', y: 71.7 },
+                    { x: 'RUS', y: 103.1 },
+                    { x: 'BRZ', y: 139.1 },
+                    { x: 'IND', y: 462.1 },
+                    { x: 'CHN', y: 721.4 },
+                    { x: 'USA', y: 286.9 },
+                    { x: 'GBR', y: 115.1 },
+                    { x: 'NGR', y: 97.2 },
+                ],
+                xName: 'x', width: 2,
+                yName: 'y', marker: {
+                    dataLabel: {
+                        visible: true,
+                        position: 'Top', font: {
+                            fontWeight: '600',
+                            color: '#ffffff'
+                        }
+                    }
+                },
+                name: 'Users'
+            }
+        ],
+        legendSettings: {
+            visible: false
+        },
+        pointRender: labelRender,
+        //Initializing Chart Title
+        title: 'Internet Users – 2016',
+        //Initializing Tooltip
+        tooltip: { enable: true }
+    });
+    chart.appendTo('#category-container');
+};

src/chart/column-placement.html

@@ -0,0 +1,29 @@
+<div class="control-section">
+    <div id="container" align="center"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates four column series. Each column is rendered with different column width and it is placed  behind to another one.
+    </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the column type charts. Column type charts are used for comparing
+        the frequency, count, total or average of data in different categories. You can use <code>border</code>,
+        <code>fill</code> properties to customize the vertical rect. <code>dataLabel</code> is used to represent individual
+        data and its value.
+    </p>
+    <p>
+        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+    </p>
+    <br>
+    <p>
+        More information on the column series can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/column-placement.js

@@ -0,0 +1,55 @@
+/**
+ * Sample for Column series series with Side by Side Placement
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
+        },
+        chartArea: { border: { width: 0 } },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            minimum: 0, maximum: 12, interval: 3, majorGridLines: { width: 0 },
+            majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
+        },
+        //Initializing Side by Side Placement
+        enableSideBySidePlacement: false,
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Total',
+                dataSource: [{ x: 'Jamesh', y: 10, text: 'Total 10' },
+                    { x: 'Michael', y: 9, text: 'Total 9' }, { x: 'John', y: 11, text: 'Total 11' }],
+                columnWidth: 0.5,
+                marker: { dataLabel: { visible: true, name: 'text', position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
+            },
+            {
+                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Apple',
+                dataSource: [{ x: 'Jamesh', y: 5 }, { x: 'Michael', y: 4 }, { x: 'John', y: 5 }],
+                columnWidth: 0.4,
+                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
+            }, {
+                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Orange',
+                dataSource: [{ x: 'Jamesh', y: 4 }, { x: 'Michael', y: 3 }, { x: 'John', y: 4 }],
+                columnWidth: 0.3,
+                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
+            },
+            {
+                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Grapes',
+                dataSource: [{ x: 'Jamesh', y: 1 }, { x: 'Michael', y: 2 }, { x: 'John', y: 2 }],
+                columnWidth: 0.2,
+                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
+            }
+        ],
+        //Initializing Chart Title
+        title: 'Fruit Consumption', tooltip: { enable: true, shared: true },
+        width: ej.base.Browser.isDevice ? '100%' : '60%',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        }
+    });
+    chart.appendTo('#container');
+};

src/chart/column.html

@@ -0,0 +1,30 @@
+<div class="control-section">
+    <div id="column-container" align="center"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample visualizes the Olympic medal count in Rio with default column series in the chart. 
+        Data points values are showed by using data label.
+    </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the column type charts. Column type charts are used for comparing
+        the frequency, count, total or average of data in different categories. You can use <code>border</code>,
+        <code>fill</code> properties to customize the vertical rect. <code>dataLabel</code> is used to represent individual
+        data and its value.
+    </p>
+    <p>
+        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+    </p>
+    <br>
+    <p>
+        More information on the column series can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/column.js

@@ -0,0 +1,44 @@
+/**
+ * Sample for Column Series
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
+        },
+        chartArea: { border: { width: 0 } },
+        //Initializing Primary X Axis
+        primaryYAxis: {
+            minimum: 0, maximum: 50, interval: 10, majorGridLines: { width: 0 },
+            majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
+        },
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Gold',
+                dataSource: [{ x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }],
+                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }
+            },
+            {
+                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Silver',
+                dataSource: [{ x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }],
+                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }
+            },
+            {
+                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Bronze',
+                dataSource: [{ x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }],
+                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }
+            }
+        ],
+        //Initializing Chart Title
+        title: 'Olympic Medal Counts - RIO', tooltip: { enable: true },
+        width: ej.base.Browser.isDevice ? '100%' : '60%',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        }
+    });
+    chart.appendTo('#column-container');
+};

src/chart/combination-series.html

@@ -0,0 +1,28 @@
+
+<div class="control-section">
+    <div id="series-container" align="center"></div>
+    <div style="float: right; margin-right: 10px;">Source:
+       <a href="http://perspectives.pictet.com/2016/01/29/growth-accelerated-markedly-in-france-and-spain-in-2015/" target="_blank">perspectives.pictet.com</a>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates a combination of line and stacked column series. Tooltip shows the information about the data point.
+    </p>
+</div>
+<div id="description">
+   <p>
+    In this example, you can see how to render and configure the different type of charts. You can render any combination of series in chart except bar.
+    Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+   </p>
+    <br>
+        <p>
+            More information on the series can be found in this
+            <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+        </p> 
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/combination-series.js

@@ -0,0 +1,101 @@
+/**
+ * Sample for Combination Series
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            title: 'Years',
+            interval: 1,
+            labelIntersectAction: 'Rotate45',
+            valueType: 'Category',
+            majorGridLines: { width: 0 }, minorGridLines: { width: 0 },
+            majorTickLines: { width: 0 }, minorTickLines: { width: 0 },
+            lineStyle: { width: 0 },
+        },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            title: 'Growth',
+            minimum: -3,
+            maximum: 3,
+            interval: 1,
+            lineStyle: { width: 0 },
+            majorTickLines: { width: 0 }, majorGridLines: { width: 1 },
+            minorGridLines: { width: 1 }, minorTickLines: { width: 0 },
+            labelFormat: '{value}B',
+        },
+        chartArea: {
+            border: {
+                width: 0
+            }
+        },
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'StackingColumn',
+                dataSource: [
+                    { x: '2007', y: 1 }, { x: '2008', y: 0.25 },
+                    { x: '2009', y: 0.1 }, { x: '2010', y: 1 },
+                    { x: '2011', y: 0.1 }, { x: '2012', y: -0.25 },
+                    { x: '2013', y: 0.25 }, { x: '2014', y: 0.6 }
+                ],
+                xName: 'x', yName: 'y', name: 'Private Consumption',
+            }, {
+                type: 'StackingColumn',
+                dataSource: [
+                    { x: '2007', y: 0.5 }, { x: '2008', y: 0.35 },
+                    { x: '2009', y: 0.9 }, { x: '2010', y: 0.5 },
+                    { x: '2011', y: 0.25 }, { x: '2012', y: -0.5 },
+                    { x: '2013', y: 0.5 }, { x: '2014', y: 0.6 }
+                ],
+                xName: 'x', yName: 'y', name: 'Government Consumption',
+            }, {
+                type: 'StackingColumn',
+                dataSource: [
+                    { x: '2007', y: 1.5 }, { x: '2008', y: 0.35 },
+                    { x: '2009', y: -2.7 }, { x: '2010', y: 0.5 },
+                    { x: '2011', y: 0.25 }, { x: '2012', y: -0.1 },
+                    { x: '2013', y: -0.3 }, { x: '2014', y: -0.6 }
+                ],
+                xName: 'x', yName: 'y', name: 'Investment',
+            }, {
+                type: 'StackingColumn',
+                dataSource: [
+                    { x: '2007', y: -1 }, { x: '2008', y: -0.35 },
+                    { x: '2009', y: -0.3 }, { x: '2010', y: -0.5 },
+                    { x: '2011', y: 0 }, { x: '2012', y: -0.4 },
+                    { x: '2013', y: 0 }, { x: '2014', y: -0.6 }
+                ],
+                xName: 'x', yName: 'y', name: 'Net Foreign Trade'
+            }, {
+                type: 'Line',
+                dataSource: [
+                    { x: '2007', y: 2 }, { x: '2008', y: 0.1 },
+                    { x: '2009', y: -2.7 }, { x: '2010', y: 1.8 },
+                    { x: '2011', y: 2 }, { x: '2012', y: 0.4 },
+                    { x: '2013', y: 0.9 }, { x: '2014', y: 0.4 }
+                ],
+                xName: 'x', yName: 'y', name: 'GDP',
+                width: 2,
+                marker: {
+                    visible: true,
+                    width: 10,
+                    height: 10
+                },
+            }
+        ],
+        width: ej.base.Browser.isDevice ? '100%' : '60%',
+        //Initializing Chart Title
+        title: 'Annual Growth GDP in France',
+        //Initializing Tooltip
+        tooltip: {
+            enable: true
+        },
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        }
+    });
+    chart.appendTo('#series-container');
+};

src/chart/cross-hair.html

@@ -0,0 +1,26 @@
+<div class="control-section">
+    <div id="crosshair-container" align='center' style="width:92%"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates crosshair feature in chart. To see crosshair, hover or long press the chart.
+    </p>
+</div>
+<div id="description">
+    <p>This sample demonstrates the crosshair behavior in chart. Crosshair is used to inspect or focus on an individual data point.
+        You can customize the axis tooltip using <code>crosshairTooltip</code> properties in axis.
+    </p>
+    <p> 
+         Hover the chart area to view crosshair and its tooltip. Touch and hold to enable crosshair in touch enabled devices. 
+    </p>
+      <br>
+        <p>
+            More information on the Crosshair can be found in this
+            <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-crosshairOptions.html">documentation section</a>.
+        </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/cross-hair.js

@@ -0,0 +1,70 @@
+/**
+ * Sample for Crosshair in chart
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            majorGridLines: { width: 0 },
+            valueType: 'DateTime',
+            crosshairTooltip: { enable: true },
+            labelFormat: 'MMM'
+        },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            minimum: 83, maximum: 87, interval: 1,
+            title: 'Million in USD',
+            labelFormat: '{value}M',
+            rowIndex: 0,
+            crosshairTooltip: {
+                enable: true
+            }
+        },
+        //Initializing Axes
+        axes: [
+            {
+                majorGridLines: { width: 0 },
+                rowIndex: 0,
+                opposedPosition: true,
+                minimum: 82, maximum: 88, interval: 2,
+                name: 'yAxis',
+                title: 'Million in USD (Stock)',
+                crosshairTooltip: { enable: true }
+            }
+        ],
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'Line',
+                dataSource: window.axesData,
+                border: { width: 1.5 },
+                xName: 'xDate', width: 2,
+                yName: 'High',
+                marker: {
+                    visible: true
+                }
+            },
+            {
+                type: 'HiloOpenClose',
+                dataSource: window.axesData,
+                yAxisName: 'yAxis',
+                border: { width: 1.5 },
+                bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
+                xName: 'xDate', width: 2,
+                high: 'High', low: 'Low', open: 'Open', close: 'Close'
+            }
+        ],
+        //Initializing Crosshair
+        crosshair: { enable: true },
+        legendSettings: { visible: false },
+        width: ej.base.Browser.isDevice ? '100%' : '80%',
+        //Initializing Chart Title
+        title: 'Conns,Inc Stock Details',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        }
+    });
+    chart.appendTo('#crosshair-container');
+};

src/chart/dashed-line.html

@@ -0,0 +1,70 @@
+<div class="control-section">
+    <div id="container" align='center'></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates a line series with dash array. 
+        Dashed lines are animated by using css animation.
+    </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the line type charts. Line type charts are used to represent time-dependent
+        data, showing trends in data at equal intervals. You can use
+        <code>dashArray</code>,
+        <code>width</code>,
+        <code>fill</code> properties to customize the line.
+        <code>marker</code> and
+        <code>dataLabel</code> are used to represent individual data and its value.
+    </p>
+    <p>
+        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+    </p>
+    <br>
+    <p>
+        More information on the line series can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+
+    #container_Series_1,
+    #container_Series_0 {
+        stroke-dasharray: 10;
+        stroke-dasharray: 10px 10px;
+        stroke-linejoin: round; stroke-linecap: round;
+        -webkit-animation: dash 1s linear infinite;
+        animation: dash 1s linear infinite;
+    }
+
+    #container_Series_0_Point_3_Symbol {
+        -webkit-animation: opac 1s ease-out infinite;
+        animation: opac 1s ease-out infinite;
+    }
+
+    @-webkit-keyframes dash {
+        100% {
+            stroke-dashoffset: -20px;
+        }
+    }
+
+    @keyframes dash {
+        100% {
+            stroke-dashoffset: -20px;
+        }
+    }
+
+    @keyframes opac {
+        0% {
+            stroke-opacity: 1;
+            stroke-width: 0px;
+        }
+        100% {
+            stroke-opacity: 0;
+            stroke-width: 10px;
+        }
+    }
+</style>

src/chart/dashed-line.js

@@ -0,0 +1,89 @@
+/**
+ * Sample for line series with dashed line
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'DateTime',
+            labelFormat: 'y',
+            intervalType: 'Years',
+            edgeLabelPlacement: 'Shift',
+            majorGridLines: { width: 0 }
+        },
+        //Initializing Primary X Axis
+        primaryYAxis: {
+            labelFormat: '{value}%',
+            rangePadding: 'None',
+            minimum: 0,
+            maximum: 40,
+            interval: 10,
+            lineStyle: { width: 0 },
+            majorTickLines: { width: 0 },
+            minorTickLines: { width: 0 }
+        },
+        chartArea: {
+            border: {
+                width: 0
+            }
+        },
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'Line',
+                dataSource: [
+                    { x: new Date(2005, 0, 1), y: 12 }, { x: new Date(2006, 0, 1), y: 10.6 },
+                    { x: new Date(2007, 0, 1), y: 15.6 }, { x: new Date(2008, 0, 1), y: 38.6 },
+                    { x: new Date(2009, 0, 1), y: 27.4 }, { x: new Date(2010, 0, 1), y: 23.5 },
+                    { x: new Date(2011, 0, 1), y: 16.6 }
+                ],
+                xName: 'x', width: 2, marker: {
+                    visible: true,
+                    width: 10,
+                    height: 10
+                },
+                dashArray: '5',
+                yName: 'y', name: 'Banana',
+            },
+            {
+                type: 'Line',
+                dataSource: [
+                    { x: new Date(2005, 0, 1), y: 9.5 }, { x: new Date(2006, 0, 1), y: 19.9 },
+                    { x: new Date(2007, 0, 1), y: 25.2 }, { x: new Date(2008, 0, 1), y: 36 },
+                    { x: new Date(2009, 0, 1), y: 16.6 }, { x: new Date(2010, 0, 1), y: 14.2 }, { x: new Date(2011, 0, 1), y: 10.3 }
+                ],
+                xName: 'x', width: 2, marker: {
+                    visible: true,
+                    width: 10,
+                    height: 10,
+                    shape: 'Diamond'
+                },
+                dashArray: '10',
+                yName: 'y', name: 'Apple',
+            }
+        ],
+        //Initializing Chart Title
+        title: 'Fruits Production Statistics',
+        //Initializing Tootlip
+        tooltip: {
+            enable: true,
+            shared: true
+        },
+        //Initializing Crosshair
+        crosshair: {
+            enable: true,
+            line: {
+                color: 'rgba(204,214,235,0.25)',
+                width: ej.base.Browser.isDevice ? 50 : 20,
+            },
+            lineType: 'Vertical'
+        },
+        width: ej.base.Browser.isDevice ? '100%' : '60%',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        }
+    });
+    chart.appendTo('#container');
+};

src/chart/data-label-template.html

@@ -0,0 +1,88 @@
+<div class="control-section">
+    <div id="temp-container" align="center"></div>
+    <div style="float: right; margin-right: 10px;">
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates datalabel template support in the chart. In this sample, images are placed as datalabel by means of templates.
+    </p>
+</div>
+<div id="description">
+    <p>
+        Label content can be formatted by using the template option in dataLabel. Inside the template, you can add the placeholder
+        text ${point.y}M to display corresponding data points value.
+    </p>
+    <br>
+    <p>
+        More information on the Crosshair can be found in this &nbsp;
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-dataLabelSettingsModel.html">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+    
+    #templateWrap img {
+        border-radius: 0px;
+        width: 24px;
+        padding: 4px;
+        height: 24px;
+    }
+    
+    #templateWrap .des {
+        float: right;
+        padding: 2px;
+        line-height: 20px;
+        text-align: center;
+    }
+</style>
+<script id='Male-Fabric' type="text/x-template">
+    <div id='templateWrap' style="background-color:#4472c4;border-radius: 3px;">
+        <img src='src/chart/images/male.png' />
+        <div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px; padding-right:6px">
+            <span>${point.y}M </span>
+        </div>
+    </div>
+</script>
+<script id='Female-Fabric' type="text/x-template">
+    <div id='templateWrap' style="background-color:#ed7d31;border-radius: 3px;">
+        <img src='src/chart/images/female.png' />
+        <div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
+            <span>${point.y}M </span>
+        </div>
+    </div>
+</script>
+<script id='Male-Material' type="text/x-template">
+    <div id='templateWrap' style="background-color:#00bdae;border-radius: 3px;">
+        <img src='src/chart/images/male.png' />
+        <div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
+            <span>${point.y}M </span>
+        </div>
+    </div>
+</script>
+<script id='Female-Material' type="text/x-template">
+    <div id='templateWrap' style="background-color:#404041;border-radius: 3px;">
+        <img src='src/chart/images/female.png' />
+        <div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
+            <span>${point.y}M </span>
+        </div>
+    </div>
+</script>
+<script id='Male-Bootstrap' type="text/x-template">
+    <div id='templateWrap' style="background-color:#a16ee5;border-radius: 3px;">
+        <img src='src/chart/images/male.png' />
+        <div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
+            <span>${point.y}M </span>
+        </div>
+    </div>
+</script>
+<script id='Female-Bootstrap' type="text/x-template">
+    <div id='templateWrap' style="background-color:#f7ce69;border-radius: 3px;">
+        <img src='src/chart/images/female.png' />
+        <div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
+            <span>${point.y}M </span>
+        </div>
+    </div>
+</script>

src/chart/data-label-template.js

@@ -0,0 +1,104 @@
+/**
+ * Sample for Data Label Template
+ */
+this.default = function () {
+    var theme;
+    var chart = new ej.charts.Chart({
+        //Initializing Chart Title
+        title: 'Population of India ( 2010 - 2016 )',
+        titleStyle: {
+            color: '#606060', fontFamily: 'Roboto',
+            fontStyle: 'medium', size: '14px'
+        },
+        chartArea: { border: { width: 0 } },
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            minimum: 2010, maximum: 2016,
+            interval: 1,
+            edgeLabelPlacement: 'Shift',
+            labelStyle: {
+                color: '#606060',
+                fontFamily: 'Roboto',
+                fontStyle: 'medium',
+                size: '14px'
+            },
+            majorGridLines: { width: 0 },
+            lineStyle: { color: '#eaeaea', width: 1 }
+        },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            minimum: 900, maximum: 1300,
+            labelFormat: '{value}M',
+            labelStyle: {
+                color: '#606060',
+                fontFamily: 'Roboto',
+                fontStyle: 'medium',
+                size: '14px'
+            },
+            title: 'Population',
+            interval: 80,
+            majorGridLines: {
+                color: '#eaeaea',
+                width: 1
+            },
+            lineStyle: {
+                color: '#eaeaea',
+                width: 1
+            }
+        },
+        //Initializing Chart Title
+        series: [
+            {
+                name: 'Male',
+                dataSource: [
+                    { x: 2010, y: 1014 }, { x: 2011, y: 1040 },
+                    { x: 2012, y: 1065 }, { x: 2013, y: 1110 },
+                    { x: 2014, y: 1130 }, { x: 2015, y: 1153 },
+                    { x: 2016, y: 1175 }
+                ], xName: 'x', yName: 'y',
+                marker: {
+                    visible: true,
+                    shape: 'Circle',
+                    dataLabel: {
+                        visible: true,
+                        position: 'Top',
+                        margin: { right: 30 },
+                        template: '#Male-Material'
+                    }
+                }, width: 2
+            }, {
+                name: 'Female',
+                dataSource: [
+                    { x: 2010, y: 990 }, { x: 2011, y: 1010 },
+                    { x: 2012, y: 1030 }, { x: 2013, y: 1070 },
+                    { x: 2014, y: 1105 }, { x: 2015, y: 1138 },
+                    { x: 2016, y: 1155 }
+                ], xName: 'x', yName: 'y',
+                marker: {
+                    visible: true,
+                    shape: 'Rectangle',
+                    dataLabel: {
+                        visible: true,
+                        position: 'Bottom',
+                        margin: { right: 15 },
+                        template: '#Female-Material'
+                    }
+                }, width: 2
+            }
+        ],
+        textRender: function (args) {
+            args.template = '#' + args.series.name + '-' + theme;
+        },
+        width: ej.base.Browser.isDevice ? '100%' : '80%',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            theme = args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+            args.chart.theme = theme;
+        },
+        legendSettings: {
+            visible: true,
+        }
+    });
+    chart.appendTo('#temp-container');
+};

src/chart/date-time.html

@@ -0,0 +1,27 @@
+<div class="control-section">
+    <div id="datetime-container" align="center"></div>
+    <div style="float: right; margin-right: 10px;">Source:
+       <a href="http://www.yr.no/place/USA/Alaska/Hatcher_Pass/statistics.html" target="_blank">www.yr.no</a>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample demonstrates the rendering of date time axis in the chart with weather statistics analysis of Alaska for a year.
+    </p>
+</div>
+<div id="description">    
+    <p>
+        DateTime data is used in this sample and data values are represented using dataLabel. Date time axis uses date time scale and displays the date time values as axis labels. To render dateTime axis, set <code>valueType</code> in axis to <code>DateTime</code>.
+        Format for the axis label will be calculated based on intervalType of axis or we can set the format through labelFormat property in axis.
+    </p>
+      <br>
+        <p>
+            More information on the DateTime axis can be found in this
+            <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype-valuetype">documentation section</a>.
+        </p>      
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/date-time.js

@@ -0,0 +1,73 @@
+/**
+ * Saample for DateTime Axis
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'DateTime',
+            labelFormat: 'MMM',
+            edgeLabelPlacement: 'Shift',
+            majorGridLines: { width: 0 }
+        },
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            minimum: -20,
+            maximum: 30,
+            interval: 10,
+            edgeLabelPlacement: 'Shift',
+            labelFormat: '{value}°C',
+            lineStyle: { width: 0 },
+            majorTickLines: { width: 0 },
+            minorTickLines: { width: 0 }
+        },
+        chartArea: {
+            border: {
+                width: 0
+            }
+        },
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'Line',
+                dataSource: [
+                    { x: new Date(2016, 3, 1), y: 6.3 },
+                    { x: new Date(2016, 4, 1), y: 13.3 }, { x: new Date(2016, 5, 1), y: 18.0 },
+                    { x: new Date(2016, 6, 1), y: 19.8 }, { x: new Date(2016, 7, 1), y: 18.1 },
+                    { x: new Date(2016, 8, 1), y: 13.1 }, { x: new Date(2016, 9, 1), y: 4.1 }
+                ],
+                xName: 'x', width: 2,
+                yName: 'y', name: 'Warmest',
+                marker: {
+                    visible: true,
+                    height: 10, width: 10,
+                    shape: 'Pentagon',
+                    dataLabel: { visible: true, position: 'Top' }
+                }
+            }, {
+                type: 'Line',
+                dataSource: [
+                    { x: new Date(2016, 3, 1), y: -5.3 },
+                    { x: new Date(2016, 4, 1), y: 1.0 }, { x: new Date(2016, 5, 1), y: 6.9 },
+                    { x: new Date(2016, 6, 1), y: 9.4 }, { x: new Date(2016, 7, 1), y: 7.6 },
+                    { x: new Date(2016, 8, 1), y: 2.6 }, { x: new Date(2016, 9, 1), y: -4.9 }
+                ],
+                xName: 'x', width: 2,
+                yName: 'y', name: 'Coldest',
+                marker: {
+                    visible: true, height: 10, width: 10, shape: 'Diamond',
+                    dataLabel: { visible: true, position: 'Bottom' }
+                }
+            }
+        ],
+        width: ej.base.Browser.isDevice ? '100%' : '60%',
+        //Initializing Chart Title
+        title: 'Alaska Weather Statistics - 2016',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        }
+    });
+    chart.appendTo('#datetime-container');
+};

src/chart/default-doughnut.html

@@ -0,0 +1,12 @@
+<div class="control-section">
+    <div id="doughnut-container"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates an educational institute’s revenue by using the pie with legend series. The legend will be displayed at right side of the chart.
+    </p>
+</div>
+<div id="description">
+    <p> In this example, you can see how to render doughnut chart. You can use <code>radius</code> and <code>innerRadius</code> properties to render the doughnut and also use <code>border</code>, <code>fill</code> properties to customize the point. <code>dataLabel</code> is used to represent individual data and its value.</p>
+    <p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
+</div>

src/chart/default-doughnut.js

@@ -0,0 +1,94 @@
+var centerTitle = document.createElement('div');
+centerTitle.innerHTML = 'Expenses <br> Year  &nbsp 2013';
+centerTitle.style.position = 'absolute';
+centerTitle.style.visibility = 'hidden';
+/**
+ * Sample for Doughnut 
+ */
+this.default = function () {
+    var pie = new ej.charts.AccumulationChart({
+        enableSmartLabels: true,
+        //Initializing Selection Mode
+        selectionMode: 'Point',
+        //Initializing Series
+        series: [
+            {
+                dataSource: [
+                    { 'x': 'Net-tution and Fees', y: 21, text: '21%' },
+                    { 'x': 'Self-supporting Operations', y: 21, text: '21%' },
+                    { 'x': 'Private Gifts', y: 8, text: '8%' },
+                    { 'x': 'All Other', y: 8, text: '8%' },
+                    { 'x': 'Local Revenue', y: 4, text: '4%' },
+                    { 'x': 'State Revenue', y: 21, text: '21%' },
+                    { 'x': 'Federal Revenue', y: 16, text: '16%' }
+                ],
+                xName: 'x',
+                yName: 'y',
+                startAngle: 0,
+                endAngle: 360,
+                innerRadius: '40%',
+                dataLabel: {
+                    visible: true, position: 'Inside',
+                    name: 'text',
+                    font: {
+                        color: 'white',
+                        fontWeight: '600',
+                        size: '14px'
+                    }
+                },
+            }
+        ],
+        //Initializing Legend
+        legendSettings: {
+            visible: true,
+            toggleVisibility: false,
+            position: 'Right',
+            height: '28%',
+            width: '44%'
+        },
+        animationComplete: function (args) {
+            centerTitle.style.fontSize = getFontSize(args.accumulation.initialClipRect.width);
+            var rect = centerTitle.getBoundingClientRect();
+            centerTitle.style.top = (args.accumulation.center.y - rect.height / 2) + 'px';
+            centerTitle.style.left = (args.accumulation.center.x - rect.width / 2) + 'px';
+            centerTitle.style.visibility = 'visible';
+            var points = args.accumulation.visibleSeries[0].points;
+            for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {
+                var point = points_1[_i];
+                if (point.labelPosition === 'Outside' && point.labelVisible) {
+                    var label = document.getElementById('doughnut-container_datalabel_Series_0_text_' + point.index);
+                    label.setAttribute('fill', 'black');
+                }
+            }
+        },
+        textRender: function (args) {
+            args.series.dataLabel.font.size = getFontSize(pie.initialClipRect.width);
+            pie.animateSeries = true;
+        },
+        //Initializing Tooltip
+        tooltip: {
+            enable: true, format: '${point.x} <br> Composition: ${point.y}%'
+        },
+        //Initializing Title
+        title: 'Education Institutional Revenue',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+            args.accumulation.legendSettings.position = ej.base.Browser.isDevice ? 'Bottom' : 'Right';
+        }
+    });
+    pie.appendTo('#doughnut-container');
+    document.getElementById('doughnut-container').appendChild(centerTitle);
+    function getFontSize(width) {
+        if (width > 300) {
+            return '13px';
+        }
+        else if (width > 250) {
+            return '8px';
+        }
+        else {
+            return '6px';
+        }
+    }
+};

src/chart/default-pie.html

@@ -0,0 +1,68 @@
+<div>
+    <div class="col-lg-9 control-section">
+        <div class="content-wrapper">
+            <div id="pie-container"></div>
+        </div>
+    </div>
+    <div class="col-lg-3 property-section">
+        <table id="property" title="Properties" style="width: 100%">
+            <tr style="height: 50px">
+                <td style="width: 30%">
+                    <div>Pie Angle:
+                        <p id="anglevalue" style="font-weight: normal;">0</p>
+                    </div>
+                </td>
+                <td style="width: 70%;">
+                    <div data-role="rangeslider">
+                        <input type="range" name="range-min" id="pieangle" value="0" min="0" max="360" style="width:90%">
+                    </div>
+                </td>
+            </tr>
+            <tr style="height: 50px">
+                <td style="width: 30%">
+                    <div>Outer Radius:
+                        <p id="radius" style="font-weight: normal;">0.70</p>
+                    </div>
+                </td>
+                <td style="width: 70%;">
+                    <div data-role="rangeslider">
+                        <input type="range" name="range-min" id="pieradius" value="70" min="0" max="80" style="width:90%">
+                    </div>
+                </td>
+            </tr>
+            <tr style="height: 50px">
+                <td style="width: 30%">
+                    <div>Explode Radius:
+                        <p id="exploderadius" style="font-weight: normal;">0.1</p>
+                    </div>
+                </td>
+                <td style="width: 70%;">
+                    <div data-role="rangeslider">
+                        <input type="range" name="range-min" id="pieexploderadius" value="10" min="0" max="40" style="width:90%">
+                    </div>
+                </td>
+            </tr>
+            <tr style="height: 50px">
+                <td style="width: 30%">
+                    <div>Explode Index:
+                        <p id="explodeindex" style="font-weight: normal;">0</p>
+                    </div>
+                </td>
+                <td style="width: 70%;">
+                    <div data-role="rangeslider">
+                        <input type="range" name="range-min" id="pieexplodeindex" value="0" min="0" max="6" style="width:90%">
+                    </div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample demonstrates pie chart for mobile browser usage statistics. For pie chart, you can change start angle of chart by <code>Pie Angle</code> in properties panel. Outer radius for pie chart can be changed by <code>Outer Radius</code>. Explode Index and explode radius for chart can be changed by <code>Explode Radius</code> and <code>Explode Index</code>
+    </p>
+</div>
+<div id="description">
+    <p> In this example, you can see how to render and configure the pie chart. You can use <code>border</code>, <code>fill</code> properties to customize the pie point. <code>dataLabel</code> is used to represent individual data and its value.</p>
+    <p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
+</div>

src/chart/default-pie.js

@@ -0,0 +1,88 @@
+/**
+ * Sample for Pie Chart
+ */
+this.default = function () {
+    var pie = new ej.charts.AccumulationChart({
+        //Initializing Series
+        series: [
+            {
+                dataSource: [
+                    { 'x': 'Chrome', y: 37, text: '37%' }, { 'x': 'UC Browser', y: 17, text: '17%' },
+                    { 'x': 'iPhone', y: 19, text: '19%' },
+                    { 'x': 'Others', y: 4, text: '4%' }, { 'x': 'Opera', y: 11, text: '11%' },
+                    { 'x': 'Android', y: 12, text: '12%' }
+                ],
+                dataLabel: {
+                    visible: true,
+                    position: 'Inside', name: 'text',
+                    font: {
+                        fontWeight: '600'
+                    }
+                },
+                radius: '70%', xName: 'x',
+                yName: 'y', startAngle: 0,
+                endAngle: 360, innerRadius: '0%',
+                explode: true, explodeOffset: '10%', explodeIndex: 0
+            }
+        ],
+        enableSmartLabels: true,
+        legendSettings: {
+            visible: false,
+        },
+        //Initializing Tooltip
+        tooltip: { enable: true, format: '${point.x} <br> ${point.y} %' },
+        //Initializing Title
+        title: 'Mobile Browser Statistics',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        }
+    });
+    pie.appendTo('#pie-container');
+    function anglechange(value) {
+        pie.series[0].startAngle = +value;
+        pie.series[0].endAngle = +value;
+        document.getElementById('anglevalue').innerHTML = value.toString();
+        pie.removeSvg();
+        pie.refreshSeries();
+        pie.refreshChart();
+    }
+    document.getElementById('pieangle').onpointermove = document.getElementById('pieangle').ontouchmove =
+        document.getElementById('pieangle').onchange = function (e) {
+            anglechange(+document.getElementById('pieangle').value);
+        };
+    function radiuschange(value) {
+        pie.series[0].radius = value + '%';
+        document.getElementById('radius').innerHTML = (value / 100).toFixed(2);
+        pie.removeSvg();
+        pie.refreshSeries();
+        pie.refreshChart();
+    }
+    document.getElementById('pieradius').onpointermove = document.getElementById('pieradius').ontouchmove =
+        document.getElementById('pieradius').onchange = function (e) {
+            radiuschange(+document.getElementById('pieradius').value);
+        };
+    function exploderadius(value) {
+        pie.visibleSeries[0].explodeOffset = value + '%';
+        document.getElementById('exploderadius').innerHTML = (value / 100).toFixed(2);
+        pie.removeSvg();
+        pie.refreshSeries();
+        pie.refreshChart();
+    }
+    document.getElementById('pieexploderadius').onpointermove = document.getElementById('pieexploderadius').ontouchmove =
+        document.getElementById('pieexploderadius').onchange = function (e) {
+            exploderadius(+document.getElementById('pieexploderadius').value);
+        };
+    function explodeIndex(value) {
+        pie.visibleSeries[0].explodeIndex = +value;
+        document.getElementById('explodeindex').innerHTML = value.toString();
+        pie.removeSvg();
+        pie.refreshSeries();
+        pie.refreshChart();
+    }
+    document.getElementById('pieexplodeindex').onpointermove = document.getElementById('pieexplodeindex').ontouchmove =
+        document.getElementById('pieexplodeindex').onchange = function (e) {
+            explodeIndex(+document.getElementById('pieexplodeindex').value);
+        };
+};

src/chart/doughnut.html

@@ -0,0 +1,12 @@
+<div class="control-section">
+    <div id="container"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample visualizes the project cost breakdown statistics by using doughnut series. Datalabel shows the Information about the points. 
+    </p>
+</div>
+<div id="description">
+    <p> In this example, you can see how to render and configure the pie chart. You can use <code>border</code>, <code>fill</code> properties to customize the pie point. <code>dataLabel</code> is used to represent individual data and its value.</p>
+    <p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
+</div>

src/chart/doughnut.js

@@ -0,0 +1,43 @@
+/**
+ * Sample for Doughnut chart
+ */
+this.default = function () {
+    var pie = new ej.charts.AccumulationChart({
+        //Initializing Series
+        series: [
+            {
+                dataSource: [{  x:  'Labour',  y:  18,  text:  '18%'  }, {  x:  'Legal',  y:  8,  text:  '8%'  },
+                {  x:  'Production',  y:  15,  text:  '15%'  }, {  x:  'License',  y:  11,  text:  '11%'  },
+                {  x:  'Facilities',  y:  18,  text:  '18%'  }, {  x:  'Taxes',  y:  14,  text:  '14%'  },
+                {  x:  'Insurance',  y:  16,  text:  '16%'  }],
+                dataLabel: {
+                    visible: true,
+                    name: 'text',
+                    position: 'Inside',
+                    font: {
+                        fontWeight: '600',
+                        color: '#ffffff'
+                    }
+                },
+                radius: '70%', xName: 'x',
+                yName: 'y', startAngle: 0,
+                endAngle: 360, innerRadius: '40%',
+                explode: true, explodeOffset: '10%', explodeIndex: 3
+            }
+        ],
+        enableSmartLabels: true,
+        legendSettings: {
+            visible: false,
+        },
+        //Initializing Tooltip
+        tooltip: { enable: true, format: '${point.x} <br> ${point.y} %' },
+        //Initializing Title
+        title: 'Project Cost Breakdown',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        }
+    });
+    pie.appendTo('#container');
+};

src/chart/drilldown-pie.html

@@ -0,0 +1,25 @@
+<div class="control-section">
+    <div id="link">
+        <a id="category" style="visibility:hidden; display:inline-block">
+					Sales by Category 
+		</a>
+        <p style="visibility:hidden; display:inline-block" id="symbol">&nbsp;&gt;&gt;&nbsp;</p>
+        <p id="text" style="display:inline-block;"></p>
+    </div>
+    <div id="drill-container"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample demonstrates drill down sample with pie chart for a automobiles sales by category. By clicking one category, you can navigate to other sub-category by which companies are differentiated.
+    </p>
+</div>
+<div id="description">
+    <p> In this example, you can see how to achieve <code>drilldown</code> concept using pie control. An automobile sales has been shown by different category, on clicking each category, you can navigate to next level, which shows the sales of those category
+        in terms of company.</p>
+    <p> Datalabel is used in this sample.</p>
+</div>
+<style>
+    #category:hover {
+        cursor: pointer;
+    }
+</style>

src/chart/drilldown-pie.js

@@ -0,0 +1,126 @@
+/**
+ * Drill Down Sample
+ */
+this.default = function () {
+    var suvs = [{ x: 'Toyota', y: 8 }, { x: 'Ford', y: 12 }, { x: 'GM', y: 17 }, { x: 'Renault', y: 6 }, { x: 'Fiat', y: 3 },
+    { x: 'Hyundai', y: 16 }, { x: 'Honda', y: 8 }, { x: 'Maruthi', y: 10 }, { x: 'BMW', y: 20 }];
+    var cars = [{ x: 'Toyota', y: 7 }, { x: 'Chrysler', y: 12 }, { x: 'Nissan', y: 9 }, { x: 'Ford', y: 15 }, { x: 'Tata', y: 10 },
+    { x: 'Mahindra', y: 7 }, { x: 'Renault', y: 8 }, { x: 'Skoda', y: 5 }, { x: 'Volkswagen', y: 15 }, { x: 'Fiat', y: 3 }];
+    var pickups = [{ x: 'Nissan', y: 9 }, { x: 'Chrysler', y: 4 }, { x: 'Ford', y: 7 }, { x: 'Toyota', y: 20 },
+    { x: 'Suzuki', y: 13 }, { x: 'Lada', y: 12 }, { x: 'Bentley', y: 6 }, { x: 'Volvo', y: 10 }, { x: 'Audi', y: 19 }];
+    var minivans = [{ x: 'Hummer', y: 11 }, { x: 'Ford', y: 5 }, { x: 'GM', y: 12 }, { x: 'Chrysler', y: 3 }, { x: 'Jaguar', y: 9 },
+    { x: 'Fiat', y: 8 }, { x: 'Honda', y: 15 }, { x: 'Hyundai', y: 4 }, { x: 'Scion', y: 11 }, { x: 'Toyota', y: 17 }];
+    var clickInstance = {
+        //Initializing Series
+        series: [
+            {
+                type: 'Pie', dataSource: suvs, xName: 'x', yName: 'y',
+                dataLabel: { visible: true, position: 'Outside' }, innerRadius: '30%',
+            }
+        ], textRender: function (args) {
+            args.text = args.point.x + ' ' + args.point.y + ' %';
+        }, annotations: [{
+            content: '<div id="back" style="cursor:pointer;padding:3px;width:30px; height:30px;">' +
+            '<img src="./src/chart/images/back.png" id="back" />', region: 'Series', x: '50%', y: '50%'
+        }], chartMouseClick: function (args) {
+            if (args.target.indexOf('back') > -1) {
+                var tooltip = document.getElementsByClassName('e-tooltip-wrap')[0];
+                if (tooltip) {
+                    tooltip.remove();
+                }
+                pie.destroy();
+                pie.removeSvg();
+                pie = null;
+                pie = new ej.charts.AccumulationChart(instance);
+                pie.appendTo('#drill-container');
+                ej.charts.getElement('category').style.visibility = 'hidden';
+                ej.charts.getElement('symbol').style.visibility = 'hidden';
+                ej.charts.getElement('text').style.visibility = 'hidden';
+            }
+        },
+        legendSettings: { visible: false }, enableSmartLabels: true,
+        //Initializing Tooltip
+        tooltip: { enable: false, format: '${point.x} <br> ${point.y} %' },
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        }
+    };
+    var pointClick = function (args) {
+        var index = ej.charts.indexFinder(args.target);
+        if (ej.charts.getElement(pie.element.id + '_Series_' + index.series + '_Point_' + index.point)) {
+            var tooltip = document.getElementsByClassName('e-tooltip-wrap')[0];
+            if (tooltip) {
+                tooltip.remove();
+            }
+            pie.destroy();
+            pie.removeSvg();
+            pie = null;
+            switch (index.point) {
+                case 0:
+                    clickInstance.series[0].dataSource = suvs;
+                    ej.charts.getElement('text').innerHTML = 'SUV';
+                    clickInstance.title = 'Automobile Sales in the SUV Segment';
+                    break;
+                case 1:
+                    clickInstance.series[0].dataSource = cars;
+                    ej.charts.getElement('text').innerHTML = 'Car';
+                    clickInstance.title = 'Automobile Sales in the Car Segment';
+                    break;
+                case 2:
+                    clickInstance.series[0].dataSource = pickups;
+                    ej.charts.getElement('text').innerHTML = 'Pickup';
+                    clickInstance.title = 'Automobile Sales in the Pickup Segment';
+                    break;
+                case 3:
+                    clickInstance.series[0].dataSource = minivans;
+                    ej.charts.getElement('text').innerHTML = 'Minivan';
+                    clickInstance.title = 'Automobile Sales in the Minivan Segment';
+                    break;
+            }
+            pie = new ej.charts.AccumulationChart(clickInstance);
+            pie.appendTo('#drill-container');
+            ej.charts.getElement('symbol').style.visibility = 'visible';
+            ej.charts.getElement('category').style.visibility = 'visible';
+            ej.charts.getElement('text').style.visibility = 'visible';
+        }
+    };
+    var instance = {
+        series: [
+            {
+                dataSource: [{ x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 }, { x: 'Minivan', y: 23 }],
+                dataLabel: {
+                    visible: true, position: 'Inside', connectorStyle: { type: 'Curve', length: '10%' },
+                    font: { fontWeight: '600', color: 'white' }
+                },
+                radius: '70%', xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '0%',
+                explode: true, explodeOffset: '10%', explodeIndex: 2,
+            }
+        ], enableSmartLabels: false, legendSettings: { visible: false }, chartMouseClick: pointClick,
+        textRender: function (args) { args.text = args.point.x + ' ' + args.point.y + ' %'; },
+        tooltip: { enable: false, format: '${point.x} <br> ${point.y} %' },
+        title: 'Automobile Sales by Category',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        }
+    };
+    var pie = new ej.charts.AccumulationChart(instance);
+    pie.appendTo('#drill-container');
+    ej.charts.getElement('category').onclick = function (e) {
+        var tooltip = document.getElementsByClassName('e-tooltip-wrap')[0];
+        if (tooltip) {
+            tooltip.remove();
+        }
+        pie.destroy();
+        pie.removeSvg();
+        pie = null;
+        pie = new ej.charts.AccumulationChart(instance);
+        pie.appendTo('#drill-container');
+        e.target.style.visibility = 'hidden';
+        ej.charts.getElement('symbol').style.visibility = 'hidden';
+        ej.charts.getElement('text').style.visibility = 'hidden';
+    };
+};

src/chart/emaindicator.html

@@ -0,0 +1,26 @@
+<div class="control-section">
+    <div id="ema-container" align="center"></div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates a stock chart with candle series and an Exponential Moving Average indicator. 
+        Trackball shows the information about the stock and signal value of a day.
+   </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the EMA Indicator. 
+    </p>
+    <p>
+        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+    </p>
+    <p>
+        More information on the EMA Indicator can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/emaindicator.js

@@ -0,0 +1,66 @@
+/**
+ * Sample for EMA Indicator
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'DateTime',
+            intervalType: 'Months',
+            majorGridLines: { width: 0 },
+            zoomFactor: 0.4, 
+            skeleton: 'yMd',
+            zoomPosition: 0.4,
+            crosshairTooltip: { enable: true },
+        }, 
+        //Initializing Chart Area
+        chartArea: {
+            border: {
+                width: 0
+            }
+        },
+        //Initializing Primary X Axis
+        primaryYAxis: {
+            title: 'Price',
+            labelFormat: '${value}M',
+            majorGridLines: { width: 1 },
+            minimum: 50, maximum: 170, interval: 30,
+            lineStyle: { width: 0 }
+        },
+        //Initializing Chart Series
+        series: [{
+                dataSource: window.chartData, width: 2,
+                name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
+                xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
+                type: 'Candle', animation: { enable: false }
+            }],
+        //Initializing Technical Indicator
+        indicators: [{
+                period: 14, animation: { enable: true },
+                type: 'Ema', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',
+            }],
+        //Initializing Tooltip
+        tooltip: {
+            enable: true, shared: true
+        },
+        //Initializing Zooming
+        zoomSettings: {
+            enableSelectionZooming: true,
+            enableMouseWheelZooming: true,
+            enableDeferredZooming: true,
+            mode: 'X'
+        },
+        //Initializing Chart Title
+        title: 'AAPL - 2012-2017',
+        width: ej.base.Browser.isDevice ? '100%' : '80%',
+        //Initializing Crosshair
+        crosshair: { enable: true, lineType: 'Vertical' },
+        load: function (args) {
+            var emaTheme = location.hash.split('/')[1];
+            emaTheme = emaTheme ? emaTheme : 'Material';
+            args.chart.theme = (emaTheme.charAt(0).toUpperCase() + emaTheme.slice(1));
+        },
+        legendSettings: { visible: false }
+    });
+    chart.appendTo('#ema-container');
+};

src/chart/empty-point.html

@@ -0,0 +1,63 @@
+<div>
+    <div class="col-lg-8 control-section">
+        <div id="empty-container"></div>
+    </div>
+    <div class="col-lg-4 property-section">
+        <table id="property" title="Properties" style="width: 100%">
+            <tr style="height: 50px">
+                <td style="width: 50%">
+                    <div>Series Type:
+                    </div>
+                </td>
+                <td style="width: 50%;">
+                    <div>
+                        <select id="SelectSeriesType">				 
+                                                <option>Column</option>
+                                                <option>Area</option>
+                                                <option>Spline</option>
+                                            </select>
+                    </div>
+                </td>
+            </tr>
+            <tr style="height: 50px">
+                <td style="width: 50%">
+                    <div>Empty Point Mode:
+                    </div>
+                </td>
+                <td style="width: 50%;">
+                    <div>
+                        <select id="emptypointmode">				 
+                                                    <option>Gap</option>
+                                                    <option>Drop</option>
+                                                    <option>Average</option>
+                                                    <option>Zero</option>
+                                                </select>
+                    </div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates the empty point functionality in chart series. The mode of empty point can be changed by using <code>Empty Point Mode</code> in property panel.
+    </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the empty points. You can use <code>border</code>,
+        <code>fill</code>, <code>mode</code> properties to customize the empty points.
+    </p>
+    <p>
+        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+    </p>
+    <p>
+        More information on the empty points can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/empty-point.js

@@ -0,0 +1,63 @@
+/**
+ * Sample for Empty Point
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            title: 'Product', valueType: 'Category', interval: 1
+        },
+        //Initializing Primary X Axis
+        primaryYAxis: {
+            title: 'Profit', minimum: 0, maximum: 100, interval: 20,
+            labelFormat: '{value}%'
+        },
+        //Initializing Chart Series
+        series: [
+            {
+                dataSource: [
+                    { x: 'Rice', y: 80 }, { x: 'Wheat', y: null }, 
+                    { x: 'Oil', y: 70 },{ x: 'Corn', y: 60 }, { x: 'Gram', y: null }, 
+                    { x: 'Milk', y: 70 }, { x: 'Peas', y: 80 }, 
+                    { x: 'Fruit', y: 60 }, { x: 'Butter', y: null }
+                ],
+                type: 'Column', xName: 'x', yName: 'y', name: 'Profit', width: 2, 
+                emptyPointSettings: {
+                    fill: '#e6e6e6',
+                },
+                marker: { visible: true, height: 10, width: 10 },
+            },
+        ],
+        legendSettings: { visible: false },
+        //Initializing Chart title
+        title: 'Annual Product-Wise Profit Analysis',
+        //Initializing Tooltip
+        tooltip: { enable: true },
+        load: function (args) {
+            var emptyPointTheme = location.hash.split('/')[1];
+            emptyPointTheme = emptyPointTheme ? emptyPointTheme : 'MAterial';
+            args.chart.theme = (emptyPointTheme.charAt(0).toUpperCase() + emptyPointTheme.slice(1));
+        }
+    });
+    chart.appendTo('#empty-container');
+    var mode = new ej.dropdowns.DropDownList({
+        index: 0,
+        placeholder: 'Select Range Bar Color',
+        width: 120,
+        change: function () {
+            chart.series[0].emptyPointSettings.mode = mode.value;
+            chart.refresh();
+        }
+    });
+    mode.appendTo('#emptypointmode');
+    var edgeMode = new ej.dropdowns.DropDownList({
+        index: 0,
+        placeholder: 'Select Range Bar Color',
+        width: 120,
+        change: function () {
+            chart.series[0].type = edgeMode.value;
+            chart.refresh();
+        }
+    });
+    edgeMode.appendTo('#SelectSeriesType');
+};

src/chart/error-bar.html

@@ -0,0 +1,106 @@
+<div>
+    <div class="col-md-8 control-section">
+        <div class="content-wrapper">
+            <div id="error-container" style="width:92%"></div>
+        </div>
+    </div>
+    <div class="col-md-4 property-section">
+        <table id="property" title="Properties" style="width: 100%">
+            <tr style="height: 50px">
+                <td style="width: 60%">
+                    <div>Error Bar Type:</div>
+                </td>
+                <td style="width: 40%;">
+                    <div>
+                        <select name="selectIndex" autocomplete="off" id="selmode" style="width:60%;margin-left: -5px">
+                            <option value="Fixed">Fixed</option>
+                            <option value="Percentage">Percentage</option>
+                            <option value="StandardDeviation">StandardDeviation</option>
+                            <option value="StandardError">StandardError</option>
+                            <option value="Custom">Custom</option>
+                        </select>
+                    </div>
+                </td>
+            </tr>
+            <tr style="height: 50px">
+                <td style="width: 60%">
+                    <div>Drawing Mode:</div>
+                </td>
+                <td style="width: 40%;">
+                    <div>
+                        <select name="selectIndex" autocomplete="off" id="drawmode" >
+                            <option value="Vertical">Vertical</option>
+                            <option value="Horizontal">Horizontal</option>
+                            <option value="Both">Both</option>
+                        </select>
+                    </div>
+                </td>
+            </tr>
+            <tr style="height: 50px">
+                <td style="width: 60%">
+                    <div>Drawing Direction:</div>
+                </td>
+                <td style="width: 40%;">
+                    <div>
+                        <select name="selectIndex" autocomplete="off" id="direction" >
+                            <option value="Both">Both</option>
+                            <option value="Minus">Minus</option>
+                            <option value="Plus">Plus</option>
+                        </select>
+                    </div>
+                </td>
+            </tr>
+            <tr style="height: 50px">
+                <td style="width: 60%">
+                    <div>Vertical Error:</div>
+                </td>
+                <td style="width: 40%;">
+                    <div style='margin-top: 0px;'>
+                        <input type="text" id="verticalerrror" >
+                    </div>
+                </td>
+            </tr>
+            <tr style="height: 50px">
+                <td style="width: 60%">
+                    <div>Horizontal Error:</div>
+                </td>
+                <td style="width: 40%;">
+                    <div style='margin-top: 0px;'>
+                        <input type="text" id="horizontalerrror" >
+                    </div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample visualizes the errors in sales distribution of a car for a certain period with error bar in the chart. In property panel, the options are available to change error bar type, drawing mode, and drawing direction of error bar by means of dropdown
+    </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the error bar charts. Line type charts are used for cartesian type
+        series. You can use error bar by set <code>visible</code> property to true. You can change the error bar
+        rendering type using <code>type</code> property like fixedValue, percentage, standardDeviation, standardError and
+        custom option of errorBar. To change the error bar line length you can use <code>verticalError</code> property.
+    </p>
+    <p>Chart supports the following error bar types.
+    </p>
+    <ul>
+        <li><code>Fixed</code> - Renders a fixed type error bar.</li>
+        <li><code>Percentage</code> - Renders a percentage type error bar.</li>
+        <li><code>StandardDeviation</code> - Renders a standard deviation type error bar.</li>
+        <li><code>StandardError</code> - Renders a standard error type error bar.</li>
+        <li><code>Custom</code> - Renders a custom type error bar.</li>
+    </ul>
+    <p>
+        More information on the error bar can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype-valuetype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+</style>

src/chart/error-bar.js

@@ -0,0 +1,116 @@
+var fillRender = function (args) {
+    var errorTheme = location.hash.split('/')[1];
+    if (errorTheme && errorTheme.indexOf('fabric') > -1) {
+        args.fill = window.fabricColors[args.point.index % 10];
+    } else if (errorTheme === 'material') {
+        args.fill = window.materialColors[args.point.index % 10];
+    } else {
+        args.fill = window.bootstrapColors[args.point.index % 10];
+    }
+};
+/**
+ * Sample for Error Bar
+ */
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            valueType: 'Category', interval: 1,
+            majorGridLines: { width: 0 }
+        },
+        chartArea: {
+            border: {
+                width: 0
+            }
+        },
+        //Initializing Primary X Axis
+        primaryYAxis: {
+            labelFormat: '{value}%', minimum: 15, maximum: 45,
+            lineStyle: { width: 0 }
+        },
+        //Initializing Chart Series
+        series: [
+            {
+                type: 'Scatter',
+                dataSource: [
+                    { x: 'IND', y: 24 }, { x: 'AUS', y: 20 }, { x: 'USA', y: 35 },
+                    { x: 'DEU', y: 27 }, { x: 'ITA', y: 30 },
+                    { x: 'UK', y: 41 }, { x: 'RUS', y: 26 }
+                ],
+                xName: 'x', width: 2, yName: 'y', marker: { height: 10, width: 10 }, name: 'Sales',
+                //Initializing Error Bar
+                errorBar: { visible: true, verticalError: 3, horizontalError: 3 }
+            },
+        ],
+        //Initializing Tootlip
+        tooltip: {
+            enable: true
+        },
+        pointRender: fillRender,
+        legendSettings: { visible: false },
+        //Initializing Chart Title
+        title: 'Sales Distribution of Car by Region',
+        load: function (args) {
+            var errorBarTheme = location.hash.split('/')[1];
+            errorBarTheme = errorBarTheme ? errorBarTheme : 'Material';
+            args.chart.theme = (errorBarTheme.charAt(0).toUpperCase() + errorBarTheme.slice(1));
+        }
+    });
+    chart.appendTo('#error-container');
+    var typemode = new ej.dropdowns.DropDownList({
+        index: 0,
+        placeholder: 'Select Range Bar Color',
+        width: 120,
+        change: function () {
+            chart.series[0].errorBar.type = typemode.value;
+            chart.series[0].animation.enable = false;
+            chart.refresh();
+        }
+    });
+    typemode.appendTo('#selmode');
+    var drawmode = new ej.dropdowns.DropDownList({
+        index: 0,
+        placeholder: 'Select Range Bar Color',
+        width: 120,
+        change: function () {
+            chart.series[0].errorBar.mode = drawmode.value;
+            chart.refresh();
+        }
+    });
+    drawmode.appendTo('#drawmode');
+    var direction = new ej.dropdowns.DropDownList({
+        index: 0,
+        placeholder: 'Select Range Bar Color',
+        width: 120,
+        change: function () {
+            chart.series[0].errorBar.direction = direction.value;
+            chart.series[0].animation.enable = false;
+            chart.refresh();
+        }
+    });
+    direction.appendTo('#direction');
+    var verticalerrror = new ej.inputs.NumericTextBox({
+        value: 3,
+        min: 1,
+        max: 20,
+        step: 1,
+        change: function () {
+            chart.series[0].errorBar.verticalError = verticalerrror.value;
+            chart.series[0].animation.enable = false;
+            chart.refresh();
+        }
+    });
+    verticalerrror.appendTo('#verticalerrror');
+    var horizontalerrror = new ej.inputs.NumericTextBox({
+        value: 3,
+        min: 1,
+        max: 20,
+        step: 1,
+        change: function () {
+            chart.series[0].errorBar.horizontalError = horizontalerrror.value;
+            chart.series[0].animation.enable = false;
+            chart.refresh();
+        }
+    });
+    horizontalerrror.appendTo('#horizontalerrror');
+};

src/chart/export.html

@@ -0,0 +1,69 @@
+<div>
+    <div class="col-lg-9 control-section">
+        <div class="content-wrapper">
+            <div id="export-container"></div>
+        </div>
+    </div>
+    <div class="col-lg-3 property-section">
+        <table id="property" title="Properties" style="width: 100%">
+            <tr style="height: 50px">
+                <td style="width: 40%">
+                    <div>Export Type:
+                    </div>
+                </td>
+                <td style="width: 60%;">
+                    <div style="margin-left: -10px">
+                        <select id="mode">
+                            <option value='JPEG'>JPEG</option>
+                            <option value='PNG'>PNG</option>
+                        </select>
+                    </div>
+                </td>
+            </tr>
+            <tr style="height: 50px">
+                <td style="width: 40%">
+                    <div>File Name:</div>
+                </td>
+                <td style="width: 40%;">
+                    <div class="e-float-input" style='margin-top: 0px;'>
+                        <input type="text" value="Chart" id="fileName" style="margin-left: -10px">
+                    </div>
+                </td>
+            </tr>
+            <tr id="button-control" style="height: 50px" align='center'>
+                <td>
+                    <button id="togglebtn">Export</button>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample illustrates the export feature in chart. By clicking <code>Export</code>, you can export the chart in PNG or JPEG format.
+    </p>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure the export. The rendered chart can be exported as either JPEG or
+        PNG format. It can be achieved using Blob and it's supported only in modern browsers.
+    </p>
+    <p>
+        More information on the export can be found in this
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
+    </p>
+</div>
+<style>
+    #button-control {
+        width: 100%;
+        text-align: center;
+    }
+
+    #control-container {
+        padding: 0px !important;
+    }
+
+    .e-play-icon::before {
+        content: '\e728';
+    }
+</style>

src/chart/export.js

@@ -0,0 +1,80 @@
+/**
+ * Sample for chart export
+ */
+var labelRender = function (args) {
+    var selectedTheme = location.hash.split('/')[1];
+    selectedTheme = selectedTheme ? selectedTheme : 'Material';
+    var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',
+        '#ea7a57', '#404041', '#00bdae'];
+    var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',
+        '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];
+    var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',
+        '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];
+    if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
+        args.fill = fabricColors[args.point.index];
+    }
+    else if (selectedTheme === 'material') {
+        args.fill = materialColors[args.point.index];
+    }
+    else {
+        args.fill = bootstrapColors[args.point.index % 10];
+    }
+};
+this.default = function () {
+    var chart = new ej.charts.Chart({
+        //Initializing Primary X Axis
+        primaryXAxis: {
+            title: 'Countries',
+            valueType: 'Category',
+            majorGridLines: { width: 0 }
+        },
+        chartArea: {
+            border: {
+                width: 0
+            }
+        },
+        pointRender: labelRender,
+        //Initializing Primary Y Axis
+        primaryYAxis: {
+            title: 'Measurements',
+            labelFormat: '{value}GW',
+            minimum: 0,
+            maximum: 40,
+            interval: 10,
+            majorGridLines: { width: 0 }
+        },
+        //Initializing Series
+        series: [
+            {
+                type: 'Column',
+                dataSource: [
+                    { x: 'DEU', y: 35.5 }, { x: 'CHN', y: 18.3 }, { x: 'ITA', y: 17.6 }, { x: 'JPN', y: 13.6 },
+                    { x: 'US', y: 12 }, { x: 'ESP', y: 5.6 }, { x: 'FRA', y: 4.6 }, { x: 'AUS', y: 3.3 },
+                    { x: 'BEL', y: 3 }, { x: 'UK', y: 2.9 }
+                ],
+                xName: 'x', width: 2,
+                yName: 'y'
+            }
+        ],
+        title: 'Top 10 Countries Using Solar Power',
+        load: function (args) {
+            var selectedTheme = location.hash.split('/')[1];
+            selectedTheme = selectedTheme ? selectedTheme : 'Material';
+            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+        }
+    });
+    chart.appendTo('#export-container');
+    var mode = new ej.dropdowns.DropDownList({
+        index: 0,
+        width: 100
+    });
+    mode.appendTo('#mode');
+    var togglebtn = new ej.buttons.Button({
+        iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,
+    });
+    togglebtn.appendTo('#togglebtn');
+    document.getElementById('togglebtn').onclick = function () {
+        var fileName = (document.getElementById('fileName')).value;
+        chart.export(mode.value, fileName);
+    };
+};