D3 Line Chart without date and date

D3 Line Chart without date and date JSON data

by Khadeer Mohammed

HTML

<script src="https://d3js.org/d3.v3.js"></script>
<div class="ChartBox"></div>

CSS

body {
		  font: 12px/1.4 arial;
		  background: rgba(0,0,0,.1);
		  text-align: center;
		  color: #333;
		}
		text {
			fill: #555;
		}
		.axis path,
		.axis line {
		  fill: none;
		  stroke: rgba(0,0,0,.2);
		  shape-rendering: crispEdges;
		}
		.y.axis .tick:first-child line {
			stroke-opacity: 0;
		}
		.line {
		  fill: none;
		  stroke: #05c;
		  stroke-width: 2.5px;
		}
		.CircleG circle {
			fill: #fff;
			stroke: #f00;
			stroke-width: 1.5px;
			transition: fill ease-in .2s;
			-webkit-transition: fill ease-in .2s;
			-ms-transition: fill ease-in .2s;
		}
		.CircleG circle:hover {
			stroke-width: 2px;
			fill: #f00;
		}
		div.tooltip {	
		    position: absolute;			
		    text-align: center;			
		    padding: 10px 1em;			
		    background: rgba(0,0,0,.8);
		    color: #eee;
		    box-shadow: 0 1px 5px rgba(0,0,0,.3);
		    border: 0px;		
		    border-radius: 3px;			
		    pointer-events: none;
		    white-space: nowrap;	
		}
		div.tooltip:after {
			content: '';
		    position: absolute;
		    bottom: -12px;
		    left: 50%;
		    margin-left: -5px;
		    border: 6px solid transparent;
		    border-top-color: rgba(0,0,0,.8);
		}
		div.tooltip.top:after {
			bottom: 100%;
			border-top-color: transparent;
			border-bottom-color: rgba(0,0,0,.8);
		}
		div.tooltip.left:after {
			left: 20px;
		}
		div.tooltip.right:after {
			left: auto;
			right: 20px;
		}
		.ChartBox {
			background: #fff;
			box-shadow: 0 2px 3px rgba(0,0,0,.1);
			padding: 1em;
			border-radius: 3px;
			display: inline-block;
		}
		.Cont {
			display: block;
			background: #fff;
			padding: 1em;
			font-size: 15px;
			text-align: left;
			margin: 1em;
		}
		.GridLines line {
			stroke: rgba(0,0,0,.05);
		}
		.GridLines line:first-child {
			stroke-opacity: 0;
		}
		.Legends ul {
		  margin: 0;
		  padding: 0;
		  list-style-type: none;
		}
		.Legends ul li {
		  padding: 1em 1em .2em;
		  line-height: 1.2;
		  display: inline-block;
		}
		.Legends li > :first-child, .Legends li >...

JavaScript

//dynamic change keys for JSON data
function updateKeysJOSN(existingJSON){
	var key1;
	var key2;
	var n = 0;
	Object.keys(existingJSON[0]).forEach(function(k) {
		if(n == 0){
			key1 = k;
		} else {
			key2 = k;
		}
		n++;
	});
	var newJSON = [];
	for(var i in existingJSON){
		var obj = {};
		obj.key1 = existingJSON[i][key1];
		obj.key2 = parseInt(existingJSON[i][key2]);
		newJSON.push(obj);
	}
	return newJSON;
}
// end dynamic change keys for JSON data		


		// date data
    //lineData = [{"date":"22-01-2018","value":"1"},{"date":"23-01-2018","value":"1"},{"date":"19-01-2018","value":"10"},{"date":"17-01-2018","value":"10"}];
    
    // without date data
    lineData = [{"name":"Transformation","value":"5"},{"name":"Preparation","value":"15"},{"name":"Migrations","value":"50"},{"name":"Configs","value":"30"},{"name":"DataScan","value":"70"}];
		
		data = updateKeysJOSN(lineData);

		// Set the dimensions of the canvas / graph
		var margin = { top: 20, right: 20, bottom: 50, left: 40 },
			width = 400 - margin.left - margin.right,
			height = 220 - margin.top - margin.bottom;

		var xScale = d3.scale.ordinal()
			.rangePoints([0, width])
			.domain(data.map(function(d) {
				return d.key1;
			}));

		var yScale = d3.scale.linear()
			.domain([0, d3.max(data, function(d) {
				return d.key2;
			})])
			.range([height, 0]);

		var xAxis = d3.svg.axis()
			.scale(xScale)
			.orient("bottom")
		//.innerTickSize(-height)
		//.outerTickSize(0)
		//.tickPadding(10);

		var yAxis = d3.svg.axis()
			.scale(yScale)
			.orient("left")
			.ticks(5);
		//.innerTickSize(-width)
		//.outerTickSize(0)
		//.tickPadding(10);

		// Define the line
		var line = d3.svg.line()
			.x(function(d) {
				return xScale(d.key1);
			})
			.y(function(d) {
				return yScale(d.key2);
			});

		// Adds the svg canvas
		var svg = d3.select('.ChartBox')
			.append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top +...