JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/js-data/financial-data-random"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<script id="tooltipTemplate" type="text/x-jquery-tmpl">
		<span class="tooltip">${item.DateString}</span><br />
        <span class="tooltip">Open:&nbsp;</span><span>${item.Open}</span><br />
		<span class="tooltip">Low:&nbsp;</span><span>${item.Low}</span><br />
		<span class="tooltip">High:&nbsp;</span><span>${item.High}</span><br />
		<span class="tooltip">Close:&nbsp;</span><span>${item.Close}</span><br />
    </script>

<div id="chartOverview"></div>
	<div id="zoomOverview"></div>
	<div id="buttonset" class="buttonset">
		<input type="radio" id="day" name="radio"></input><label for="day">Day</label>
		<input type="radio" id="week" name="radio"></input><label for="week">Week</label>
		<input type="radio" id="month" name="radio"></input><label for="month">Month</label>
	</div>
	<div id="date">
	</div>
	<div id="popoverLeft"></div>
	<div id="popoverRight"></div>

CSS

.buttonset
		{
			position: absolute;
			top: 0px;
			left: 50px;
			z-index: 10000;
		}
		.buttonset > label
		{
			width: 60px;
			height: 26px;
			margin-right: -4px!important;
		}
		.tooltip{
			font-weight: bold;
		}

JavaScript

$(function () {
$(document).ready(function () {
		    var chartOverview = $("#chartOverview"),
				zoombarOverview = $("#zoomOverview"),
				popoverTimeout = 0,
				popoverLeft,
				popoverRight,
				lastTarget,
				currentlyDragged,
				zoomParams;
		    chartOverview.igDataChart({
				width: "100%",
				height: "300px",
				axes: [
					{
						name: "xAxis",
						type: "categoryDateTimeX",
						dataSource: financialData1,
						dateTimeMemberPath: "Date",
						labelVisibility: "visible"
					},
					{
						name: "yAxis",
						type: "numericY"
					}
				],
				series: [
					{
						name: "series1",
						dataSource: financialData1,
						title: "Price Series",
						type: "line",
						isTransitionInEnabled: true,
						xAxis: "xAxis",
						yAxis: "yAxis",
						showTooltip: true,
						tooltipTemplate: "tooltipTemplate",
						closeMemberPath: "Close",
						thickness: 2,
						trendLineBrush: "rgba(68, 172, 214, .8)",
						trendLineThickness: 5,
						trendLineType: "exponentialAverage",
						negativeBrush: "rgba(198, 45, 54, .8)",
            unknownValuePlotting: "linearInterpolate"
					}
				],
				horizontalZoomable: true,
				verticalZoomable: false,
				windowResponse: "immediate",
				refreshCompleted: function (e, ui) {
				    if ($("#chartOverview")[0] !== undefined && $("#chartOverview")[0] !== null) {
				        var viewport = ui.chart.gridAreaRect,
							    leftMostValue = $("#chartOverview").igDataChart("unscaleValue", "xAxis", viewport.left),
							    rightMostValue = $("#chartOverview").igDataChart("unscaleValue", "xAxis", viewport.left + viewport.width);
				        // get the dates corresponding to the values
				        leftMostValue = new Date(leftMostValue);
				        rightMostValue = new Date(rightMostValue);
				        // set the dates to the popover
				        if (popoverLeft.data("igPopover")) {
				            popoverLeft.igPopover("setContent", $.ig.formatter(leftMostValue, "date", "date"));
				        }
				   ...