Histogram sample - pushed data

Chart with a histogram and static data

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>

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

JavaScript

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

// Activate the License Key
import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js";
getLicenseKey(CIQ);

const container = document.querySelector(".chartContainer");
Object.assign(container.style, { width: "100%", height: "300px" });

const stxx = new CIQ.ChartEngine({ container });


const [PMIdata, GDPdata] = getGDPPMIData();

baselineSynchedChart(
	stxx,
  {
    bar: { // barchart parameters
      symbol: "PMI",
      data: PMIdata,
      baselineLevel: 50,
      color: { up: "#9fd2a1", down: "#ee968a" }
    }, 
    line: { // linechart parameters
      symbol: "GDP",
      data: GDPdata,
      baselineLevel: 0,
      color: { up: "darkgreen", down: "#fcfb00" } ,
      yzoom: 150,
      yscroll: 40
    },
    periodicity: {
      period: 1,
      interval: 1,
      timeUnit: 'month'
    },
		xzoom: 0.95
  }
);




function baselineSynchedChart(stx, { bar, line, periodicity, xzoom }) {
	// set chart type to baseline delta
	stx.setChartType("baseline_delta");
	stx.chart.yAxis.drawCurrentPriceLabel = false;
	stx.container.querySelector(".chart-title").style.visibility = "hidden"; // hide title
	//stx.controls.chartControls.style.visibility = "hidden"; // hide zoom

	Object.assign(
		stx.chart.baseline,
		{
			defaultLevel: line.baselineLevel,
			userLevel: false // hide drag handle preventing user from adjusting baseline
		}
	);

	// set range if data is provided
	let range
	if (line.data) {
		let startDate = new Date(line.data[0].Date);
    startDate = new Date(startDate.getFullYear(), startDate.getMonth() + 1);

    let endDate = new Date(line.data[line.data.length - 1].Date);
    endDate = new Date(endDate.getFullYear(), endDate.getMonth() + 1);

    range = { 
      dtLeft: startDate, 
    ...