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": "mountain" } }); // Declare a CIQ.ChartEngine object. This is the main object for drawing charts. // customize your axis style stxx.chart.yAxis.goldenRatioYAxis = true; //stxx.chart.xAxis.axisType = "ntb"; //have main chart give space for the legend stxx.chart.yAxis.initialMarginTop = 50; //position legend stxx.chart.legend = { x: 300, y: 20 }; stxx.loadChart("MASTER", sampleData); // This is just dummy code for streaming quotes (randomly generated to update the last tick) setInterval(function() { let newQuote = CIQ.clone(stxx.currentQuote()); newQuote.Close = newQuote.SERIES.Close + Math.round((Math.random() - 0.5) * 100) / 100; newQuote.Volume = newQuote.SERIES.Volume + Math.round((Math.random() + 0.5) * 100) / 100; newQuote.DT = new Date(+newQuote.DT + CIQ.DAY) stxx.updateChartData(newQuote, null, { secondarySeries: "SERIES", useAsLastSale: true }) }, 2000); function backfillSeriesData() { let newData = []; for (let i = 0; i < stxx.masterData.length; i++) { var newQuote = CIQ.clone(stxx.masterData[i]); newQuote.Close = newQuote.Close + Math.round((Math.random() - 0.5) * 100) / 100; newQuote.Volume = newQuote.Volume + Math.round((Math.random() + 0.5) * 100) / 100; newData.push(newQuote) } return newData } // add the series stxx.addSeries("SERIES", { color: "green", // Dummy code to generate data to backfill the series data: backfillSeriesData(), marginTop: 100, // give room for the legend });
<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>