Events/Markers by label

This is the jsfiddle implementation of helloworld.html with markers that are added and removed by label

by ChartIQ Library

HTML

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />

<div class="stx-btn stx-menu-btn toggle stx-collapsible" id="menuEvents" onclick="toggleEvents('news')"><span>News</span></div>
<div class="stx-btn stx-menu-btn toggle stx-collapsible" id="menuEvents" onclick="toggleEvents('earnings')"><span>Earnings</span></div>
<div class="stx-btn stx-menu-btn toggle stx-collapsible" id="menuEvents" onclick="toggleEvents('dividend')"><span>Dividends</span></div>

<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>

<div id="stxEventPrototype" class="myEvents"></div>

CSS

.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;
}

JavaScript

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(typeOfEvent) {

  // see how you can set the vertical location for the marker based on event type 
  // by setting the 'yPoistioner'
  // - 'earnings' will display on the very top,
  // - 'news' will display on the very bottom
  // - all others default to 'above_candle'  
  var yPositioner;
  if (typeOfEvent == 'news') yPositioner = 'bottom'
  else if (typeOfEvent == 'earnings') yPositioner = 'top'

  // This sample code just randomly goes trough the masterData to pick event dates to display.
  // In your chart, this data will probably come from a markers feed.  
  if (!stxx.masterData) return;
  for (var i = 0; i < stxx.masterData.length; i += Math.floor(Math.random() * 20) + 1) {
    let newNode = document.querySelector("#stxEventPrototype").cloneNode(true);
    newNode.id = null;
    newNode.innerHTML = typeOfEvent.toUpperCase().charAt(0);
    newNode.classList.add(typeOfEvent);
    new CIQ.Marker({
      stx: stxx,
      xPositioner: "date",
      x: stxx.masterData[i].DT,
      yPositioner: yPositioner,
      label: typeOfEvent,
      node: newNode
    });
  }
  // first add all the markers, then draw them all at once.
  stxx.draw();
}

var eventsAreDisplayed = {};

window.toggleEvents = function(typeOfEvent) { // This is called by the menu item
  if (eventsAreDisplayed[typeOfEvent]) {
    eventsAreDisplayed[typeOfEvent] = false;
    CIQ.Marker.removeByLabel(stxx, typeOfEvent);
  } else {
    showEvents(typeOfEvent);
    eventsAreDisplayed[typeOfEvent] = true;
  }
}

stxx.loadChart("SPY", sampleData);