Injection sample

Sample on how to add API injections

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]-->

CSS

.stx_baseline {/* color of baseline (dashed horizontal line) */
	color: #f00 !important;
	width: 10px !important;
  border: solid;
}

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);

// Declare a CIQ.ChartEngine object. This is the main object for drawing charts.
var stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer"),
  layout: {
    "chartType": "baseline",
    "crosshair": true,
    "candleWidth": 30,
    "periodicity": 1,
    "interval": 'day',
  },
  preferences: {
    "currentPriceLine": true,
    "whitespace": 300
  }
});

function injectionSample() {

  if (stxx.chart.dataSet.length) {
    var y = stxx.pixelFromPrice(stxx.chart.baseline["actualLevel"]);
    var context = stxx.chart.context;

    //write text
    context.font = '14pt Calibri';
    context.fillStyle = 'blue';
    context.fillText('This is the last price', 0, y+10);
  }
}

CIQ.ChartEngine.prototype.append("draw", injectionSample);

stxx.loadChart(
  "SPY", [{
      "Date": "1993-01-29",
      "Open": 43.97,
      "High": 43.97,
      "Low": 43.75,
      "Close": 43.94,
      "Volume": 1003200,
      "Adj_Close": 31.16
    },
    {
      "Date": "1993-02-01",
      "Open": 43.97,
      "High": 44.25,
      "Low": 43.97,
      "Close": 44.25,
      "Volume": 480500,
      "Adj_Close": 31.38
    },
    {
      "Date": "1993-02-02",
      "Open": 44.22,
      "High": 44.38,
      "Low": 44.13,
      "Close": 44.34,
      "Volume": 201300,
      "Adj_Close": 31.44
    },
    {
      "Date": "1993-02-03",
      "Open": 44.41,
      "High": 44.84,
      "Low": 44.38,
      "Close": 44.81,
      "Volume": 529400,
      "Adj_Close": 31.77
    },
    {
      "Date": "1993-02-04",
      "Open": 44.97,
      "High": 45.09,
      "Low": 44.47,
      "Close": 45,
      "Volume": 531500,
      "Adj_Close": 31.91
    },
    {
      "Date": "1993-02-05",
      "Open": 44.97,
      "High": 45.06,
      "Low": 44.72,
      "Close": 44.97,
      "Volume": 492100,
     ...