HelloWorld - with tool tip

This is the jsfiddle implementation of helloworld.html with a tool tip

by sonylnagale

HTML

<link rel="stylesheet" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css">
<div class="chartContainer" style="width:100%;height:400px;position:relative;">
          <stx-hu-tooltip>
            <stx-hu-tooltip-field field="Close">
                <stx-hu-tooltip-field-name>Last</stx-hu-tooltip-field-name>
                <stx-hu-tooltip-field-value></stx-hu-tooltip-field-value>
            </stx-hu-tooltip-field>
        </stx-hu-tooltip>
</div>

<!--[if IE 8]><script>alert("This template is not compatible with IE8");</script><![endif]-->

<script src="https://jsfiddle.chartiq.com/chart/js/chartiq.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src="https://jsfiddle.chartiq.com/chart/js/addOns.js"></script>

JavaScript

// Declare a CIQ.ChartEngine object.
// This is the main object for drawing charts.
// Here is where you set all required defaults.
var stxx = new CIQ.ChartEngine({
  container: $$$(".chartContainer"),
  layout: {
    "chartType": "candle",
    "crosshair": true,
    "candleWidth": 55,
    "periodicity": 1,
    "interval": 'day',
  },
  preferences: {
    "currentPriceLine": true,
    "whitespace": 20
  }
});


// To enable the tool tip, make sure you have the following included:
// - ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
// - js/addOns.js
// Then just call:

new CIQ.Tooltip({stx:stxx, ohl:true});

//Now load a chart with it's data
stxx.loadChart(
  "SPY", [{
    "Date": "1993-01-29",
    "Open": 43.97,
    "High": 43.97,
    "Low": 43.75,
    "Close": 43.94,
    "Volume": 1003200,
    "TEST": 1111
  }, {
    "Date": "1993-02-01",
    "Open": 43.97,
    "High": 44.25,
    "Low": 43.97,
    "Close": 44.25,
    "Volume": 480500,
  }, {
    "Date": "1993-02-02",
    "Open": 44.22,
    "High": 44.38,
    "Low": 44.13,
    "Close": 44.34,
    "Volume": 201300,
  }, {
    "Date": "1993-02-03",
    "Open": 44.41,
    "High": 44.84,
    "Low": 44.38,
    "Close": 44.81,
    "Volume": 529400,
  }, {
    "Date": "1993-02-04",
    "Open": 44.97,
    "High": 45.09,
    "Low": 44.47,
    "Close": 45,
    "Volume": 531500,
  }, {
    "Date": "1993-02-05",
    "Open": 44.97,
    "High": 45.06,
    "Low": 44.72,
    "Close": 44.97,
    "Volume": 492100,
  }, {
    "Date": "1993-02-08",
    "Open": 44.97,
    "High": 45.13,
    "Low": 44.91,
    "Close": 44.97,
    "Volume": 596100,
  }, {
    "Date": "1993-02-09",
    "Open": 44.81,
    "High": 44.81,
    "Low": 44.56,
    "Close": 44.66,
    "Volume": 122100,
  }, {
    "DT": "1993-02-10",
    "Open": 44.66,
    "High": 44.75,
    "Low": 44.53,
    "Close": 44.72,
    "Volume": 379600,
  }]
);