TN1ck/index.html

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

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}

svg {
  width: 960px;
  height: 500px;
}

.axis text {
  font: 10px sans-serif;
}

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

</style>
<body>
  <svg id="chart"></svg>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>

// these time utilites are from mike bostock

// Returns the weekday number for the given date relative to January 1, 1970.
function weekday(date) {
    var weekdays = weekdayOfYear(date),
        year = date.getFullYear();
    while (--year >= 1970) weekdays += weekdaysInYear(year);
    return weekdays;
};

// Returns the date for the specified weekday number relative to January 1, 1970.
function invert(weekdays) {

    var year = 1970,
        yearWeekdays;

    // Compute the year.
    while ((yearWeekdays = weekdaysInYear(year)) <= weekdays) {
      ++year;
      weekdays -= yearWeekdays;
    }

    // Compute the date from the remaining weekdays.
    var days = weekdays % 5,
        day0 = ((new Date(year, 0, 1)).getDay() + 6) % 7;
    if (day0 + days > 4) days += 2;
    return new Date(year, 0, (weekdays / 5 | 0) * 7 + days + 1);
};

// Returns the number of weekdays in the specified year.
function weekdaysInYear(year) {
    return weekdayOfYear(new Date(year, 11, 31)) + 1;
};

// Returns the weekday number for the given date relative to the start of the year.
function weekdayOfYear(date) {
    var days = d3.time.dayOfYear(date),
        weeks = days / 7 | 0,
        day0 = (d3.time.year(date).getDay() + 6) % 7,
        day1 = day0 + days - weeks * 7;
    return Math.max(0, days - weeks * 2
        - (day0 <= 5 && day1 >= 5 || day0 <= 12 && day1 >= 12) // extra saturday
        - (day0 <= 6 && day1 >= 6 || day0 <= 13 && day1 >= 13)); // extra sunday
};

function translate(x, y) {
  return ['translate(', x, ',', y, ')'].join('');
}


function call(selector, data) {

    // select the svg
    var svg = d3.select(selector);

    // set up paramaters like margin and stuff
    var height = $(selector).height(),
        width = $(selector).width(),
        margins = {top: 10, bottom: 30, right: 50, left: 50},
        colors = {'red': '#E56E5F', 'green': '#A9C05F', 'blue': '#48B3D8'},
        transitionDuration = 1000;

    // set up the axis
    var x = d3.scale.linear()
        .domain([weekday(new Date(data[0].date)),
                 weekday(new Date(data[data.length - 1].date))])
        .range([margins.left, width - margins.right]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom')
        .ticks(10)
        .tickFormat(function (d) {
            var format = d3.time.format('%y-%m-%d');
            return format(invert(d));
        });

    var y = d3.scale.linear()
        .domain([100, 0])
        .rangeRound([margins.top, height - margins.bottom])
        .nice();

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient('left')
        .ticks(10)
        .tickFormat(function (d) {
            return d + '$';
        });

    var boxplots = svg.append('g');

    svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', translate(0, height - margins.bottom))
        .call(xAxis);

    svg.append('g')
        .attr('class', 'y axis')
        .attr('transform', translate(margins.left, 0))
        .call(yAxis);

    // enter/update/exit
    function update(svg, data) {

        x = x.domain([weekday(data[0].date),
                      weekday(data[data.length - 1].date)]);

        // using sth. like x(1) - x(0) isn't robust enough because of holidays
        // 10% margin
        var weekdaysBetween = weekday(data[data.length - 1].date) - weekday(data[0].date),
            elementWidth =  ((width - (margins.right + margins.left))/weekdaysBetween) * 0.9;
            max = d3.max(data, function (d) { return d.high; }),
            min = d3.min(data, function (d) { return d.low; }),


        xAxis = xAxis.scale(x);

        y = y.domain([max, min]);

        yAxis = yAxis.scale(y);

        svg.selectAll('g.x.axis')
           .attr('transform', translate(elementWidth/2, height - margins.bottom))
           .transition()
           .duration(transitionDuration)
           .call(xAxis);

        svg.selectAll('g.y.axis')
           .transition()
           .duration(transitionDuration)
           .call(yAxis);

        // new, old, removed elements
        var gs = boxplots.selectAll('.boxplot').data(data, _.property('date'));
        var lhrects = boxplots.selectAll('.lc-rect').data(data, _.property('date'));
        var ocrects = boxplots.selectAll('.oc-rect').data(data, _.property('date'));

        var lhrectsCall = function(selection) {

            return selection
              .attr('height', function (d) { return y(d.low) - y(d.high); })
              .attr('x', elementWidth/2)
              .attr('y', function(d) { return y(d.high); })
              .attr('opacity', 1)
              .attr('width', 1)

        };

        var ocrectsCall = function(selection) {

            return selection
                .attr('height', function (d) {
                    var height = Math.abs(y(d.open) - y(d.close));
                    return height < 1 ? 1 : height;
                })
                .attr('width', elementWidth)
                .attr('y', function (d) {
                    return y(d3.max([d.open, d.close]));
                })
                .attr('fill', function (d) {
                    return d.close > d.open ? colors.green : colors.red;
                })
                .attr('x', 0);

        };

        //
        // enter
        //

        var gsEnter =
        gs.enter()
           .append('g')
           .attr('opacity', 1)
           .attr('class', 'boxplot')
           .attr('transform', function(d) {
              var _x = x(weekday(d.date)) + elementWidth;
              var _y = 0;
              return translate(_x, _y);
            });

        // low-high line
        gsEnter.append('rect')
            .call(lhrectsCall)
            .attr('class', 'lc-rect')
            .attr('opacity', 0)
            .transition()
            .duration(transitionDuration)
            .attr('opacity', 1)

        // open-close rect
        gsEnter.append('rect')
            .call(ocrectsCall)
            .attr('class', 'oc-rect')
            .attr('opacity', 0)
            .transition()
              .duration(transitionDuration)
              .attr('opacity', 1)
        //
        // update
        //

        gs.transition()
              .duration(transitionDuration)
              .attr('transform', function(d, i) {
                  var _x = x(weekday(d.date));
                  var _y = 0;
                  return translate(_x, _y);
                });

        // low-high lines
        lhrects.transition().duration(transitionDuration).call(lhrectsCall);

        // open-close rects
        ocrects.transition().duration(transitionDuration).call(ocrectsCall);

        //
        // exit
        //

        gs.exit()
           .transition()
           .duration(transitionDuration)
           .attr('opacity', 0)
           .attr('transform', function(d) {
                  var _x = x(weekday(d.date)) - elementWidth;
                  var _y = 0;
                  return translate(_x, _y);
                })
           .remove()
    };

    var start = 0;
    var end = 50;

    function step() {
        if (end >= data.length) {
            end = data.length;
        }

        if (start >= data.length - 50) {
            start = 0;
            end = 50;
        }

        update(svg, data.slice(start++, end++));
    };

    step();

    setInterval(step, transitionDuration * 1.1);


};

var data = [{'date': '2010-03-10','Date': '2010-03-10','Open': ' 16.51','High': ' 16.94','Low': ' 16.51','Close': ' 16.79','Volume': ' 33088600','Adj_Close': ' 16.79'},{'date': '2010-03-09','Date': '2010-03-09','Open': ' 16.41','High': ' 16.72','Low': ' 16.40','Close': ' 16.53','Volume': '20755200','Adj_Close': ' 16.53'},{'date': '2010-03-08','Date': '2010-03-08','Open': ' 16.32','High': ' 16.61','Low': ' 16.30','Close': ' 16.52','Volume': ' 30554000','Adj_Close': ' 16.52'},{'date': '2010-03-05','Date': '2010-03-05','Open': ' 15.89','High': ' 16.38','Low': ' 15.89','Close': ' 16.06','Volume': '21415000','Adj_Close': ' 16.06'},{'date': '2010-03-04','Date': '2010-03-04','Open': ' 15.55','High': ' 15.85','Low': ' 15.52','Close': ' 15.81','Volume': '22906000','Adj_Close': ' 15.81'},{'date': '2010-03-03','Date': '2010-03-03','Open': ' 15.85','High': ' 15.85','Low': ' 15.55','Close': ' 15.57','Volume': '20613800','Adj_Close': ' 15.57'},{'date': '2010-03-02','Date': '2010-03-02','Open': ' 15.87','High': ' 15.96','Low': ' 15.67','Close': ' 15.73','Volume': '20101800','Adj_Close': ' 15.73'},{'date': '2010-03-01','Date': '2010-03-01','Open': ' 15.43','High': ' 15.83','Low': ' 15.40','Close': ' 15.79','Volume': ' 17238000','Adj_Close': ' 15.79'},{'date': '2010-02-26','Date': '2010-02-26','Open': ' 15.27','High': ' 15.41','Low': ' 15.16','Close': ' 15.31','Volume': ' 14975600','Adj_Close': ' 15.31'},{'date': '2010-02-25','Date': '2010-02-25','Open': ' 15.32','High': ' 15.35','Low': ' 15.13','Close': ' 15.24','Volume': '20126900','Adj_Close': ' 15.24'},{'date': '2010-02-24','Date': '2010-02-24','Open': ' 15.48','High': ' 15.71','Low': ' 15.33','Close': ' 15.59','Volume': ' 19284200','Adj_Close': ' 15.59'},{'date': '2010-02-23','Date': '2010-02-23','Open': ' 15.45','High': ' 15.51','Low': ' 15.14','Close': ' 15.38','Volume': ' 18346700','Adj_Close': ' 15.38'},{'date': '2010-02-22','Date': '2010-02-22','Open': ' 15.61','High': ' 15.68','Low': ' 15.44','Close': ' 15.49','Volume': ' 10463500','Adj_Close': ' 15.49'},{'date': '2010-02-19','Date': '2010-02-19','Open': ' 15.49','High': ' 15.71','Low': ' 15.33','Close': ' 15.58','Volume': ' 15407900','Adj_Close': ' 15.58'},{'date': '2010-02-18','Date': '2010-02-18','Open': ' 15.40','High': ' 15.60','Low': ' 15.32','Close': ' 15.54','Volume': ' 13700100','Adj_Close': ' 15.54'},{'date': '2010-02-17','Date': '2010-02-17','Open': ' 15.50','High': ' 15.52','Low': ' 15.32','Close': ' 15.44','Volume': ' 12731900','Adj_Close': ' 15.44'},{'date': '2010-02-16','Date': '2010-02-16','Open': ' 15.23','High': ' 15.48','Low': ' 15.18','Close': ' 15.41','Volume': '21447200','Adj_Close': ' 15.41'},{'date': '2010-02-12','Date': '2010-02-12','Open': ' 15.07','High': ' 15.19','Low': ' 14.85','Close': ' 15.17','Volume': ' 18926400','Adj_Close': ' 15.17'},{'date': '2010-02-11','Date': '2010-02-11','Open': ' 14.87','High': ' 15.25','Low': ' 14.77','Close': ' 15.22','Volume': '24509500','Adj_Close': ' 15.22'},{'date': '2010-02-10','Date': '2010-02-10','Open': ' 15.02','High': ' 15.02','Low': ' 14.48','Close': ' 14.80','Volume': ' 36518100','Adj_Close': ' 14.80'},{'date': '2010-02-09','Date': '2010-02-09','Open': ' 15.20','High': ' 15.24','Low': ' 14.94','Close': ' 15.07','Volume': ' 16716900','Adj_Close': ' 15.07'},{'date': '2010-02-08','Date': '2010-02-08','Open': ' 15.18','High': ' 15.47','Low': ' 14.95','Close': ' 14.99','Volume': ' 19856400','Adj_Close': ' 14.99'},{'date': '2010-02-05','Date': '2010-02-05','Open': ' 15.01','High': ' 15.25','Low': ' 14.92','Close': ' 15.19','Volume': '20713800','Adj_Close': ' 15.19'},{'date': '2010-02-04','Date': '2010-02-04','Open': ' 15.34','High': ' 15.52','Low': ' 14.99','Close': ' 15.01','Volume': '27668100','Adj_Close': ' 15.01'},{'date': '2010-02-03','Date': '2010-02-03','Open': ' 15.12','High': ' 15.60','Low': ' 15.12','Close': ' 15.46','Volume': '24730600','Adj_Close': ' 15.46'},{'date': '2010-02-02','Date': '2010-02-02','Open': ' 15.10','High': ' 15.32','Low': ' 15.03','Close': ' 15.17','Volume': '27555200','Adj_Close': ' 15.17'},{'date': '2010-02-01','Date': '2010-02-01','Open': ' 15.14','High': ' 15.30','Low': ' 14.87','Close': ' 15.05','Volume': '29865700','Adj_Close': ' 15.05'},{'date': '2010-01-29','Date': '2010-01-29','Open': ' 15.51','High': ' 15.67','Low': ' 14.90','Close': ' 15.01','Volume': ' 39664600','Adj_Close': ' 15.01'},{'date': '2010-01-28','Date': '2010-01-28','Open': ' 15.93','High': ' 15.96','Low': ' 15.44','Close': ' 15.44','Volume': ' 30159500','Adj_Close': ' 15.44'},{'date': '2010-01-27','Date': '2010-01-27','Open': ' 16.46','High': ' 16.49','Low': ' 15.77','Close': ' 15.98','Volume': ' 41701000','Adj_Close': ' 15.98'},{'date': '2010-01-26','Date': '2010-01-26','Open': ' 15.82','High': ' 16.17','Low': ' 15.70','Close': ' 15.99','Volume': ' 43979400','Adj_Close': ' 15.99'},{'date': '2010-01-25','Date': '2010-01-25','Open': ' 16.07','High': ' 16.11','Low': ' 15.74','Close': ' 15.86','Volume': ' 19683700','Adj_Close': ' 15.86'},{'date': '2010-01-22','Date': '2010-01-22','Open': ' 16.08','High': ' 16.21','Low': ' 15.81','Close': ' 15.88','Volume': '25132800','Adj_Close': ' 15.88'},{'date': '2010-01-21','Date': '2010-01-21','Open': ' 16.39','High': ' 16.58','Low': ' 16.10','Close': ' 16.20','Volume': '21858400','Adj_Close': ' 16.20'},{'date': '2010-01-20','Date': '2010-01-20','Open': ' 16.65','High': ' 16.68','Low': ' 16.25','Close': ' 16.38','Volume': ' 14419500','Adj_Close': ' 16.38'},{'date': '2010-01-19','Date': '2010-01-19','Open': ' 16.78','High': ' 16.96','Low': ' 16.64','Close': ' 16.75','Volume': ' 15182600','Adj_Close': ' 16.75'},{'date': '2010-01-15','Date': '2010-01-15','Open': ' 17.25','High': ' 17.25','Low': ' 16.75','Close': ' 16.82','Volume': ' 18415000','Adj_Close': ' 16.82'},{'date': '2010-01-14','Date': '2010-01-14','Open': ' 16.81','High': ' 17.23','Low': ' 16.80','Close': ' 17.12','Volume': ' 16715600','Adj_Close': ' 17.12'},{'date': '2010-01-13','Date': '2010-01-13','Open': ' 16.88','High': ' 16.98','Low': ' 16.65','Close': ' 16.90','Volume': ' 16955600','Adj_Close': ' 16.90'},{'date': '2010-01-12','Date': '2010-01-12','Open': ' 16.65','High': ' 16.86','Low': ' 16.60','Close': ' 16.68','Volume': ' 15672400','Adj_Close': ' 16.68'},{'date': '2010-01-11','Date': '2010-01-11','Open': ' 16.77','High': ' 16.83','Low': ' 16.48','Close': ' 16.74','Volume': ' 16181900','Adj_Close': ' 16.74'},{'date': '2010-01-08','Date': '2010-01-08','Open': ' 16.68','High': ' 16.76','Low': ' 16.62','Close': ' 16.70','Volume': ' 15470000','Adj_Close': ' 16.70'},{'date': '2010-01-07','Date': '2010-01-07','Open': ' 16.81','High': ' 16.90','Low': ' 16.57','Close': ' 16.70','Volume': ' 31816300','Adj_Close': ' 16.70'},{'date': '2010-01-06','Date': '2010-01-06','Open': ' 17.17','High': ' 17.30','Low': ' 17.07','Close': ' 17.17','Volume': ' 16422000','Adj_Close': ' 17.17'},{'date': '2010-01-05','Date': '2010-01-05','Open': ' 17.22','High': ' 17.23','Low': ' 17.00','Close': ' 17.23','Volume': ' 11718100','Adj_Close': ' 17.23'},{'date': '2010-01-04','Date': '2010-01-04','Open': ' 16.94','High': ' 17.20','Low': ' 16.88','Close': ' 17.10','Volume': ' 16587400','Adj_Close': ' 17.10'},{'date': '2009-12-31','Date': '2009-12-31','Open': ' 16.92','High': ' 16.96','Low': ' 16.77','Close': ' 16.78','Volume': ' 9515600','Adj_Close': ' 16.78'},{'date': '2009-12-30','Date': '2009-12-30','Open': ' 16.83','High': ' 16.99','Low': ' 16.81','Close': ' 16.98','Volume': ' 8188000','Adj_Close': ' 16.98'},{'date': '2009-12-29','Date': '2009-12-29','Open': ' 16.84','High': ' 16.97','Low': ' 16.68','Close': ' 16.92','Volume': ' 13450200','Adj_Close': ' 16.92'},{'date': '2009-12-28','Date': '2009-12-28','Open': ' 16.74','High': ' 16.94','Low': ' 16.68','Close': ' 16.88','Volume': ' 11504300','Adj_Close': ' 16.88'},{'date': '2009-12-24','Date': '2009-12-24','Open': ' 16.69','High': ' 16.75','Low': ' 16.65','Close': ' 16.72','Volume': ' 4736600','Adj_Close': ' 16.72'},{'date': '2009-12-23','Date': '2009-12-23','Open': ' 16.35','High': ' 16.70','Low': ' 16.00','Close': ' 16.67','Volume': '23584100','Adj_Close': ' 16.67'},{'date': '2009-12-22','Date': '2009-12-22','Open': ' 15.88','High': ' 16.08','Low': ' 15.82','Close': ' 15.98','Volume': ' 10631600','Adj_Close': ' 15.98'},{'date': '2009-12-21','Date': '2009-12-21','Open': ' 16.11','High': ' 16.17','Low': ' 15.85','Close': ' 15.88','Volume': ' 17806100','Adj_Close': ' 15.88'},{'date': '2009-12-18','Date': '2009-12-18','Open': ' 15.94','High': ' 16.14','Low': ' 15.78','Close': ' 16.14','Volume': ' 30021100','Adj_Close': ' 16.14'},{'date': '2009-12-17','Date': '2009-12-17','Open': ' 15.72','High': ' 15.96','Low': ' 15.64','Close': ' 15.82','Volume': '26156700','Adj_Close': ' 15.82'},{'date': '2009-12-16','Date': '2009-12-16','Open': ' 15.57','High': ' 15.82','Low': ' 15.47','Close': ' 15.79','Volume': '20637500','Adj_Close': ' 15.79'},{'date': '2009-12-15','Date': '2009-12-15','Open': ' 15.77','High': ' 15.88','Low': ' 15.65','Close': ' 15.74','Volume': ' 13272900','Adj_Close': ' 15.74'},{'date': '2009-12-14','Date': '2009-12-14','Open': ' 15.90','High': ' 15.97','Low': ' 15.64','Close': ' 15.81','Volume': ' 18086300','Adj_Close': ' 15.81'},{'date': '2009-12-11','Date': '2009-12-11','Open': ' 15.85','High': ' 15.90','Low': ' 15.62','Close': ' 15.74','Volume': '22607500','Adj_Close': ' 15.74'},{'date': '2009-12-10','Date': '2009-12-10','Open': ' 15.34','High': ' 15.57','Low': ' 15.24','Close': ' 15.49','Volume': ' 18743000','Adj_Close': ' 15.49'},{'date': '2009-12-09','Date': '2009-12-09','Open': ' 15.52','High': ' 15.54','Low': ' 15.12','Close': ' 15.18','Volume': '25396900','Adj_Close': ' 15.18'},{'date': '2009-12-08','Date': '2009-12-08','Open': ' 15.45','High': ' 15.90','Low': ' 15.23','Close': ' 15.45','Volume': ' 31160600','Adj_Close': ' 15.45'},{'date': '2009-12-07','Date': '2009-12-07','Open': ' 15.36','High': ' 15.65','Low': ' 15.32','Close': ' 15.45','Volume': ' 18035200','Adj_Close': ' 15.45'},{'date': '2009-12-04','Date': '2009-12-04','Open': ' 15.32','High': ' 15.38','Low': ' 15.00','Close': ' 15.19','Volume': ' 17576000','Adj_Close': ' 15.19'},{'date': '2009-12-03','Date': '2009-12-03','Open': ' 15.33','High': ' 15.38','Low': ' 15.10','Close': ' 15.11','Volume': ' 17196200','Adj_Close': ' 15.11'},{'date': '2009-12-02','Date': '2009-12-02','Open': ' 15.17','High': ' 15.50','Low': ' 15.16','Close': ' 15.31','Volume': ' 17807800','Adj_Close': ' 15.31'},{'date': '2009-12-01','Date': '2009-12-01','Open': ' 15.03','High': ' 15.19','Low': ' 14.85','Close': ' 15.13','Volume': ' 17096500','Adj_Close': ' 15.13'},{'date': '2009-11-30','Date': '2009-11-30','Open': ' 14.90','High': ' 15.10','Low': ' 14.80','Close': ' 14.97','Volume': ' 17587000','Adj_Close': ' 14.97'},{'date': '2009-11-27','Date': '2009-11-27','Open': ' 15.04','High': ' 15.09','Low': ' 14.88','Close': ' 15.00','Volume': ' 11452900','Adj_Close': ' 15.00'},{'date': '2009-11-25','Date': '2009-11-25','Open': ' 15.29','High': ' 15.35','Low': ' 15.17','Close': ' 15.30','Volume': '21370600','Adj_Close': ' 15.30'},{'date': '2009-11-24','Date': '2009-11-24','Open': ' 15.38','High': ' 15.49','Low': ' 15.20','Close': ' 15.24','Volume': ' 19774000','Adj_Close': ' 15.24'},{'date': '2009-11-23','Date': '2009-11-23','Open': ' 15.58','High': ' 15.65','Low': ' 15.34','Close': ' 15.45','Volume': '24501400','Adj_Close': ' 15.45'},{'date': '2009-11-20','Date': '2009-11-20','Open': ' 15.60','High': ' 15.74','Low': ' 15.36','Close': ' 15.38','Volume': ' 16127300','Adj_Close': ' 15.38'},{'date': '2009-11-19','Date': '2009-11-19','Open': ' 15.83','High': ' 15.85','Low': ' 15.52','Close': ' 15.61','Volume': '26891000','Adj_Close': ' 15.61'},{'date': '2009-11-18','Date': '2009-11-18','Open': ' 16.02','High': ' 16.13','Low': ' 15.84','Close': ' 15.98','Volume': ' 12775400','Adj_Close': ' 15.98'},{'date': '2009-11-17','Date': '2009-11-17','Open': ' 15.89','High': ' 16.11','Low': ' 15.73','Close': ' 16.05','Volume': '22249500','Adj_Close': ' 16.05'},{'date': '2009-11-16','Date': '2009-11-16','Open': ' 16.08','High': ' 16.19','Low': ' 15.92','Close': ' 16.07','Volume': '26125200','Adj_Close': ' 16.07'},{'date': '2009-11-13','Date': '2009-11-13','Open': ' 16.04','High': ' 16.10','Low': ' 15.92','Close': ' 15.93','Volume': '26453800','Adj_Close': ' 15.93'},{'date': '2009-11-12','Date': '2009-11-12','Open': ' 16.10','High': ' 16.28','Low': ' 15.97','Close': ' 16.00','Volume': ' 10210100','Adj_Close': ' 16.00'},{'date': '2009-11-11','Date': '2009-11-11','Open': ' 16.00','High': ' 16.16','Low': ' 15.92','Close': ' 16.09','Volume': ' 16346100','Adj_Close': ' 16.09'},{'date': '2009-11-10','Date': '2009-11-10','Open': ' 16.08','High': ' 16.36','Low': ' 16.01','Close': ' 16.04','Volume': '24097400','Adj_Close': ' 16.04'},{'date': '2009-11-09','Date': '2009-11-09','Open': ' 16.13','High': ' 16.19','Low': ' 15.97','Close': ' 16.02','Volume': ' 14831900','Adj_Close': ' 16.02'},{'date': '2009-11-06','Date': '2009-11-06','Open': ' 15.89','High': ' 16.03','Low': ' 15.76','Close': ' 15.94','Volume': ' 13562500','Adj_Close': ' 15.94'},{'date': '2009-11-05','Date': '2009-11-05','Open': ' 15.80','High': ' 16.00','Low': ' 15.74','Close': ' 15.90','Volume': '27732500','Adj_Close': ' 15.90'},{'date': '2009-11-04','Date': '2009-11-04','Open': ' 15.90','High': ' 15.90','Low': ' 15.66','Close': ' 15.69','Volume': ' 18697100','Adj_Close': ' 15.69'},{'date': '2009-11-03','Date': '2009-11-03','Open': ' 15.71','High': ' 15.79','Low': ' 15.63','Close': ' 15.70','Volume': ' 17240200','Adj_Close': ' 15.70'},{'date': '2009-11-02','Date': '2009-11-02','Open': ' 15.75','High': ' 15.90','Low': ' 15.59','Close': ' 15.85','Volume': ' 15258200','Adj_Close': ' 15.85'},{'date': '2009-10-30','Date': '2009-10-30','Open': ' 16.06','High': ' 16.37','Low': ' 15.80','Close': ' 15.90','Volume': '22321700','Adj_Close': ' 15.90'},{'date': '2009-10-29','Date': '2009-10-29','Open': ' 16.19','High': ' 16.38','Low': ' 15.74','Close': ' 16.13','Volume': ' 39146700','Adj_Close': ' 16.13'},{'date': '2009-10-28','Date': '2009-10-28','Open': ' 16.69','High': ' 16.77','Low': ' 16.02','Close': ' 16.04','Volume': '25044800','Adj_Close': ' 16.04'},{'date': '2009-10-27','Date': '2009-10-27','Open': ' 16.69','High': ' 16.87','Low': ' 16.35','Close': ' 16.69','Volume': ' 19917800','Adj_Close': ' 16.69'},{'date': '2009-10-26','Date': '2009-10-26','Open': ' 17.05','High': ' 17.20','Low': ' 16.67','Close': ' 16.87','Volume': '21213100','Adj_Close': ' 16.87'},{'date': '2009-10-23','Date': '2009-10-23','Open': ' 17.71','High': ' 17.75','Low': ' 17.09','Close': ' 17.22','Volume': ' 17760400','Adj_Close': ' 17.22'},{'date': '2009-10-22','Date': '2009-10-22','Open': ' 17.54','High': ' 17.75','Low': ' 17.30','Close': ' 17.67','Volume': ' 16018100','Adj_Close': ' 17.67'},{'date': '2009-10-21','Date': '2009-10-21','Open': ' 17.98','High': ' 18.02','Low': ' 17.57','Close': ' 17.66','Volume': ' 46204500','Adj_Close': ' 17.66'},{'date': '2009-10-20','Date': '2009-10-20','Open': ' 17.37','High': ' 17.41','Low': ' 16.87','Close': ' 17.17','Volume': ' 38320400','Adj_Close': ' 17.17'},{'date': '2009-10-19','Date': '2009-10-19','Open': ' 16.80','High': ' 17.29','Low': ' 16.70','Close': ' 17.22','Volume': ' 17878000','Adj_Close': ' 17.22'},{'date': '2009-10-16','Date': '2009-10-16','Open': ' 16.61','High': ' 16.85','Low': ' 16.40','Close': ' 16.81','Volume': '20479000','Adj_Close': ' 16.81'},{'date': '2009-10-15','Date': '2009-10-15','Open': ' 16.84','High': ' 16.89','Low': ' 16.46','Close': ' 16.52','Volume': '24337300','Adj_Close': ' 16.52'},{'date': '2009-10-14','Date': '2009-10-14','Open': ' 16.93','High': ' 17.03','Low': ' 16.82','Close': ' 16.95','Volume': ' 17508000','Adj_Close': ' 16.95'},{'date': '2009-10-13','Date': '2009-10-13','Open': ' 16.95','High': ' 17.00','Low': ' 16.81','Close': ' 16.88','Volume': ' 19492500','Adj_Close': ' 16.88'},{'date': '2009-10-12','Date': '2009-10-12','Open': ' 16.96','High': ' 17.11','Low': ' 16.66','Close': ' 16.75','Volume': ' 16904700','Adj_Close': ' 16.75'},{'date': '2009-10-09','Date': '2009-10-09','Open': ' 17.43','High': ' 17.48','Low': ' 16.84','Close': ' 16.87','Volume': '29015700','Adj_Close': ' 16.87'},{'date': '2009-10-08','Date': '2009-10-08','Open': ' 17.63','High': ' 17.86','Low': ' 17.54','Close': ' 17.58','Volume': '27966900','Adj_Close': ' 17.58'},{'date': '2009-10-07','Date': '2009-10-07','Open': ' 17.22','High': ' 17.49','Low': ' 17.15','Close': ' 17.49','Volume': ' 12456700','Adj_Close': ' 17.49'},{'date': '2009-10-06','Date': '2009-10-06','Open': ' 16.96','High': ' 17.35','Low': ' 16.95','Close': ' 17.30','Volume': '21427600','Adj_Close': ' 17.30'},{'date': '2009-10-05','Date': '2009-10-05','Open': ' 16.85','High': ' 17.13','Low': ' 16.66','Close': ' 16.80','Volume': '22224900','Adj_Close': ' 16.80'},{'date': '2009-10-02','Date': '2009-10-02','Open': ' 17.23','High': ' 17.35','Low': ' 16.78','Close': ' 16.84','Volume': ' 32685300','Adj_Close': ' 16.84'},{'date': '2009-10-01','Date': '2009-10-01','Open': ' 17.65','High': ' 17.72','Low': ' 17.20','Close': ' 17.39','Volume': '24871600','Adj_Close': ' 17.39'},{'date': '2009-09-30','Date': '2009-09-30','Open': ' 17.48','High': ' 17.94','Low': ' 17.24','Close': ' 17.81','Volume': ' 39878200','Adj_Close': ' 17.81'},{'date': '2009-09-29','Date': '2009-09-29','Open': ' 17.50','High': ' 17.66','Low': ' 17.21','Close': ' 17.45','Volume': ' 31600100','Adj_Close': ' 17.45'},{'date': '2009-09-28','Date': '2009-09-28','Open': ' 16.98','High': ' 17.47','Low': ' 16.95','Close': ' 17.47','Volume': '26412200','Adj_Close': ' 17.47'},{'date': '2009-09-25','Date': '2009-09-25','Open': ' 16.80','High': ' 17.15','Low': ' 16.75','Close': ' 17.08','Volume': '20701400','Adj_Close': ' 17.08'},{'date': '2009-09-24','Date': '2009-09-24','Open': ' 17.31','High': ' 17.32','Low': ' 16.65','Close': ' 16.89','Volume': '26493700','Adj_Close': ' 16.89'},{'date': '2009-09-23','Date': '2009-09-23','Open': ' 17.10','High': ' 17.60','Low': ' 16.97','Close': ' 17.21','Volume': ' 36814300','Adj_Close': ' 17.21'},{'date': '2009-09-22','Date': '2009-09-22','Open': ' 17.17','High': ' 17.22','Low': ' 16.75','Close': ' 16.86','Volume': ' 30588800','Adj_Close': ' 16.86'},{'date': '2009-09-21','Date': '2009-09-21','Open': ' 17.23','High': ' 17.23','Low': ' 16.96','Close': ' 17.04','Volume': '26826900','Adj_Close': ' 17.04'},{'date': '2009-09-18','Date': '2009-09-18','Open': ' 17.70','High': ' 17.70','Low': ' 16.85','Close': ' 17.39','Volume': ' 86402600','Adj_Close': ' 17.39'},{'date': '2009-09-17','Date': '2009-09-17','Open': ' 17.00','High': ' 17.79','Low': ' 16.96','Close': ' 17.50','Volume': ' 62010000','Adj_Close': ' 17.50'},{'date': '2009-09-16','Date': '2009-09-16','Open': ' 16.57','High': ' 17.11','Low': ' 16.52','Close': ' 16.99','Volume': ' 53594700','Adj_Close': ' 16.99'},{'date': '2009-09-15','Date': '2009-09-15','Open': ' 16.01','High': ' 16.49','Low': ' 15.87','Close': ' 16.41','Volume': ' 64668200','Adj_Close': ' 16.41'},{'date': '2009-09-14','Date': '2009-09-14','Open': ' 15.45','High': ' 15.58','Low': ' 15.28','Close': ' 15.57','Volume': ' 19451200','Adj_Close': ' 15.57'}].reverse();

data = data.map(function(d) {
  return {
    date: new Date(d.date),
    open: Number(d.Open),
    close: Number(d.Close),
    volume: Number(d.Volume),
    adj_close: Number(d.Adj_Close),
    high: Number(d.High),
    low: Number(d.Low)
  };
});

call('#chart', data);

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png