chart.js

// Source : http://bl.ocks.org/andredumas/ad585d6d68cf8a894207

/**
 * Construct a sample chart, accepting runtime environment loaded dependencies and data. This object is not aware of
 * where it runs: browser or node/V8
 *
 * @param d3
 * @param techan
 * @param csvData CSV data string
 * @returns {Function}
 */
function chart(d3, techan, csvData) {
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = 960 - margin.left - margin.right,
        height = 250 - 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 accessor = candlestick.accessor();
  
    var xAxis = d3.axisBottom(x);
  
    var yAxis = d3.axisLeft(y);
  
    var data = csvData.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(a.date, b.date);
    });
  
    return function(g) {
      var svg = g.append("svg")
          .attr("version", "1.1")
          .attr("xmlns", "http://www.w3.org/2000/svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
      x.domain(data.map(accessor.d));
      y.domain(techan.scale.plot.ohlc(data, accessor).domain());
  
      svg.append("style")
        .text(".axis path,.axis line{fill:none;stroke:#000;shape-rendering:crispEdges;}path.candle{stroke:#000000;}path.candle.body{stroke-width:0;}path.candle.up{fill:#00AA00;stroke:#00AA00;}path.candle.down{fill:#FF0000;stroke:#FF0000;}")

      svg.append("g")
        .datum(data)
        .attr("class", "candlestick")
        .call(candlestick);
  
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
  
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Price ($)");
    }
  }
  
  // If we're in node
  if(typeof module === 'object') {
    // Expose the chart
    module.exports = chart;
  }