lines-svg
Version:
LinesSvg is a financial chart library. Support formats are lineal, candlestick, sma & ema charts.
407 lines (390 loc) • 16.7 kB
HTML
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
https://github.com/gabelerner/canvg
-->
<html>
<head>
<title>Lines svg intro</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg.js"></script> -->
<!-- <script src="../node_modules/snapsvg/dist/snap.svg.js"></script> -->
<link rel="stylesheet" href="styles.css" />
<!-- <script src="../dist/build.js"></script> -->
<script src="../dist/main.js"></script>
</head>
<body>
<div class="flexbox">
<nav id="navBar">
<ul>
<li class="title">PERIOD :</li>
<li>
<a
data-period="15m"
class="opts period active"
onClick="lsvg.period('15m')"
>15m</a
>
</li>
<li>
<a data-period="1h" class="opts period" onClick="lsvg.period('1h')"
>1h</a
>
</li>
<li>
<a data-period="4h" class="opts period" onClick="lsvg.period('4h')"
>4h</a
>
</li>
<li>
<a data-period="1d" class="opts period" onClick="lsvg.period('1d')"
>1d</a
>
</li>
<li>
<a data-period="1w" class="opts period" onClick="lsvg.period('1w')"
>1w</a
>
</li>
<li class="title">DRAW :</li>
<li><a data-draw="text" class="opts draw"> text </a></li>
<li><a data-draw="line" class="opts draw"> line </a></li>
<li><a data-draw="arrow" class="opts draw"> arrow </a></li>
<li><a data-draw="tube" class="opts draw"> tube </a></li>
<li>
<a data-chart="line" class="opts chart" onClick="lsvg.prev()"
>PREV</a
>
</li>
<li>
<a data-chart="line" class="opts chart" onClick="lsvg.next()"
>NEXT</a
>
</li>
<li>
<a data-chart="line" class="opts chart" onClick="lsvg.redraw()"
>REDRAW</a
>
</li>
<li>
<a
data-chart="line"
class="opts chart"
onClick="lsvg.liveLine(true)"
>liveHOR</a
>
</li>
<li>
<a data-chart="line" class="opts chart" onClick="lsvg.liveLine()"
>liveLINE</a
>
</li>
<li>
<a data-chart="line" class="opts chart" onClick="lsvg.liveRect()"
>liveRECT</a
>
</li>
<li>
<a data-chart="line" class="opts chart" onClick="lsvg.liveText()"
>liveTEXT</a
>
</li>
<li>
<a data-chart="line" class="opts chart" onClick="lsvg.liveCircle()"
>CIRCLE</a
>
</li>
<li>
<a data-chart="line" class="opts chart" onClick="lsvg.cursor()"
>cursor</a
>
</li>
<li>
<a data-chart="line" class="opts chart" onClick="lsvg.livePointer()"
>POINTER</a
>
</li>
<li class="title">TYPE :</li>
<li>
<a
data-chart="line"
class="opts chart"
onClick="lsvg.toggle('line')"
>line</a
>
</li>
<li>
<a
data-chart="candle"
class="opts chart"
onClick="lsvg.toggle('candle')"
>candle</a
>
</li>
<li>
<a data-chart="sma" class="opts chart" onClick="lsvg.toggle('sma')"
>sma</a
>
</li>
<li>
<a data-chart="ema" class="opts chart" onClick="lsvg.toggle('ema')"
>ema</a
>
</li>
<li><a data-chart="all" class="opts chart active">all</a></li>
<li>
<hr />
</li>
<li>
<a data-timeline="prev" class="opts timeline"> <<<</a> /
<a data-timeline="next" class="opts timeline">>>> </a>
</li>
<li>
<a data-timeline="zoomin" class="opts timeline">IN</a
> / <a data-timeline="zoomout" class="opts timeline"
>OUT</a
>
</li>
<li>
<a data-snapshot="save" class="opts save" onClick="lsvg.getImage()"
>Snapshot</a
>
</li>
</ul>
</nav>
<div id="svgRoot">
<svg id="svgBox"></svg>
<nav id="svgZoom">
<a href onclick="svg.zoom(event)">IN</a>
<a href onclick="svg.zoom(event, true)">OUT</a>
</nav>
</div>
</div>
<p>Live Draw MANUAL:</p>
<ol>
<li>
You can draw line to indicate some important level of support or
resistance
</li>
<li>On hover you will see our navigation Dots.</li>
<li>
On line click you will enable the navigation Dots.( Green - MOVE, Brown
- ROTATE)
</li>
<li>Double click on line remove it and related dots.</li>
</ol>
<canvas id="c"></canvas>
<script>
(function () {
window.l = new Lines("svgBox");
var chartData = [
// [2, 2, 1, 1, 1588368812844],
// [1, 2, 1, 2, 1588368812844],
// [1, 1, 0.1, 0.1, 1588368812844],
[1.12514, 1.12514, 1.12514, 1.12514, 1593810900000],
[1.12514, 1.12514, 1.12514, 1.12514, 1593810000000],
[1.12469, 1.12498, 1.12455, 1.12498, 1593809100000],
[1.12464, 1.12467, 1.12461, 1.12467, 1593808200000],
[1.1245, 1.12462, 1.12439, 1.12459, 1593807300000],
[1.12445, 1.12445, 1.12432, 1.12445, 1593806400000],
[1.12444, 1.12444, 1.12441, 1.12442, 1593805500000],
[1.12439, 1.12441, 1.12433, 1.12441, 1593804600000],
[1.12448, 1.12448, 1.12438, 1.12439, 1593803700000],
[1.12444, 1.1245, 1.12429, 1.1245, 1593802800000],
[1.12437, 1.12438, 1.12433, 1.12433, 1593801900000],
[1.12442, 1.12452, 1.12437, 1.12437, 1593801000000],
[1.12437, 1.1244, 1.12434, 1.12437, 1593800100000],
[1.12432, 1.12435, 1.12429, 1.12434, 1593799200000],
[1.12404, 1.12433, 1.12404, 1.12433, 1593798300000],
[1.12439, 1.12439, 1.12409, 1.12409, 1593797400000],
[1.12419, 1.12447, 1.12419, 1.12444, 1593796500000],
[1.12427, 1.12445, 1.12417, 1.12417, 1593795600000],
[1.12414, 1.12437, 1.12414, 1.1243, 1593794700000],
[1.12376, 1.1241, 1.12366, 1.1241, 1593793800000],
[1.12435, 1.12435, 1.12398, 1.12398, 1593792900000],
[1.12425, 1.12444, 1.12425, 1.12444, 1593792000000],
[1.12433, 1.12437, 1.12423, 1.12423, 1593791100000],
[1.12444, 1.12452, 1.12428, 1.12434, 1593790200000],
[1.12447, 1.12447, 1.12446, 1.12446, 1593789300000],
[1.12447, 1.12447, 1.12446, 1.12446, 1593789400000],
[1.12444, 1.12452, 1.12428, 1.12434, 1593790200000],
[1.12444, 1.12452, 1.12428, 1.12434, 1593790200000],
[1.12444, 1.12452, 1.12428, 1.12434, 1593790200000],
// [1.1111, 1.3333, 1.1111, 1.2222, 1588367700000],
// [1.2222, 1.4444, 1.1111, 1.3333, 1588366800000],
// [1.3333, 1.4444, 1.2222, 1.2222, 1588365900000],
// [1.2222, 1.3333, 1.0000, 1.1111, 1588365000000],
// [1.0818, 1.083, 1.0818, 1.081, 1588367700000],
// [1.0875, 1.09, 1.0818, 1.0818, 1588366800000],
// [1.083, 1.0809, 1.0862, 1.0808, 1588365900000],
// [1.0821, 1.0778, 1.0831, 1.0726, 1588365000000],
// [1.0778, 1.0824, 1.0755, 1.0755, 1588364100000],
// [1.0823, 1.0857, 1.0886, 1.0802, 1588363200000],
// [1.0858, 1.0862, 1.0882, 1.0816, 1588362300000],
// [1.0863, 1.0875, 1.0898, 1.0841, 1588361400000],
// [1.0878, 1.0835, 1.0893, 1.0812, 1588360500000],
// [1.0837, 1.0911, 1.0913, 1.0817, 1588359600000],
// [1.0909, 1.098, 1.0991, 1.0856, 1588358700000],
// [1.0981, 1.0914, 1.0988, 1.0904, 1588357800000],
// [1.0915, 1.0941, 1.0969, 1.0892, 1588356900000],
// [1.0936, 1.093, 1.0953, 1.0919, 1588356000000],
// [1.0929, 1.0857, 1.0953, 1.0841, 1588355100000],
// [1.0858, 1.0891, 1.0904, 1.0829, 1588354200000],
// [1.0891, 1.0793, 1.0926, 1.0783, 1588353300000],
// [1.0793, 1.0813, 1.0835, 1.0768, 1588352400000],
// [1.0809, 1.0858, 1.0865, 1.0773, 1588351500000],
// [1.0858, 1.0964, 1.097, 1.082, 1588350600000],
// [1.0964, 1.1031, 1.104, 1.0903, 1588349700000],
// [1.1031, 1.1049, 1.1056, 1.0926, 1588348800000],
// [1.1048, 1.1136, 1.1145, 1.101, 1588347900000],
// [1.1142, 1.103, 1.1148, 1.0953, 1588347000000],
// [1.103, 1.0881, 1.1059, 1.0869, 1588346100000],
// [1.0882, 1.0789, 1.0895, 1.0761, 1588345200000],
// [1.0789, 1.0726, 1.0889, 1.0722, 1588344300000],
// [1.0723, 1.0837, 1.0723, 1.0637, 1588343400000],
// [1.0637, 1.0832, 1.0691, 1.0637, 1588342500000],
// [1.0943, 1.1016, 1.1045, 1.0802, 1588341600000],
// [1.0997, 1.1182, 1.1189, 1.0954, 1588340700000],
// [1.1183, 1.1085, 1.1238, 1.1046, 1588339800000],
// [1.1106, 1.1184, 1.1222, 1.1055, 1588338900000],
// [1.1185, 1.1269, 1.1335, 1.1056, 1588338000000],
// [1.1269, 1.1281, 1.1368, 1.1258, 1588337100000],
// [1.128, 1.1446, 1.1459, 1.1274, 1588336200000],
// [1.1449, 1.1293, 1.1494, 1.1284, 1588335300000],
// [1.1286, 1.1237, 1.1355, 1.1211, 1588334400000],
// [1.1241, 1.1136, 1.1246, 1.112, 1588333500000],
// [1.1136, 1.1172, 1.1188, 1.1095, 1588332600000],
// [1.1173, 1.1133, 1.1214, 1.1095, 1588331700000],
// [1.1134, 1.1003, 1.1187, 1.1003, 1588330800000],
// [1.1026, 1.1, 1.1055, 1.0951, 1588329900000],
// [1.1, 1.0882, 1.1007, 1.0879, 1588329000000],
// [1.0881, 1.0881, 1.091, 1.0855, 1584480812844],
// [1.0881, 1.0854, 1.0892, 1.083, 1584394412844],
// [1.0854, 1.0841, 1.0873, 1.0805, 1584308012844],
// [1.0845, 1.0785, 1.0865, 1.0784, 1584221612844],
// [1.0785, 1.0806, 1.0822, 1.0777, 1584135212844],
// [1.0806, 1.0792, 1.0813, 1.0782, 1584048812844],
// [1.0792, 1.0837, 1.0838, 1.0785, 1583962412844],
// [1.0836, 1.0832, 1.0852, 1.0821, 1583876012844],
// [1.0832, 1.0841, 1.0863, 1.0828, 1583789612844],
// [1.0841, 1.0874, 1.089, 1.0834, 1583703212844],
// [1.0873, 1.0916, 1.0927, 1.0865, 1583616812844],
// [1.0916, 1.0912, 1.0926, 1.0891, 1583530412844],
// [1.0911, 1.0951, 1.0959, 1.0908, 1583444012844],
// [1.0945, 1.0983, 1.0987, 1.0942, 1583357612844],
// [1.098, 1.0999, 1.1014, 1.0963, 1583271212844],
// [1.0999, 1.1046, 1.1049, 1.0994, 1583184812844],
// [1.1044, 1.106, 1.1066, 1.1033, 1583098412844],
];
// chartData.push([ 1.333305 , 1.333545 , 1.333305 , 1.331435 , 1515032100000 ]);
// chartData.push([ 1.33324 , 1.333415 , 1.33313 , 1.332265 , 1515031200000 ]);
// chartData.push([ 1.333085 , 1.3334 , 1.333085 , 1.33324 , 1515030300000 ]);
// chartData.push([ 1.33267 , 1.333395 , 1.33267 , 1.334135 , 1515029400000 ]);
// chartData.push([ 1.33285 , 1.33285 , 1.33251 , 1.33557 , 1515028500000 ]);
// chartData.push([ 1.332675 , 1.33302 , 1.332675 , 1.33685 , 1515027600000 ]);
// chartData.push([ 1.332585 , 1.33291 , 1.332445 , 1.332675 , 1515026700000 ]);
// chartData.push([ 1.332095 , 1.33277 , 1.33199 , 1.332595 , 1515025800000 ]);
// chartData.push([ 1.331805 , 1.33211 , 1.331805 , 1.332095 , 1515024900000 ]);
// chartData.push([ 1.3316 , 1.331855 , 1.331085 , 1.331855 , 1515024000000 ]);
// chartData.push([ 1.331635 , 1.331705 , 1.33145 , 1.3316 , 1515023100000 ]);
// chartData.push([ 1.33169 , 1.33175 , 1.331615 , 1.331635 , 1515022200000 ]);
// chartData.push([ 1.332195 , 1.332195 , 1.331655 , 1.33169 , 1515021300000 ]);
// chartData.push([ 1.332055 , 1.33216 , 1.331925 , 1.332075 , 1515020400000 ]);
// chartData.push([ 1.332035 , 1.332035 , 1.331535 , 1.331955 , 1515019500000 ]);
// chartData.push([ 1.33201 , 1.332055 , 1.331615 , 1.332035 , 1515018600000 ]);
// chartData.push([ 1.33177 , 1.331865 , 1.331695 , 1.331765 , 1515017700000 ]);
// chartData.push([ 1.33196 , 1.332025 , 1.33177 , 1.33177 , 1515016800000 ]);
// chartData.push([ 1.332415 , 1.332415 , 1.331665 , 1.332125 , 1515015900000 ]);
// chartData.push([ 1.332415 , 1.332415 , 1.332415 , 1.332415 , 1515015000000 ]);
// chartData.push([ 1.332415 , 1.332415 , 1.332415 , 1.332415 , 1515014100000 ]);
// chartData.push([1.333395, 1.333395, 1.333305, 1.3, 1515032100000]);
// chartData.push([1.3, 1.5, 1.2, 1.333085, 1515031200000]);
// chartData.push([1.333085, 1.3334, 1.33124, 1.33124, 1515030300000]);
// chartData.push([1.33124, 1.38, 1.315, 1.35, 1515029400000]);
// chartData.push([1.35, 1.34, 1.32, 1.30557, 1515028500000]);
// chartData.push([1.35, 1.34, 1.32, 1.30557, 1515028500000]);
// chartData.push([1.333085, 1.3334, 1.33124, 1.33124, 1515030300000]);
// chartData.push([1.333395, 1.333395, 1.333305, 1.3, 1515032100000]);
// chartData.push([1, 3, 1, 2, 1515032100000]);
// chartData.push([2, 3.4, 1.6, 3, 1515032100000]);
// chartData.push([3, 3, 3.4, 3, 1515032100000]);
// chartData.push([3, 4, 1, 2, 1515032100000]);
// chartData.push([2, 5, 3, 4, 1515032100000]);
// chartData.push([4, 6, 4, 5, 1515032100000]);
// chartData.push([5, 6, 4, 5, 1515032100000]);
// chartData.push([5, 6, 4, 6, 1515032100000]);
l.data(chartData);
l.draw();
l.live("channel");
// l.live("text");
// l.draw("line");
// l.draw("candle");
// l.draw("sma");
cnt = 0;
window.lsvg = {
getImage: () => {
var imgData = l.getImage();
// http://bl.ocks.org/biovisualize/8187844
/* PNG */
var canvas = document.getElementById("c");
canvas.width = imgData.width;
canvas.height = imgData.height;
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function () {
ctx.drawImage(image, 0, 0);
};
image.src = imgData.src;
/* END PNG */
// const imgElem = document.createElement("img");
// imgElem.setAttribute("src", imgData.src);
// imgElem.setAttribute("width", imgData.width);
// imgElem.setAttribute("height", imgData.height);
// document.body.appendChild(imgElem);
},
toggle: (chartType) => {
l.toggle(chartType);
},
cursor: function () {
l.cursor();
},
liveLine: (horFlag) => {
l.live(horFlag);
},
liveRect: () => {
l.live("rect");
},
liveText: () => {
l.live("text");
},
liveCircle: () => {
l.live("circle");
},
livePointer: () => {
l.live("pointer");
},
redraw: () => {
l.redraw();
},
prev: () => {
--cnt;
const start = cnt * 10;
l.next(chartData.slice(start, start + 10));
},
next: () => {
++cnt;
const start = cnt * 10;
l.next(chartData.slice(start, start + 10));
},
period: (periodStr) => {
l.set({ period: periodStr });
l.redraw();
},
};
})();
</script>
</body>
</html>