D3 Horizontal Bar Chart with ChartIQ Mountain Chart

D3js.org work

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;"></div>

<script src="https://d3js.org/d3.v5.min.js"></script>

<script src="https://jsfiddle.chartiq.com/chart/js/chartiq.js"></script>

<script src="https://d3.demo.chartiq.com/horizontal-barchart/js/extras/svgcharts/barchart-horizontal.js"></script>

<script src="https://d3.demo.chartiq.com/horizontal-barchart/js/quoteFeedSimulator.js"></script>

CSS

#bar {
  height: 200px;
  width: 800px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: auto;
  z-index: 500;
}

#Broker1 {
  fill: #388d8d;
  fill-opacity: .9;
}

#Broker2 {
  fill: #117408;
  fill-opacity: .9;
}

#Broker3 {
  fill: #4027cc;
  fill-opacity: .9;
}

.chartContainer {
  position: absolute;
  top: 300px;
  width: 800px;
  height: 460px;
}

JavaScript

window.dataSet = {}

// Instantiate a CIQ.ChartEngine object, the main object for creating charts.
var stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer"),
  layout: {
    chartType: "mountain"
  },
});

stxx.setPeriodicity({
  timeUnit: "second",
  periodicity: 1,
  interval: 1
});

CIQ.roundRectArrowCustom = (params) => {
  params.x = params.x + 7;
  params.margin.left = 2;
  CIQ.roundRect(params, "arrow");
};

stxx.chart.allowScrollFuture = false;
stxx.yaxisLabelStyle = "roundRectArrowCustom";
stxx.preferences.whitespace = "0";



stxx.attachQuoteFeed(quoteFeedSimulator, {
  refreshInterval: 1,
  timeUnit: "second"
});

stxx.loadChart(" ", [], () => {
  stxx.addSeries(null, {
    color: "#388d8d",
    shareYAxis: true,
    symbolObject: {
      symbol: "Broker1",
      url: "https://simulator.chartiq.com/datafeed"
    },
    type: "mountain"
  }, () => {
    stxx.addSeries(null, {
      color: "#117408",
      shareYAxis: true,

      symbolObject: {
        symbol: "Broker2",
        url: "https://simulator.chartiq.com/datafeed"
      },
      type: "mountain"
    }, () => {
      stxx.addSeries(null, {
        color: "#4027cc",
        shareYAxis: true,
        symbolObject: {
          symbol: "Broker3",
          url: "https://simulator.chartiq.com/datafeed"
        },
        type: "mountain"
      });
    });
  });
});

// called from quotefeed

function updateBar(data) {
  bar.updateData(data)
}

// minimal example, will create a container 300x300px
let bar = new CIQ.Visualization({
  title: "My Bar Chart",
  container: "#bar",
  className: "bar-chart",
  useCanvasShim: false,
  stx: stxx,
  renderFunction: CIQ.SVGChart.renderBarChart
});
bar.updateData();
CIQ.extend(bar.container.style, {
  position: "absolute",
  top: 0,
  zIndex: 500,
  width: '800px'
});