examples/CandleStickChartExample.html

<!DOCTYPE html>
<html>

  <head>
    <title>d3-ez : Candlestick Chart Example</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="../dist/d3-ez.js"></script>
    <link rel="stylesheet" type="text/css" href="../dist/d3-ez.css" />
  </head>

  <body>
    <div id="chartholder"></div>
    <br />
    <div>Value: <span id="message"></span></div>

    <script type="text/javascript">
      d3.json("data/bitcoin_price.json").then(function(data) {
        // Bitcoin Price Data Source: https://coinmarketcap.com/currencies/bitcoin/historical-data/?start=20180204&end=20180306

        // TODO: Convert data to multi-series.
        data = [data];

        // Create chart base
        var myChart =  d3.ez.chart.candlestickChart()
          .width(1000)
          .height(600)
          .title("Bitcoin Price")
          .subTitle("February - March 2018")
          .showLegend(true)
          .on("customValueMouseOver", function(e, d) {
            d3.select("#message").text(d.open);
          })
          .on("customSeriesClick", function(e, d) {
            console.log(d);
          });

        d3.select('#chartholder')
          .datum(data)
          .call(myChart);

      });
    </script>
  </body>

</html>