TS-316 option 1

ACCedited.csv

app.js

function setColClass(e) {
    var t, a = e.find(".col-sm-4").length,
        i = e.find(".col-sm-4").last().index();
    if (3 !== a) {
        if (a > 3)
            for (; a > 3;) a -= 3;
        for (t = 12 / a; a;) --a, e.find($("[class*='col-sm-']")).eq(i - a).removeClass("col-sm-4").addClass("col-sm-" + t)
    }
}

function getInputLabelText(e) {
    var t = "",
        a = [];
    return e.split(/(?=[A-Z])/).filter(function (e) {
        1 === e.length ? t += e : (t += " ", t += e)
    }), t = t.trim(), t = t[0].toUpperCase() + t.substr(1), t.split(" ").filter(function (e, i) {
        1 === e.length && i !== t.split(" ").length - 1 ? a.push(e + "-") : a.push(e)
    }), a.join(" ").replace(/-\s/, "-")
}

function updateTextForIndicatorTypeSelect(e) {
    e.val() && (e.val().length > 1 ? e.find("option:selected").each(function () {
        $(this).text($(this).attr("data-abbr"))
    }) : e.find("option:selected").each(function () {
        $(this).text($(this).attr("data-full-text"))
    }), e.selectpicker("refresh").closest(".bootstrap-select").find(".dropdown-menu.inner").find("span.text").each(function (t) {
        $(this).text(e.find("option").eq(t).attr("data-full-text"))
    }))
}

var chart;
var annotationsColor;

function initTooltip(position) {
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip({
            'placement': position,
            'animation': false
        });
    });
}

function hidePreloader() {
    $('#loader-wrapper').fadeOut('slow');
}

function createPageColorPicker() {
    var colorPicker = $('.color-picker');
    chart = anychart.stock();
    var strokeWidth;
    var STROKE_WIDTH = 1;
    colorPicker.colorpickerplus();
    colorPicker.on('changeColor', function (e, color) {
        var annotation = chart.annotations().getSelectedAnnotation();
        if (annotation) {
            switch ($(this).data('color')) {
                case 'fill':
                    annotation.fill(color);
                    break;
                case 'stroke':
                    strokeWidth = annotation.stroke().thickness || STROKE_WIDTH;
                    strokeDash = annotation.stroke().dash || '';
                    var settings = {
                        thickness: strokeWidth,
                        color: color,
                        dash: strokeDash
                    };
                    annotation.stroke(settings);
                    annotation.hoverStroke(settings);
                    annotation.selectStroke(settings);
            }
        }

        if (color == null) {
            $('.color-fill-icon', $(this)).addClass('colorpicker-color');
        } else {
            $('.color-fill-icon', $(this)).removeClass('colorpicker-color');
            $('.color-fill-icon', $(this)).css('background-color', color);
        }
    });
}

function removeSelectedAnnotation() {
    var annotation = chart.annotations().getSelectedAnnotation();
    if (annotation) chart.annotations().removeAnnotation(annotation);
    return !!annotation;
}

function removeAllAnnotation() {
    chart.annotations().removeAllAnnotations();
}

function onAnnotationDrawingFinish() {
    setToolbarButtonActive(null);
}

function onAnnotationSelect(evt) {
    var annotation = evt.annotation;
    var colorFill;
    var colorStroke;
    var strokeWidth;
    var strokeDash;
    var strokeType;
    var markerSize;
    var STROKE_WIDTH = 1;
    // val 6 in select = 'solid'
    var STROKE_TYPE = '6';
    var $strokeSettings = $('#select-stroke-settings');
    var $markerSize = $('#select-marker-size');
    var $markerSizeBtn = $('.select-marker-size');
    var $colorPickerFill = $('.color-picker[data-color="fill"]');
    var $colorPickerStroke = $('.color-picker[data-color="stroke"]');

    if (annotation.fill !== undefined) {
        $colorPickerFill.removeAttr('disabled');
        colorFill = annotation.fill();
    } else {
        $colorPickerFill.attr('disabled', 'disabled');
    }
    if (typeof annotation.stroke() === 'function') {
        colorStroke = $colorPickerStroke.find('.color-fill-icon').css('background-color');
        colorFill = $colorPickerFill.find('.color-fill-icon').css('background-color');

        if (colorFill.indexOf('a') === -1) {
            colorFill = colorFill.replace('rgb', 'rgba').replace(')', ', 0.5)');
        }

        if ($strokeSettings.val()) {
            switch ($strokeSettings.val()[0]) {
                case '6':
                case '7':
                case '8':
                    strokeType = $strokeSettings.val()[0];
                    strokeWidth = $strokeSettings.val()[1] || STROKE_WIDTH;
                    break;
                default:
                    strokeWidth = $strokeSettings.val()[0];
                    strokeType = $strokeSettings.val()[1];
                    break;
            }
        } else {
            strokeWidth = STROKE_WIDTH;
            strokeType = STROKE_TYPE;
        }

    } else {
        colorStroke = annotation.stroke().color;
        strokeWidth = annotation.stroke().thickness;
        strokeDash = annotation.stroke().dash;
    }

    switch (strokeType) {
        case '6':
            strokeType = null;
            break;
        case '7':
            strokeType = '1 1';
            break;
        case '8':
            strokeType = '10 5';
            break;
    }

    if (strokeType === undefined) {
        strokeType = strokeDash;
    }

    if (annotation.type === 'marker') {
        markerSize = annotation.size();

        if ($('.choose-marker').hasClass('open')) {
            $markerSize.val($markerSize.val()).selectpicker('refresh');
            annotation.size($markerSize.val());
            $markerSizeBtn.removeAttr('disabled')
        } else {
            $markerSize.removeAttr('disabled').val(markerSize).selectpicker('refresh');
            annotation.size(markerSize);
            $markerSizeBtn.removeAttr('disabled')
        }
        $markerSizeBtn.removeAttr('disabled');

    } else {
        $markerSizeBtn.attr('disabled', 'disabled');
    }

    var settings = {
        thickness: strokeWidth,
        color: colorStroke,
        dash: strokeType
    };
    annotation.stroke(settings);
    annotation.hoverStroke(settings);
    annotation.selectStroke(settings);

    if (annotation.fill !== undefined) {
        annotation.fill(colorFill);
    }

    switch (strokeType) {
        case '1 1':
            strokeDash = 7;
            break;
        case '10 5':
            strokeDash = 8;
            break;
        default:
            strokeDash = 6;
            break;
    }

    $colorPickerFill.find('.color-fill-icon').css('background-color', colorFill);
    $colorPickerStroke.find('.color-fill-icon').css('background-color', colorStroke);
    $strokeSettings.val([strokeWidth, strokeDash]).selectpicker('refresh');
}

function contextMenuItemsFormatter(items) {
    // insert context menu item on 0 position
    alert(items);
    items.splice(0, 0, {
        text: "Remove selected annotation",
        action: removeSelectedAnnotation
    });

    // insert context menu item on 1 position
    items.splice(1, 0, {
        text: "Remove all annotations",
        action: removeAllAnnotation
    });

    // insert context menu separator
    items.splice(2, 0, undefined);

    return items;
}

function setToolbarButtonActive(type, markerType) {
    var $buttons = $('.btn[data-annotation-type]');
    $buttons.removeClass('active');
    $buttons.blur();

    if (type) {
        var selector = '.btn[data-annotation-type="' + type + '"]';
        if (markerType) selector += '[data-marker-type="' + markerType + '"]';
        $(selector).addClass('active');
    }
}

function updatePropertiesBySelectedAnnotation(strokeWidth, strokeType) {
    var strokeColor;
    var annotation = chart.annotations().getSelectedAnnotation();
    if (annotation == null) return;

    if (typeof annotation.stroke() === 'function') {
        strokeColor = annotation.color();
    } else {
        strokeColor = annotation.stroke().color;
    }

    switch (strokeType) {
        case '6':
            strokeType = null;
            break;
        case '7':
            strokeType = '1 1';
            break;
        case '8':
            strokeType = '10 5';
            break;
    }

    var settings = {
        thickness: strokeWidth,
        color: strokeColor,
        dash: strokeType
    };

    annotation.stroke(settings);
    annotation.hoverStroke(settings);
    annotation.selectStroke(settings);
}


!function () {
    function e() {
        $("#chart-container").height($(window).height() - f.outerHeight() - 10)
    }

    var $html = $('html');
    initTooltip('bottom');
    $('#select-stroke-settings').val([1, 6]).selectpicker('refresh');

    function t(t, a) {
        var i = o.find("option:selected").text().trim(),
            n = r.val();
        x = anychart.data.table();
        var l, s = x.mapAs({
            value: 1,
            volume: 1,
            open: 1,
            high: 2,
            low: 3,
            close: 4
        });

        // m = anychart.stock();
        //For Drawing tool on Chart.
        chart = anychart.stock();

        //-------------------------------
        var d = chart.plot(0);

        if (x.addData(u.data[i.toLowerCase()]), a) {
            var c, p, f = [];
            l = d[u.chartType](s), l.name(i.toUpperCase()), d.yScale(u.scale);
            for (var h in u.indicators) c = h, u.indicators.hasOwnProperty(h) && (f = u.indicators[h].settings, f[0] = s), ~c.toLowerCase().indexOf("stochastic") && (c = "stochastic"), u.indicators.hasOwnProperty(h) && (p = chart.plot(u.indicators[h].plotIndex), p[c].apply(p, f), p.yAxis(1).orientation("right"))
        }
        else l = d[n](s),
            l.name(i.toUpperCase());
        l.stroke("2px #64b5f6"),
            d.yAxis(1).orientation("right"),
            chart.padding(10, 50, 20, 50),
            chart.scroller().line(s),
            chart.selectRange("2004-11-14", "2007-11-15"),
            chart.container(t),

            ///// Adding additional lines
            chart.contextMenu().itemsFormatter(contextMenuItemsFormatter);
        // use annotation events to update application UI elements
        chart.listen("annotationDrawingFinish", onAnnotationDrawingFinish);
        chart.listen("annotationSelect", onAnnotationSelect);
        chart.listen("annotationUnSelect", function () {
            $('.color-picker[data-color="fill"]').removeAttr('disabled');
            $('.select-marker-size').removeAttr('disabled');
            $('.drawing-tools-solo').find('.bootstrap-select').each(function () {
                $(this).removeClass('open');
            })
        });
        chart.listen('chartDraw', function () {
            hidePreloader();
        });
        ///////////

        chart.draw(),
            anychart.ui.rangePicker().render(chart),
            anychart.ui.rangeSelector().render(chart),
            chart.listen("chartDraw",
                function () {
                    e(), setTimeout(function () {
                        v.hide()
                    }, 100)
                })

        ////Drawing Activity
        //alert("first");
        //alert("1");
        createPageColorPicker();
        chart.contextMenu().itemsFormatter(contextMenuItemsFormatter);
        chart.listen("annotationDrawingFinish", onAnnotationDrawingFinish);
        chart.listen("annotationSelect", onAnnotationSelect);
        chart.listen("annotationUnSelect", function () {
            $('.color-picker[data-color="fill"]').removeAttr('disabled');
            $('.select-marker-size').removeAttr('disabled');
            $('.drawing-tools-solo').find('.bootstrap-select').each(function () {
                $(this).removeClass('open');
            })
        });
    }

    function a() {
        chart && (chart.dispose(), chart = null)
    }

    function i() {
        var e, t, a = g.defaultSettings[g.name],
            i = 0;
        $("#indicatorSettingsModalTitle").text(g.defaultSettings[g.name].overview.title), h.empty(), h.append('<div class="row"></div>');
        var n = h.find(".row");
        for (var o in a)
            if (a.hasOwnProperty(o) && "overview" !== o && "plotIndex" !== o)
                if ("string" == typeof a[o]) {
                    for (n.append(w),
                             e = $("#indicatorFormGroup"),
                             e.find("select").attr("id", o), e.find("label").attr("for", o).text(getInputLabelText(o)), i = 0;
                         i < g.seriesType.length; i++)

                        t = $("<option></option>"),
                            t.val(g.seriesType[i].toLowerCase()),
                            t.text(getInputLabelText(g.seriesType[i])),
                            e.find("select").append(t);
                    e.removeAttr("id")
                }
                else if ("number" == typeof a[o])
                    n.append(y),
                        e = $("#indicatorFormGroup"),
                        e.find("input").attr("id", o),
                        e.removeAttr("id").find("label").attr("for", o).text(getInputLabelText(o));
                else if ("object" == typeof a[o]) {
                    for (n.append(w), e = $("#indicatorFormGroup"),
                             e.find("select").attr("id", o),
                             e.find("label").attr("for", o).text(getInputLabelText(o)),
                             i = 0; i < a[o].length; i++)
                        t = $("<option></option>"),
                            t.val(a[o][i].toLowerCase()),
                            t.text(a[o][i]),
                            e.find("select").append(t);
                    e.removeAttr("id")
                }
        setColClass(h),
            h.find($("[class*='col-sm-']")).last().after('<div class="col-xs-12" id="overviewText"></div>'),
            h.find("#overviewText").append(g.defaultSettings[g.name].overview.description)
    }

    function n() {
        var e = g.defaultSettings[g.name];
        for (var t in e) e.hasOwnProperty(t) && "overview" !== t && "plotIndex" !== t && $("#" + t).val(e[t])
    }

    var o = $("#chartDataSelect"),
        r = $("#seriesTypeSelect"),
        l = $("#scaleTypeSelect"),
        s = $("#indicatorTypeSelect"),
        d = $("#indicatorSettingsModal"),
        c = $("#resetButton"),
        p = $("#addIndicatorButton"),
        f = $("#indicatorNavPanel"),
        h = $("#indicatorForm"),
        v = $("#loader"),
        u = {};
    u.data = {},
        u.chartType = r.val(),
        u.scale = l.val(),
        u.indicators = {};
    var chart, x, g = {
            name: "",
            plotIndex: 0,
            defaultSettings: {},
            seriesType: ["area", "column", "jumpLine", "line", "marker", "spline", "splineArea", "stepArea", "stepLine", "stick"]
        },
        y = '<div class="col-sm-4"><div class="form-group" id="indicatorFormGroup"><label for="" class="control-label"></label><input type="number" class="form-control" id=""></div></div>',
        w = '<div class="col-sm-4"><div class="form-group" id="indicatorFormGroup"><label for="" class="control-label"></label><select class="form-control select show-tick" id=""></select></div></div>',
        b = {
            createChart: t,
            removeChart: a
        };
    "file:" === window.location.protocol && (v.hide(), $(".wrapper").hide(), $("#warning").modal({
        backdrop: "static",
        keyboard: !1
    })), $.get("indicators.xml", function (e) {
        $(e).find("indicator").each(function (e, t) {
            var a, i = $(this).attr("type"),
                n = $("<option></option>");
            n.attr({
                value: i,
                "data-abbr": $(this).find("abbreviation").text(),
                "data-full-text": $(this).find("title").text()
            }).text($(this).find("title").text()),
            $(this).find('[name="plotIndex"]').length && n.attr("data-plot-index", $(this).find('[name="plotIndex"]').attr("value")),
                s.append(n),
                g.defaultSettings[i] = {},
                $(t).find("defaults").children().each(function () {
                    var e = $(this).attr("name"),
                        t = $(this).attr("value");

                    switch ($(this).attr("type")) {
                        case "number":
                            t = +t;
                            break;
                        case "array":
                            t = JSON.parse(t);
                    }
                    g.defaultSettings[i][e] = t
                }), a = $(t).find("description").text(), g.defaultSettings[i].overview = {}, g.defaultSettings[i].overview.title = $(t).find("title").text(), g.defaultSettings[i].overview.description = a
        });
        var t = s.find("option").sort(function (e, t) {
            return e.value.toUpperCase().localeCompare(t.value.toUpperCase())
        });
        s.append(t), s.selectpicker()
    }),
        $(window).on("resize", e),

        anychart.onDocumentReady(function () {

            anychart.data.loadJsonFile(o.find("option:selected").data().json, function (e) {
                u.data[o.find("option:selected").text().toLowerCase().trim()] = e, b.createChart("chart-container")
            });

            o.on("change", function () {
                var selectedData = o.find("option:selected");
                if (selectedData['0'].hasAttribute('data-csv')) {
                    //if selected data is CSV
                    var e = $(this).find("option:selected").text().toLowerCase().trim();

                    ~Object.keys(u.data).indexOf(e) ? (x.addData(u.data[e]), chart.plot().getSeries(0).name(e.toUpperCase())) :
                        //get .csv file
                        anychart.data.loadCsvFile($(this).find("option:selected").data().csv, function (t) {
                            //set data
                            u.data[e] = t, x.addData(t, {ignoreFirstRow: true, columnsSeparator: ","}), chart.plot().getSeries(0).name(e.toUpperCase());
                        })


                } else {
                    //if selected data is JSON
                    var e = $(this).find("option:selected").text().toLowerCase().trim();

                    ~Object.keys(u.data).indexOf(e) ? (x.addData(u.data[e]), chart.plot().getSeries(0).name(e.toUpperCase())) :
                        anychart.data.loadJsonFile($(this).find("option:selected").data().json, function (t) {
                            u.data[e] = t, x.addData(t), chart.plot().getSeries(0).name(e.toUpperCase())
                        })
                }
            });

            r.on("change", function () {
                var e = $(this).val();
                chart.plot().getSeries(0).seriesType(e),
                    u.chartType = e
            }),

                s.on("change", function () {
                    if ($(this).val() && 1 === $(this).val().length && updateTextForIndicatorTypeSelect(s), null === $(this).val() || $(this).val().length < Object.keys(u.indicators).length) {
                        if (b.removeChart(), null !== $(this).val())
                            for (var e in u.indicators) ~$(this).val().indexOf(e) || delete u.indicators[e];
                        else u.indicators = {};
                        return void b.createChart("chart-container", !0)
                    }
                    for (var t = 0; t < $(this).val().length; t++)
                        if (!~Object.keys(u.indicators).indexOf($(this).val()[t])) {
                            g.name = $(this).val()[t];
                            break
                        }
                    g.plotIndex = $(this).find('option[value="' + g.name + '"]').data().plotIndex, 0 !== g.plotIndex && (g.plotIndex = chart.getPlotsCount()), i(), n(), d.modal("show"), f.find(".select.open").removeClass("open")
                }),
                l.on("change", function () {
                    b.removeChart(), u.scale = $(this).val(), b.createChart("chart-container", !0)
                }),
                d.on("hidden.bs.modal", function () {
                    for (var e, t = 0; t < s.val().length; t++)
                        if (!~Object.keys(u.indicators).indexOf(s.val()[t])) {
                            e = s.val()[t];
                            break
                        }
                    if (!e) return updateTextForIndicatorTypeSelect(s), !1;
                    var a = s.find('[value="' + e + '"]').index();
                    s.find('[value="' + e + '"]').removeAttr("selected"), s.prev(".dropdown-menu").find('li[data-original-index="' + a + '"]').removeClass("selected"), updateTextForIndicatorTypeSelect(s)
                }),
                d.on("show.bs.modal", function () {
                    h.find(".select").selectpicker()
                }),
                c.on("click", function (e) {
                    e.preventDefault(), b.removeChart(), u.indicators = {}, u.scale = "linear", u.chartType = "line", o.val(1).selectpicker("refresh"), r.val("candlestick").selectpicker("refresh"), s.val("").selectpicker("refresh"), l.val("linear").selectpicker("refresh"), b.createChart("chart-container")
                }),
                p.on("click", function () {
                    var e = x.mapAs({
                            value: 1,
                            volume: 1,
                            open: 1,
                            high: 2,
                            low: 3,
                            close: 4
                        }),
                        t = g.defaultSettings[g.name],
                        a = [e],
                        i = g.name;
                    ~i.toLowerCase().indexOf("stochastic") && (i = "stochastic");
                    for (key in t)
                        if ("overview" !== key && "plotIndex" !== key) {
                            var n = $("#" + key).val();
                            n = "true" == n || "false" == n ? "true" == n : n, a.push(n)
                        }
                    u.indicators[g.name] = {}, u.indicators[g.name].settings = a, u.indicators[g.name].plotIndex = g.plotIndex;
                    var o = chart.plot(g.plotIndex);
                    o[i].apply(o, a), o.yAxis(1).orientation("right"), d.modal("hide")
                })

            //alert("dsd");
            //alert("2");
            //////////Drawing on chart initialisation
            $('select.choose-drawing-tools').on('change', changeAnnotations);
            $('select.choose-marker').on('change', changeAnnotations);
            $('[data-annotation-type]').on('click', changeAnnotations);

            //----------------------------

            function changeAnnotations() {
                var $that = $(this);
                //alert($that);
                //	alert(chart.plot(0));
                setTimeout(function () {
                        var $target = $that;
                        var active = $target.hasClass('active');
                        var $markerSize = $('#select-marker-size');
                        var markerSize = $markerSize.val();
                        //alert($target);
                        if (active) {
                            chart.annotations().cancelDrawing();
                            setToolbarButtonActive(null);
                        } else {
                            var type = $target.data().annotationType || $target.find('option:selected').data().annotationType;
                            //alert(type);
                            if (!$target.data().annotationType) {
                                var markerType = $target.find('option:selected').data().markerType;
                                //alert(markerType);
                            }

                            setToolbarButtonActive(type, markerType);

                            if (type) {
                                if (!$target.data().annotationType) {
                                    var markerAnchor = $target.find('option:selected').data().markerAnchor;

                                }

                                var drawingSettings = {
                                    type: type,
                                    size: markerSize,
                                    color: annotationsColor,
                                    markerType: markerType,
                                    anchor: markerAnchor
                                };
                                chart.annotations().startDrawing(drawingSettings);
                            }
                        }
                        //alert(chart.plot(0));
                        var annotation = chart.annotations().getSelectedAnnotation();
                        //alert(annotation.fill);
                        //alert(chart.annotations().getSelectedAnnotation());
                        if (annotation.fill === undefined) {
                            $('.color-picker[data-color="fill"]').attr('disabled', 'disabled');
                        } else {
                            $('.color-picker[data-color="fill"]').removeAttr('disabled');
                        }

                        $target.val('');
                    }
                    , 1);
            }

            $('.btn[data-action-type]').click(function (evt) {
                var annotation = chart.annotations().getSelectedAnnotation();
                var $target = $(evt.currentTarget);
                $target.blur();
                var type = $target.attr('data-action-type');

                switch (type) {
                    case 'removeAllAnnotations':
                        //removeAllAnnotation();
                        chart.annotations().removeAllAnnotations();
                        break;
                    case 'removeSelectedAnnotation':
                        //removeSelectedAnnotation();
                        if (annotation) chart.annotations().removeAnnotation(annotation);
                        break;
                    case 'unSelectedAnnotation':
                        chart.annotations().unselect(annotation).cancelDrawing();
                        setToolbarButtonActive(null);
                        break;
                }

            });

            // alert("debug");

            $('#select-stroke-settings').on('change', function () {
                var strokeWidth;
                var strokeType;
                var STROKE_WIDTH = 1;

                if ($(this).val()) {
                    switch ($(this).val()[0]) {
                        case '6':
                        case '7':
                        case '8':
                            strokeType = $(this).val()[0];
                            strokeWidth = $(this).val()[1] || STROKE_WIDTH;
                            break;
                        default:
                            strokeType = $(this).val()[1];
                            strokeWidth = $(this).val()[0];
                            break;
                    }
                    updatePropertiesBySelectedAnnotation(strokeWidth, strokeType);
                }
            });

            $('#select-marker-size').on('change', function () {
                var annotation = chart.annotations().getSelectedAnnotation();

                if (annotation == null) return;

                if (annotation.type === 'marker') {
                    annotation.size($(this).val());
                }
            });

            $('html').keyup(function (e) {
                if (e.keyCode == 8 || e.keyCode == 46) {
                    //removeSelectedAnnotation();
                    var annotation = chart.annotations().getSelectedAnnotation();
                    if (annotation) chart.annotations().removeAnnotation(annotation);
                }
            })

        });
}();

Help.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Technical Indicators</title>
    <!-- Normalize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <!-- AnyChart UI -->
    <link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
    <link rel="stylesheet" href="https://cdn.anychart.com/fonts/2.7.2/anychart.css">
    <!-- Latest compiled and minified CSS Bootstrap Select -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
    <!-- css -->
    <link rel="stylesheet" href="css/app.css">
    <!-- Include all your css files or styles here as needed -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
   
    <![endif]-->
	 <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

	
	 <!-- ColorPicker -->
    <link href="css/vendor/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="css/vendor/bootstrap-colorpicker-plus.min.css" rel="stylesheet">
	
	<!--style-->
	<link rel="stylesheet" href="css/style.css">

</head>

<body>
    <!-- anychart loader -->
    <div id="loader" class="anychart-loader">
        <div class="rotating-cover">
            <div class="rotating-plane">
                <div class="chart-row"><span class="chart-col green"></span> <span class="chart-col orange"></span> <span class="chart-col red"></span>
                </div>
            </div>
        </div>
    </div>
    <!-- modal alert -->
  <div class="modal fade" id="warning" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Attention</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger"><strong>XHR Fail: </strong>This Sample will properly work only if upload it to a server and access via http or https. Please see <a href="https://github.com/anychart-solutions/technical-indicators" target="_blank">https://github.com/anychart-solutions/technical-indicators</a> to learn more.</div>
                </div>
            </div>
        </div>
    </div> 
    <!-- modal indicator settings -->
    <div class="modal fade" id="indicatorSettingsModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="indicatorSettingsModalTitle">Indicator Settings</h4>
                </div>
                <div class="modal-body">
                    <form id="indicatorForm" class="form"></form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="addIndicatorButton">Add Indicator</button>
                </div>
            </div>
        </div>
    </div>
	
	<div class="toolbar" style="padding-left:15px;font-size:15px;margin-top:5px">
    <div class="btn-group-container">
        <div class="btn-group">
            <button type="button" class="btn btn-default color-picker" data-color="fill" data-toggle="tooltip"
                    title="Сhoose drawing fill color"><span
                    class="color-fill-icon dropdown-color-fill-icon" style="background-color:#e06666;"></span>&nbsp;<b
                    class="caret"></b>
            </button>

            <button type="button" class="btn btn-default color-picker" data-color="stroke" data-toggle="tooltip"
                    title="Сhoose drawing stroke color"><span
                    class="color-fill-icon dropdown-color-fill-icon" style="background-color:#e06666;"></span>&nbsp;<b
                    class="caret"></b>
            </button>

            <select class="selectpicker show-menu-arrow" id="select-stroke-settings"
                    title="Stroke settings"
                    data-style="btn-lg" data-width="121" multiple>
                <optgroup label="Stroke width" data-max-options="1">
                    <option data-settings="width" value="1">1 px</option>
                    <option data-settings="width" value="2">2 px</option>
                    <option data-settings="width" value="3">3 px</option>
                    <option data-settings="width" value="4">4 px</option>
                    <option data-settings="width" value="5">5 px</option>
                </optgroup>
                <optgroup label="Stroke dash" data-max-options="1">
                    <option value="6" data-settings="type">solid</option>
                    <option value="7" data-settings="type">dotted</option>
                    <option value="8" data-settings="type">dashed</option>
                </optgroup>
            </select>
        </div>
        <div class="btn-group">
            <button type="button" data-action-type="unSelectedAnnotation" class="btn btn-default"
                    aria-label="Center Align" data-toggle="tooltip" title="Cursor">
                <i class="ac ac-mouse-pointer" aria-hidden="true"></i>
            </button>
        </div>
    </div>

    <div class="select-container">
        <select class="selectpicker show-menu-arrow choose-drawing-tools"
                title="Drawing tools"
                data-style="btn-lg" data-width="133" data-max-options="1">
            <optgroup label="Lines, Trend lines and Rays:">
                <option data-icon="ac ac-line" data-annotation-type="line">Line Segment</option>
                <option data-icon="ac ac-horizontal-line" data-annotation-type="horizontalLine">Horizontal Line</option>
                <option data-icon="ac ac-vertical-line" data-annotation-type="verticalLine">Vertical Line</option>
                <option data-icon="ac ac-infinite-line" data-annotation-type="infiniteLine">Infinite Line</option>
                <option data-icon="ac ac-ray" data-annotation-type="ray">Ray</option>
            </optgroup>
            <optgroup label="Geometric shapes:">
                <option data-icon="ac ac-triangle" data-annotation-type="triangle">Triangle</option>
                <option data-icon="ac ac-rectangle" data-annotation-type="rectangle">Rectangle</option>
                <option data-icon="ac ac-ellipse" data-annotation-type="ellipse">Ellipse</option>
            </optgroup>
            <optgroup label="Other tools:">
                <option data-icon="ac ac-trend-channel" data-annotation-type="trendChannel">Trend Channel</option>
                <option data-icon="ac ac-andrews-pitchfork" data-annotation-type="andrewsPitchfork">Andrew's Pitchfork</option>
            </optgroup>
            <optgroup label="Fibonacci tools:">
                <option data-icon="ac ac-fibonacci-fan" data-annotation-type="fibonacciFan">Fibonacci Fan</option>
                <option data-icon="ac ac-fibonacci-arc" data-annotation-type="fibonacciArc">Fibonacci Arc</option>
                <option data-icon="ac ac-fibonacci-retracement" data-annotation-type="fibonacciRetracement">Fibonacci Retracement</option>
                <option data-icon="ac ac-fibonacci-timezones" data-annotation-type="fibonacciTimezones">Fibonacci Time Zones</option>
            </optgroup>
        </select>
    </div>

    <div class="btn-group hidden-xs">
        <button data-annotation-type="line" type="button" class="btn btn-default" aria-label="Center Align"
                data-toggle="tooltip" title="Line Segment">
            <i class="ac ac-line" aria-hidden="true"></i>
        </button>
        <button data-annotation-type="horizontalLine" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Horizontal Line">
            <i class="ac ac-horizontal-line" aria-hidden="true"></i>
        </button>
        <button data-annotation-type="verticalLine" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Vertical Line">
            <i class="ac ac-vertical-line" aria-hidden="true"></i>
        </button>
        <button data-annotation-type="infiniteLine" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Infinite Line">
            <i class="ac ac-infinite-line" aria-hidden="true"></i>
        </button>
        <button data-annotation-type="ray" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Ray">
            <i class="ac ac-ray" aria-hidden="true"></i>
        </button>
    </div>

    <div class="btn-group hidden-xs">
        <button data-annotation-type="triangle" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Triangle">
            <i class="ac ac-triangle" aria-hidden="true"></i>
        </button>
        <button data-annotation-type="rectangle" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Rectangle">
            <i class="ac ac-rectangle" aria-hidden="true"></i>
        </button>
        <button data-annotation-type="ellipse" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Ellipse">
            <i class="ac ac-ellipse" aria-hidden="true"></i>
        </button>
    </div>

    <div class="btn-group hidden-xs">
        <button data-annotation-type="trendChannel" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Trend Channel">
            <i class="ac ac-trend-channel" aria-hidden="true"></i>
        </button>
        <button data-annotation-type="andrewsPitchfork" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Andrew's Pitchfork">
            <i class="ac ac-andrews-pitchfork" aria-hidden="true"></i>
        </button>
    </div>

    <div class="btn-group hidden-xs">
        <button data-annotation-type="fibonacciFan" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Fibonacci Fan">
            <i class="ac ac-fibonacci-fan" aria-hidden="true"></i>
        </button>
        <button data-annotation-type="fibonacciArc" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Fibonacci Arc">
            <i class="ac ac-fibonacci-arc" aria-hidden="true"></i>
        </button>
        <button data-annotation-type="fibonacciRetracement" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Fibonacci Retracement">
            <i class="ac ac-fibonacci-retracement" aria-hidden="true"></i>
        </button>
        <button data-annotation-type="fibonacciTimezones" type="button" class="btn btn-default"
                aria-label="Center Align" data-toggle="tooltip" title="Fibonacci Time Zones">
            <i class="ac ac-fibonacci-timezones" aria-hidden="true"></i>
        </button>

    </div>

    <div class="btn-group-container">
        <div class="btn-group">
            <select class="selectpicker show-menu-arrow select choose-marker" id="select-marker-type"
                    title="Marker"
                    data-style="btn-lg" data-width="90" data-max-options="1">
                <option data-icon="ac ac-arrow-up-square" data-annotation-type="marker" data-marker-type="arrowUp"
                        data-marker-anchor="top">Up Arrow
                </option>
                <option data-icon="ac ac-arrow-down-square" data-annotation-type="marker"
                        data-marker-type="arrowDown" data-marker-anchor="bottom">Down Arrow
                </option>
                <option data-icon="ac ac-arrow-left-square" data-annotation-type="marker"
                        data-marker-type="arrowLeft" data-marker-anchor="left">Left Arrow
                </option>
                <option data-icon="ac ac-arrow-right-square" data-annotation-type="marker"
                        data-marker-type="arrowRight" data-marker-anchor="right">Right Arrow
                </option>
                <option data-icon="ac ac-head-arrow" data-annotation-type="marker" data-marker-type="arrowHead"
                        data-marker-anchor="right">Head Arrow
                </option>
                <option data-icon="ac ac-cross" data-annotation-type="marker" data-marker-type="cross"
                        data-marker-anchor="center">Cross
                </option>
                <option data-icon="ac ac-diagonal-cros" data-annotation-type="marker" data-marker-type="diagonalCross"
                        data-marker-anchor="center">Diagonal cross
                </option>
                <option data-icon="ac ac-diamond" data-annotation-type="marker" data-marker-type="diamond"
                        data-marker-anchor="center">Diamond
                </option>
                <option data-icon="ac ac-pentagon" data-annotation-type="marker" data-marker-type="pentagon"
                        data-marker-anchor="center">Pentagon
                </option>
                <option data-icon="ac ac-square" data-annotation-type="marker" data-marker-type="square"
                        data-marker-anchor="center">Square
                </option>
                <option data-icon="ac ac-star-1" data-annotation-type="marker" data-marker-type="star10"
                        data-marker-anchor="center">Star 1
                </option>
                <option data-icon="ac ac-star-2" data-annotation-type="marker" data-marker-type="star4"
                        data-marker-anchor="center">Star 2
                </option>
                <option data-icon="ac ac-star-3" data-annotation-type="marker" data-marker-type="star5"
                        data-marker-anchor="center">Star 3
                </option>
                <option data-icon="ac ac-star-4" data-annotation-type="marker" data-marker-type="star6"
                        data-marker-anchor="center">Star 4
                </option>
                <option data-icon="ac ac-star-5" data-annotation-type="marker" data-marker-type="star7"
                        data-marker-anchor="center">Star 5
                </option>
                <option data-icon="ac ac-trapezium" data-annotation-type="marker" data-marker-type="trapezium"
                        data-marker-anchor="center">Trapezium
                </option>
                <option data-icon="ac ac-triangle-up" data-annotation-type="marker" data-marker-type="triangleUp"
                        data-marker-anchor="top">Triangle Up
                </option>
                <option data-icon="ac ac-triangle-down" data-annotation-type="marker" data-marker-type="triangleDown"
                        data-marker-anchor="bottom">Triangle Down
                </option>
                <option data-icon="ac ac-triangle-left" data-annotation-type="marker" data-marker-type="triangleLeft"
                        data-marker-anchor="left">Triangle Left
                </option>
                <option data-icon="ac ac-triangle-right" data-annotation-type="marker" data-marker-type="triangleRight"
                        data-marker-anchor="right">Triangle Right
                </option>
            </select>
            <select class="selectpicker show-menu-arrow select select-marker-size" id="select-marker-size"
                    title="Marker size"
                    data-style="btn-lg" data-width="80" data-max-options="1">
                <option data-settings="width" value="5">5 px</option>
                <option data-settings="width" value="10">10 px</option>
                <option data-settings="width" value="15">15 px</option>
                <option data-settings="width" value="20" selected>20 px</option>
                <option data-settings="width" value="25">25 px</option>
            </select>
        </div>
    </div>

    <div class="btn-group-container">
        <div class="btn-group">
            <button data-action-type="removeSelectedAnnotation" type="button" class="btn btn-default"
                    aria-label="Center Align" data-toggle="tooltip" title="Delete selected drawing">
                <i class="ac ac-remove-thin" aria-hidden="true"></i>
            </button>
            <button data-action-type="removeAllAnnotations" type="button" class="btn btn-default"
                    aria-label="Center Align" data-toggle="tooltip" title="Delete all drawings">Remove All
            </button>
        </div>
    </div>
	
   </div>	
    <div class="wrapper">
        <ul class="list list-unstyled list-nav" id="indicatorNavPanel">
            <li>
                <select name="" id="chartDataSelect" class="select selectpicker show-tick" title="Select Data Chart">
                    <option value="1" selected="selected" data-json="./data/msft.json">MSFT</option>
                    <option value="2" data-json="./data/orcl.json">ORCL</option>
                    <option value="3" data-json="./data/csco.json">CSCO</option>
                    <option value="4" data-json="./data/ibm.json">IBM</option>
                    <option value="5" data-csv="./data/ACCedited.csv">ACC</option>


                </select>
            </li>
            <li>
                <select name="" id="seriesTypeSelect" class="select selectpicker show-tick">
                    <option value="area">Area Chart</option>
                    <option value="candlestick" selected="selected">Candlestick Chart</option>
                    <option value="column">Column Chart</option>
                    <option value="jumpLine">Jump Line Chart</option>
                    <option value="line">Line Chart</option>
                    <option value="marker">Marker Chart</option>
                    <option value="ohlc">OHLC Chart</option>
                    <option value="rangeArea">Range Area Chart</option>
                    <option value="rangeColumn">Range Column Chart</option>
                    <option value="rangeSplineArea">Range Spline Area Chart</option>
                    <option value="rangeStepArea">Range Step Area Chart</option>
                    <option value="spline">Spline Chart</option>
                    <option value="splineArea">Spline Area Chart</option>
                    <option value="stepArea">Step Area Chart</option>
                    <option value="stepLine">Step Line Chart</option>
                    <option value="stick">Stick Chart</option>
                </select>
            </li>
            <li>
                <select name="" class="select selectpicker show-tick" id="scaleTypeSelect" title="Scale">
                    <option value="linear" selected="selected">Linear</option>
                    <option value="log">Logarithmic</option>
                </select>
            </li>
            <li>
                <select class="select show-tick" multiple="multiple" name="" data-width="350" id="indicatorTypeSelect" title="Add Indicator"></select>
            </li>
            <li><a class="btn btn-default" href="" id="resetButton">Reset</a>
            </li>
        </ul>
        <div id="chart-container"></div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	
	<script src="js/vendor/bootstrap-colorpicker.min.js"></script>
	<script src="js/vendor/bootstrap-colorpicker-plus.js"></script>

    <!-- Latest compiled and minified JavaScript Bootstrap Select -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
    <!-- Data adapter -->
    <script src="http://cdn.anychart.com/js/latest/data-adapter.min.js"></script>
    <script src="js/app.js"></script>

</body>

</html>