multiline chart using d3.js

cool multiline chart using d3.js

by gdicerbo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<!--1. toggle legend-->

CSS

body{
  font-family:sans-serif;
  background:#fff;
  }
svg{
 margin-top:40px;
}  
.axis path {
			fill: none;
			stroke: #777;
			shape-rendering: crispEdges;
		}
		.axis text {
			font-size: 11px;
      opacity: 0.5;
		}
		.axis line {
		  fill: none;
		  stroke: #000;
		  shape-rendering: crispEdges;
		}
    /* style for grid */
		.grid path,
		.grid line {
		  fill: none;
		  stroke: rgba(0, 0, 0, 0.25);
		  shape-rendering: crispEdges;
		}
  
  .tick line{
    stroke: #f5f5f5;
  }
  
  /* style for  line label customization */
  .lineLabel{
    font-size:12px;
  }
  /* style for  tooltip customization */
  div.tooltip {	
    position: absolute;			
    text-align: center;			
    padding: 10px;	
    font: 12px sans-serif;		
    border-radius: 8px;			
    pointer-events: none;			
}

#xAxis g.tick line {
  stroke: #f5f5f5;
  stroke-dasharray:3,3;
}

#xAxis g.tick:nth-child(3n) line {
  stroke: #e3e3e3;
  stroke-dasharray:0,0;
}

JavaScript

// chart data
	var chartConfig = {
    lineConnectorLength:40, 
    axisLabel:{
       xAxis : 'Date',
       yAxis : 'Value'
    },
    lineLabel:{
      height:20,
      width:60,
    },
		data:[{
		"sale": "1587.137391",
		"year": "0"
	},
	{
		"sale": "1569.405172",
		"year": "1"
	},
	{
		"sale": "1566.491379",
		"year": "2"
	},
	{
		"sale": "1563.043103",
		"year": "3"
	},
	{
		"sale": "1571.663793",
		"year": "4"
	},
	{
		"sale": "1704.491379",
		"year": "5"
	},
	{
		"sale": "1848.862069",
		"year": "6"
	},
	{
		"sale": "1899.663793",
		"year": "7"
	},
	{
		"sale": "1981.456897",
		"year": "8"
	},
	{
		"sale": "2031.25",
		"year": "9"
	},
	{
		"sale": "2035.741379",
		"year": "10"
	},
	{
		"sale": "2063.836207",
		"year": "11"
	},
	{
		"sale": "2045.336207",
		"year": "12"
	},
	{
		"sale": "2042.146552",
		"year": "13"
	},
	{
		"sale": "2020.741379",
		"year": "14"
	},
	{
		"sale": "1971.12931",
		"year": "15"
	},
	{
		"sale": "1925.827586",
		"year": "16"
	},
	{
		"sale": "1921",
		"year": "17"
	},
	{
		"sale": "1881.198276",
		"year": "18"
	},
	{
		"sale": "1836.025862",
		"year": "19"
	},
	{
		"sale": "1772.836207",
		"year": "20"
	},
	{
		"sale": "1736.793103",
		"year": "21"
	},
	{
		"sale": "1674.310345",
		"year": "22"
	},
	{
		"sale": "1621.068966",
		"year": "23"
	}],
  data2:[{
		"sale": "1584.904032",
		"year": "0"
	},
	{
		"sale": "1573.403226",
		"year": "1"
	},
	{
		"sale": "1533.258065",
		"year": "2"
	},
	{
		"sale": "1553.895161",
		"year": "3"
	},
	{
		"sale": "1578.209677",
		"year": "4"
	},
	{
		"sale": "1686.08871",
		"year": "5"
	},
	{
		"sale": "1845.056452",
		"year": "6"
	},
	{
		"sale": "1922.016129",
		"year": "7"
	},
	{
		"sale": "2022.798387",
		"year": "8"
	},
	{
		"sale": "2065.620968",
		"year": "9"
	},
	{
		"sale": "2048.008065",
		"year": "10"
	},
	{
		"sale": "2062.475806",
		"year": "11"
	},
	{
		"sale": "2046.943548",
		"year": "12"
	},
	{
		"sale": "2037.41129",
		"year": "13"
	},
	{
		"sale": "2018.032258",
		"year":...