Created
October 3, 2017 08:57
-
-
Save Shestac92/4e7c3afdb7f34502af0fb56f845011fc to your computer and use it in GitHub Desktop.
TS-316 option 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"); | |
// console.log('lol'); | |
// console.log($(this).attr("type"), $(this).attr("name"), $(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(); | |
//Get selected CSV file | |
$.get($(this).find("option:selected").data().csv, function (data) { | |
//parse CSV into object using Papaparse-js library | |
//dynamicTyping set 'true' to cast strings into numbers | |
var parsedDataAsArr = Papa.parse(data, {dynamicTyping: true}).data; | |
//delete headers | |
parsedDataAsArr.shift(); | |
//delete unused columns | |
for (var i = 0; i < parsedDataAsArr.length; i++) { | |
parsedDataAsArr[i].splice(0, 2); | |
parsedDataAsArr[i].splice(1, 1); | |
parsedDataAsArr[i].splice(4, 1); | |
parsedDataAsArr[i].splice(5, 2); | |
parsedDataAsArr[i].splice(6, 3); | |
} | |
//set data | |
u.data[e] = parsedDataAsArr, x.addData(parsedDataAsArr), 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) { | |
console.log(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); | |
} | |
}) | |
}); | |
}(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
<!--papaparse cdn--> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.6/papaparse.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">×</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> <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> <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/ACC.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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment