Graph Lines

by mromanbanks

HTML

<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<section id="graph-block">
  <div class="graph"></div>
</section>

CSS

.ct-series-a .ct-line {
  fill: none;
	stroke: #FF8000 !important;
	stroke-width: 2px;
}
.ct-series-b .ct-line {
  fill: none;
	stroke: #12B33D !important;
	stroke-width: 2px;
}
.ct-series-c .ct-line {
  fill: none;
	stroke: red !important;
	stroke-width: 2px;
}
.ct-series-d .ct-line {
  fill: none;
	stroke: blue !important;
	stroke-width: 2px;
}
.ct-series-e .ct-line {
  fill: none;
	stroke: lightblue !important;
	stroke-width: 2px;
}
.ct-series-f .ct-line {
  fill: none;
	stroke: black !important;
	stroke-width: 2px;
}




#graph-block {
	height: 200px;
	width: 1100px;
	margin: auto;
	position: relative;
}

.tooltip-area, .graph {
	display: flex;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.tooltip-area {
	z-index: 1;
	width: calc(100% + calc(100% / 84));
	left: calc(100% / 84 * (-1));
}

.item {
  width: calc(100% / 84);
}

.item.visible {
  background-image: linear-gradient(rgba(0, 0, 0, 0.16) 50%, transparent 0%);
	background-position: right;
	background-size: 1px 6px !important;
	background-repeat: repeat-y;
}

JavaScript

// Generate some areas for tooltip
		for (var i = 84; i > 0; i--) {
			$(".tooltip-area").append( '<div id="' + [i] + '" class="item"></div>' );
		}
		// Handle hover on this areas and show vertical line
		$(".item").hover(function(){
			$(".item.visible").removeClass("visible");
			$(this).addClass("visible");
		});


		// Setting a variables
		var graphdata = [],
      graphdata = [];

			// generate arrays for graphs
			graphdata = getRandomData(84,50,10,97, [
				{length: 7, variance: 50, noise: 2, trend: 0},
				{length: 365, variance: 30, noise: 1, trend: 0},
				{length: 700, variance: 2, noise: 0, trend: 100}
			]);
			graphdataa = getRandomData(84,50,10,97, [
				{length: 7, variance: 50, noise: 2, trend: 0},
				{length: 365, variance: 30, noise: 1, trend: 0},
				{length: 700, variance: 2, noise: 0, trend: 100}
			]);
      graphdataa3 = getRandomData(84,50,10,97, [
				{length: 7, variance: 50, noise: 2, trend: 0},
				{length: 365, variance: 30, noise: 1, trend: 0},
				{length: 700, variance: 2, noise: 0, trend: 100}
			]);
      graphdataa4 = getRandomData(84,50,10,97, [
				{length: 7, variance: 50, noise: 2, trend: 0},
				{length: 365, variance: 30, noise: 1, trend: 0},
				{length: 700, variance: 2, noise: 0, trend: 100}
			]);
      graphdataa5 = getRandomData(84,50,10,97, [
				{length: 7, variance: 50, noise: 2, trend: 0},
				{length: 365, variance: 30, noise: 1, trend: 0},
				{length: 700, variance: 2, noise: 0, trend: 100}
			]);
      graphdataa6 = getRandomData(84,50,10,97, [
				{length: 7, variance: 50, noise: 2, trend: 0},
				{length: 365, variance: 30, noise: 1, trend: 0},
				{length: 700, variance: 2, noise: 0, trend: 100}
			]);
			// show graphs
			var chart = new Chartist.Line(('.graph'), {
				series: [graphdata, graphdataa, graphdataa3, graphdataa4, graphdataa5, graphdataa6]
			}, {
				showPoint: false,
				showLine: true,
				showArea: false,
				fullWidth: true,
				lineSmooth: true,
				showLabel: true,
				axisX:...