Sample Events/Markers using ajax

This is the jsfiddle implementation of stx-quickstart.html with markers using ajax

by Jon Eyrick

HTML

<link rel="stylesheet" href="http://jsfiddle.chartiq.com/chart/css/stx-chart.css">
<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]-->

<script src="http://jsfiddle.chartiq.com/sample_markers_jsonP.js"></script>
<script src="http://jsfiddle.chartiq.com/chart/example-data/STX_SAMPLE_DAILY.js"></script>
<script src="http://jsfiddle.chartiq.com/chart/js/chartiq.js"></script>

<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

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

JavaScript

var stxx = new CIQ.ChartEngine({
  container: $$$(".chartContainer")
});

function showEvents(markerList) {
  for (var i = 0; i < markerList.length; i++) {
    newNode = $$$("#stxEventPrototype").cloneNode(true);
    newNode.id = null;
    newNode.innerHTML = markerList[i].Text;
    CIQ.appendClassName(newNode, markerList[i].Type);
    new CIQ.Marker({
      stx: stxx,
      xPositioner: "date",
      x: new Date(markerList[i].Date),
      label: "events",
      node: newNode
    });
  }

  stxx.draw();
}

stxx.newChart("SPY", sampleData);

// here is an example using an AJAX call to get your data
// you wil need to set up cross domain headers on your web server for this to work
var ajaxMarkers;
CIQ.postAjax("http://jsfiddle.chartiq.com/sample_markers.js", null, function(status, myserverResponseData) {
  if (status == 200) ajaxMarkers = JSON.parse(myserverResponseData);
  showEvents(ajaxMarkers);
});


/**
//here is an example if you are incluiding your data file as a script (  src="http://jsfiddle.chartiq.com/sample_markers_jsonP.js"). 
showEvents(sampleMarker);
**/