TechanJS Candlestick chart with tooltips

Forked TechanJS Candlestick chart and added tooltips.

forked from shashank2104's block: TechanJS Candlestick chart with tooltips

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
        font: 10px sans-serif;
    }

text {
        fill: #000;
    }

button {
        position: absolute;
        right: 20px;
        top: 440px;
        display: none;
    }

path.candle {
        stroke: #000000;
    }

path.candle.body {
        stroke-width: 0;
    }

path.candle.up {
        fill: #00AA00;
        stroke: #00AA00;
    }

path.candle.down {
        fill: #FF0000;
        stroke: #FF0000;
    }
div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: auto;					
    height: auto;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: rgba(0,0,0,0.8);	
  	color: #fff;
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
}

</style>
<body>
<button>Update</button>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://techanjs.org/techan.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

var parseDate = d3.timeParse("%d-%b-%y");

var x = techan.scale.financetime()
            .range([0, width]);

var y = d3.scaleLinear()
            .range([height, 0]);

var candlestick = techan.plot.candlestick()
            .xScale(x)
            .yScale(y);

var bisect = d3.bisector(function(d) { return d.date}).left;
  
    var xAxis = d3.axisBottom()
            .scale(x);

var yAxis = d3.axisLeft()
            .scale(y);

var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv", function(error, data) {
        var accessor = candlestick.accessor();

data = data.slice(0, 200).map(function(d) {
            return {
                date: parseDate(d.Date),
                open: +d.Open,
                high: +d.High,
                low: +d.Low,
                close: +d.Close,
                volume: +d.Volume
            };
        }).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });

svg.append("g")
                .attr("class", "candlestick");

svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")");

svg.append("g")
                .attr("class", "y axis")
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Price ($)");

// Data to display initially
        draw(data.slice(0, data.length-20));
      
      var tooltipDiv = d3.select("body").append("div")	
          .attr("class", "tooltip")				
          .style("opacity", 0);
      
      	svg.append('rect').attr('class', 'overlay')
        .attr('width', width).attr('height', height)
  	    .on("mouseover", function() { 
          tooltipDiv.style('opacity', 1);
          focus.style("display", null); 
        }).on("mouseout", function() { 
          tooltipDiv.style('opacity', 0);          
          focus.style("display", "none"); 
        }).style('fill', 'none').style('pointer-events', 'all').on('mousemove', function() {
          var x0 = x.invert(d3.mouse(this)[0]),
              i = bisect(data, x0, 1),
              d0 = data[i-1],
              d1 = data[i],
              d = x0 - d0.date > d1.date - x0 ? d1 : d0;
          
          var text = 'Date: ' + d3.timeFormat('%a %d %b %Y')(d.date);
          ['open', 'high', 'low', 'close'].forEach(function(key) {
            	text += '<br>' + key + ': ' + d[key];
          });
          tooltipDiv.style('left', d3.event.pageX+5+'px')
          	.style('top', d3.event.pageY-30+'px')
          	.html(text.trim());
          
        });
        // Only want this button to be active if the data has loaded
        d3.select("button").on("click", function() { draw(data); }).style("display", "inline");
    });

function draw(data) {
        x.domain(data.map(candlestick.accessor().d));
        y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain());

svg.selectAll("g.candlestick").datum(data).call(candlestick);
        svg.selectAll("g.x.axis").call(xAxis);
        svg.selectAll("g.y.axis").call(yAxis);
    }

</script>

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://techanjs.org/techan.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://techanjs.org/techan.min.js