Sample Events/Markers using ajax

This is the jsfiddle implementation of helloworld.html with markers using ajax

by sonylnagale

HTML

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

<div class="chartContainer" style="width:600px;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>

CSS

@charset "UTF-8";
/* CSS Document */

.chartContainer { /* DIV that the canvas expands to. */
	display: block;
	font-family: Roboto, Helvetica, sans-serif;
	font-size: 12px;
	position:relative; /* chart container must be relative for internal DOM elements to be correct */
}

.sharing .ciq-no-share {
	display: none !important;
}

.stx-canvas-shim {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* --------------------------------------------------------- BUTTONS --------------------------------------------------------- */

/* Basic Buttons */
/* 
.stx-btn { Inactive Button
  display:inline-block;
  cursor: pointer;
  padding: 0px 8px;
  border: solid 1px #ddd;
  font-weight: bold;
  line-height: 27px;
  color: #7e7e7e;
  text-align: center;
  overflow: visible;
  background-repeat: no-repeat;
  border-radius: 3px;
  transition: color .25s, border .25s, box-shadow .25s;
  user-select: none;
} */
/* Button Hover State */
/*.stx-btn:hover {
	color: #444444;
	border: solid 1px #c5c5c5;
	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, .1), inset 0px -8px 6px rgba(100, 100, 100, .03);
	-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, .1), inset 0px -8px 6px rgba(100, 100, 100, .03);
	box-shadow: 0px 1px 1px rgba(0, 0, 0, .1), inset 0px -8px 6px rgba(100, 100, 100, .03);
}*/
/* Button Active State */
/* .stx-btn:active {
  color: #333;
  -webkit-box-shadow: inset 0px 8px 6px rgba(100, 100, 100, .03);
  -moz-box-shadow: inset 0px 8px 6px rgba(100, 100, 100, .03);
  box-shadow: inset 0px 8px 6px rgba(100, 100, 100, .03);
}
 */

/* Panel Buttons */
/* 
.stx-btn-panel,
.stx-btn-panel span {Button Defaults
  display:inline-block;
  width:25px;
  height:25px;
  cursor:pointer;
   transition: transform .2s;
}
.stx-btn-panel {Button Spacing
  margin:6px 2px 3px 2px;
}
.stx-btn-panel:hover span,
.stx-btn-panel:active span {Make buttons full opacity on hover or hit
  opacity:1;
}
.stx-btn-panel:active {Scale up when active
  -webkit-transform:...

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"),
  layout: {
  	chartType: "baseline_mountain"
  }
});


stxx.loadChart("SPY", sampleData);