import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js"; // Activate the License Key import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js"; getLicenseKey(CIQ); import sampleData from "https://jsfiddle.chartiq.com/chart/examples/data/STX_SAMPLE_DAILY.js"; const stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") }); function showEvents() { const markerTypes = ["dividend", "news", "earnings"]; let newNode; for (let i = 0; i < stxx.masterData.length - 10; i += 5) { let r = Math.floor(Math.random() * (markerTypes.length + 1)); if (r == markerTypes.length) continue; // randomize newNode = document.querySelector("#stxEventPrototype").cloneNode(true); newNode.id = null; newNode.innerHTML = markerTypes[r].toUpperCase().charAt(0); newNode.classList.add(markerTypes[r]); new CIQ.Marker({ stx: stxx, xPositioner: "date", yPositioner:markerTypes[r] == "dividend"?"under_candle":"above_candle", x: stxx.masterData[i].DT, label: "events", node: newNode }); } // future marker with ckickable link newNode = document.querySelector("#stxRhombusPrototype").cloneNode(true); newNode.id = null; newNode.innerHTML = '<a href="http://www.chartiq.com" target="_blank">Y</a>'; newNode.classList.add("rhombus"); let someDate = new Date(stxx.masterData[stxx.masterData.length - 1].DT); someDate = stxx.getNextInterval(someDate, 5); // 5 bars in the future new CIQ.Marker({ stx: stxx, xPositioner: "date", //yPositioner: "above_candle", x: someDate, label: "events", node: newNode }); //hover marker newNode = document.querySelector("#stxEventHover").cloneNode(true); newNode.id = null; newNode.querySelector(".content", newNode).innerHTML = 'H'; newNode.querySelector(".tooltip", newNode).title = 'Hover'; newNode.classList.add("hoverMarker"); someDate = new Date(stxx.masterData[stxx.masterData.length - 5].DT); someDate = stxx.getNextInterval(someDate, 1); // 1 bar in the future new CIQ.Marker({ stx: stxx, xPositioner: "date", //yPositioner: "above_candle", x: someDate, label: "events", node: newNode }); stxx.draw(); } stxx.loadChart("SPY", sampleData); showEvents();
<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" /> <div class="chartContainer" style="width:100%;height:400px;position:relative;"></div> <!--[if IE 8]><script>alert("This template is not compatible with IE8");</script><![endif]--> <div id="stxEventPrototype" class="myEvents"> </div> <div id="stxRhombusPrototype" class="myEvents"> <span class="shape"></span> <span class="label"></span> </div> <div id="stxEventHover" class="myEvents"> <span class="content"></span> <span class="tooltip"></span> </div>
.myEvents { position: absolute; text-align: center; width: 20px; height: 20px; line-height: 20px; color: white; } /*style dividents to be a blue circle*/ .myEvents.dividend { background-color: blue; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } /*style news to be a small red square*/ .myEvents.news { background-color: red; width: 15px; height: 15px; line-height: 15px; } .myEvents.earnings { background-color: purple; border: 5px solid yellow; } /*style to be a brown Rhombus*/ .myEvents.rhombus .shape { position: absolute; width: 20px; height: 20px; left: 0px; background-color: yellow; border: 2px solid black; color: black; -webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */ -moz-transform: rotate(45deg); /* FF3.5+ */ -ms-transform: rotate(45deg); /* IE9 */ -o-transform: rotate(45deg); /* Opera 10.5 */ transform: rotate(45deg); } .myEvents.rhombus .label { position: absolute; width: 20px; height: 20px; left: 2px; /* offset to center the label */ } .myEvents.hoverMarker { background-color: pink; border: 2px solid black; } /* create some rudimentary styling for our tooltip class */ .tooltip { display: inline; position: relative; } .hoverMarker:hover .tooltip:after { background: #333; background: rgba(0, 0, 0, .8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 30px; content: attr(title); } .hoverMarker:hover .tooltip:before { border: solid; border-color: #333 transparent; border-width: 11px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; }