Bar Line Chart

Author: Roydon DSouza Initial clone from http://stackoverflow.com/a/17034926/1319642 Fork of http://jsbin.com/gisinomo/1/edit which is a fork of The example is a fork of the simple Bar Chart on the d3 wiki. http://bl.ocks.org/mbostock/3885304 Thanks to Mike Bostock and mg1075 http://stackoverflow.com/users/538962/mg1075 Also picked up time scales from http://jsfiddle.net/aWJtJ/4/

by Roydon DSouza

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script>
var data = [{ "time": "20100101", "transactions": .08167, "amount": 26},
{ "time": "20100102", "transactions": .01492, "amount": 2},
{ "time": "20100103", "transactions": .02780, "amount": 3},
{ "time": "20100104", "transactions": .04253, "amount": 20},
{ "time": "20100105", "transactions": .12702, "amount": 6},
{ "time": "20100106", "transactions": .02288, "amount": 60},
{ "time": "20100107", "transactions": .02022, "amount": 3},
{ "time": "20100108", "transactions": .06094, "amount": 23},
{ "time": "20100109", "transactions": .06973, "amount": 12},
{ "time": "20100110", "transactions": .00153, "amount": 34},
{ "time": "20100111", "transactions": .00747, "amount": 6},
{ "time": "20100112", "transactions": .04025, "amount": 7},
{ "time": "20100113", "transactions": .02517, "amount": 5},
{ "time": "20100114", "transactions": .06749, "amount": 23},
{ "time": "20100115", "transactions": .07507, "amount": 12},
{ "time": "20100116", "transactions": .01929, "amount": 23},
{ "time": "20100117", "transactions": .00098, "amount": 45},
{ "time": "20100118", "transactions": .05987, "amount": 45},
{ "time": "20100119", "transactions": .06333, "amount": 23},
{ "time": "20100120", "transactions": .09056, "amount": 12},
{ "time": "20100121", "transactions": .02758, "amount": 23},
{ "time": "20100122", "transactions": .01037, "amount": 56},
{ "time": "20100123", "transactions": .02465, "amount": 6},
{ "time": "20100124", "transactions": .00150, "amount": 12},
{ "time": "20100125", "transactions": .01971, "amount": 9},
{ "time": "20100126", "transactions": .00074, "amount": 1}];

var data2 = [
{ "time": "20100101",  "amount": 0.02},
{ "time": "20100102",  "amount": 0.023},
{ "time": "20100103", "amount": 0.020},
{ "time": "20100104",  "amount": 0.26},
{ "time": "20100105",  "amount": 0.020},
{ "time": "20100106",  "amount": 0.03},
{ "time": "20100107", "amount": 0.023},
{ "time": "20100108", ...

CSS

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.grid {
  stroke: #777;
  stroke-dasharray: 2,2;
  shape-rendering: crispEdges;    
}

.bar {
  fill: #0097e1;
}

.bar:hover {
  fill: #0170a7;
}

.x.axis path {
 // display: none;
}
  
.line {
  fill: none;
  stroke: #004fa7;
  stroke-width: 2px;
}

.point {
	stroke: #004fa7;
	fill:#fff;
	stroke-width: 2.5px;
  stroke-linecap: round;

 }
 
.point:hover {
  stroke-width: 8px;
  stroke-opacity: .5;
	
	 transition: stroke-width 250ms linear;
  -moz-transition: stroke-width 250ms linear;
  -webkit-transition: stroke-width 250ms linear;

  transition-delay: 250ms
  -moz-transition-delay: 250ms;
  -webkit-transition-delay: 250ms;
 } 

.tooltip {
    position: absolute;
  /*  max-height:65px;*/
	height:60px;
    width:150px;
    text-align: left;
    max-width:180px;
    padding: 5px 7px 5px 7px;
    background: #fff;
  -moz-box-shadow: 1px 1px 12px -2px rgb(160, 160, 160);
  -webkit-box-shadow: 1px 1px 12px -2px rgb(160, 160, 160);
/*  display: block;
*/  margin: 30px;
  z-index: 999;
  border: 1px solid #ccc;
}

.tooltip p {
color: rgb(102,102,102);
font: normal 12px/1.5 arial, sans-serif;
margin: 0 8px;
padding: 10px;
}

.overlay {
fill: none;
pointer-events: all;
}