HelloWorld - Basic chart

This is the jsfiddle implementation of helloworld.html

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:100%;height:400px;position:relative;"></div>

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/standard.js";

// Declare a CIQ.ChartEngine object.
// This is the main object for drawing charts.
// Here is where you set all required defaults.
const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer"),
  layout: {
    "chartType": "candle",
    "crosshair": true,
    "candleWidth": 130
  },
  preferences: {
    "currentPriceLine": true
  },
  chart: {
    yAxis: {
      position: 'left'
    }
  }
});

const sample5min=[
{"Date":"2015-04-29 13:10","Open":155.47,"High":155.5,"Low":155.44,"Close":155.48,"Volume":489369},
{"Date":"2015-04-29 13:15","Open":155.49,"High":155.49,"Low":155.46,"Close":155.47,"Volume":244842, "TESTME": {
    "DT":new Date("2015-04-29 13:15"),
    "Close": 155
}},
{"Date":"2015-04-29 13:20","Open":155.47,"High":155.53,"Low":155.46,"Close":155.51,"Volume":474047, "TESTME": {
    "DT":new Date("2015-04-29 13:20"),
    "Close": 155
}},
{"Date":"2015-04-29 13:25","Open":155.51,"High":155.52,"Low":155.45,"Close":155.47,"Volume":681135, "TESTME": {
    "DT":new Date("2015-04-29 13:25"),
    "Close": 155
}},
{"Date":"2015-04-29 13:30","Open":155.46,"High":155.47,"Low":155.37,"Close":155.41,"Volume":960220, "TESTME": {
    "DT":new Date("2015-04-29 13:30"),
    "Close": 155
}},
{"Date":"2015-04-29 13:35","Open":155.41,"High":155.42,"Low":155.38,"Close":155.41,"Volume":382552, "TESTME": {
    "DT":new Date("2015-04-29 13:35"),
    "Close": 155
}},
{"Date":"2015-04-29 13:40","Open":155.41,"High":155.46,"Low":155.4,"Close":155.45,"Volume":235941, "TESTME": {
    "DT":new Date("2015-04-29 13:40"),
    "Close": 155
}}];

//Now load a chart with it's data
stxx.loadChart(
  "SPY", sample5min, () => {
  	stxx.addSeries('TESTME', { color: "blue"})
  }
);