D3OG

All examples By author By category About

laxmikanta415

Full window Github gist

fresh block ohcl

Built with blockbuilder.org

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

body {
        font: 10px sans-serif;
    }

text {
        fill: #000;
    }

path {
        fill: none;
        stroke-width: 1;
    }

path.ohlc {
        stroke: #000000;
        stroke-width: 1;
    }

path.ohlc.up {
        stroke: #00AA00;
    }

path.ohlc.down {
        stroke: #FF0000;
    }

.ma-0 path.line {
        stroke: #1f77b4;
    }

.ma-1 path.line {
        stroke: #aec7e8;
    }

path.volume {
        fill: green;
    }

.crosshair {
        cursor: crosshair;
    }

.crosshair path.wire {
        stroke: #DDDDDD;
        stroke-dasharray: 1, 1;
    }

.crosshair .axisannotation path {
        fill: #DDDDDD;
    }

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

</head>
<body>
<script>  nsr= '';
    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 yVolume = d3.scaleLinear()
            .range([y(0), y(0.2)]);

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

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

var sma0Calculator = techan.indicator.sma()
            .period(10);

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

var sma1Calculator = techan.indicator.sma()
            .period(20);

var volume = techan.plot.volume()
            .accessor(ohlc.accessor())   // Set the accessor to a ohlc accessor so we get highlighted bars
            .xScale(x)
            .yScale(yVolume);

var xAxis = d3.axisBottom(x);

var yAxis = d3.axisLeft(y);

var volumeAxis = d3.axisRight(yVolume)
            .ticks(3)
            .tickFormat(d3.format(",.3s"));

var timeAnnotation = techan.plot.axisannotation()
            .axis(xAxis)
            .orient('bottom')
            .format(d3.timeFormat('%Y-%m-%d'))
            .width(65)
            .translate([0, height]);

var ohlcAnnotation = techan.plot.axisannotation()
            .axis(yAxis)
            .orient('left')
            .format(d3.format(',.2f'));

var volumeAnnotation = techan.plot.axisannotation()
            .axis(volumeAxis)
            .orient('right')
            .width(35);

var crosshair = techan.plot.crosshair()
            .xScale(x)
            .yScale(y)
            .xAnnotation(timeAnnotation)
            .yAnnotation([ohlcAnnotation, volumeAnnotation])
            .on("move", move);

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

var defs = svg.append("defs");

defs.append("clipPath")
            .attr("id", "ohlcClip")
        .append("rect")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", width)
            .attr("height", height);

svg = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var ohlcSelection = svg.append("g")
            .attr("class", "ohlc")
            .attr("transform", "translate(0,0)");

ohlcSelection.append("g")
            .attr("class", "volume")
            .attr("clip-path", "url(#ohlcClip)");

ohlcSelection.append("g")
            .attr("class", "candlestick")
            .attr("clip-path", "url(#ohlcClip)");

ohlcSelection.append("g")
            .attr("class", "indicator sma ma-0")
            .attr("clip-path", "url(#ohlcClip)");

ohlcSelection.append("g")
            .attr("class", "indicator sma ma-1")
            .attr("clip-path", "url(#ohlcClip)");

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 ($)");

svg.append("g")
            .attr("class", "volume axis");

svg.append('g')
            .attr("class", "crosshair ohlc");

var coordsText = svg.append('text')
            .style("text-anchor", "end")
            .attr("class", "coords")
            .attr("x", width - 5)
            .attr("y", 15);

var feed;

d3.json("data.json", function(error, csv) {
        var accessor = ohlc.accessor();
 
        feed = csv.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)); });

// Start off an initial set of data
        redraw(feed.slice(0, 163));
     
    });

function redraw(data) {
        var accessor = ohlc.accessor();

x.domain(data.map(accessor.d));
        // Show only 150 points on the plot
        x.zoomable().domain([data.length-130, data.length]);

// Update y scale min max, only on viewable zoomable.domain()
        y.domain(techan.scale.plot.ohlc(data.slice(data.length-130, data.length)).domain());
         yVolume.domain(techan.scale.plot.volume(data.slice(data.length-130, data.length)).domain());

// Setup a transition for all that support
        svg
//          .transition() // Disable transition for now, each is only for transitions
            .each(function() {
                var selection = d3.select(this);
                selection.select('g.x.axis').call(xAxis);
                selection.select('g.y.axis').call(yAxis);
                selection.select("g.volume.axis").call(volumeAxis);

selection.select("g.candlestick").datum(data).call(ohlc);
               
                selection.select("g.volume").datum(data).call(volume);

svg.select("g.crosshair.ohlc").call(crosshair);
            });

// Set next timer expiry
        setTimeout(function() {
            var newData;

if(data.length < feed.length) {
                // Simulate a daily feed
                newData = feed.slice(0, data.length+1);
            }
            else {
                // Simulate intra day updates when no feed is left
                var last = data[data.length-1];
                // Last must be between high and low
                last.close = Math.round(((last.high - last.low)*Math.random())*10)/10+last.low;

newData = data;
            }

//redraw(newData);
        }, (Math.random()*1000)+400); // Randomly pick an interval to update the chart
    }

function move(coords) {
        coordsText.text(
                timeAnnotation.format()(coords.x) + ", " + ohlcAnnotation.format()(coords.y)
        );
    }

</script>
      </body>

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

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

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