Old school D3 from simpler times

All examples By author By category About

Stroked

Full window Github gist

Trendline with react-stockcharts

TEST

forked from rrag's block: Trendline with react-stockcharts

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React Stockcharts - CandleStickChartWithInteractiveIndicator Example</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>

<script type="text/javascript" src="https://bundle.run/react-stockcharts@0.7.8">
  </head>
  <body>
    <span id="iconPreload" class="glyphicon glyphicon-arrow-down"></span>
    <div id="chart">
    </div>
    <script>
      // Use babel transform so the examples work on the browser
      d3.request("./CandleStickChartWithInteractiveIndicator.jsx")
        .get(function(err, data) {
          var outputEl = document.getElementById('chart');
          try {
            var output = Babel.transform(data.responseText, { presets: ["es2015", "react", "stage-3"] }).code;
            eval(output);
          } catch (ex) {
            outputEl.innerHTML = 'ERROR: ' + ex.message;
          }
        })
    </script>
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React Stockcharts - CandleStickChartWithInteractiveIndicator Example</title>
​
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>
​
    <!-- <script type="text/javascript" src="//unpkg.com/react-stockcharts@latest/dist/react-stockcharts.min.js"></script> -->
  <script type="text/javascript" src="https://bundle.run/react-stockcharts@0.7.8">
  </head>
  <body>
    <span id="iconPreload" class="glyphicon glyphicon-arrow-down"></span>
    <div id="chart">
    </div>
    <script>
      // Use babel transform so the examples work on the browser
      d3.request("./CandleStickChartWithInteractiveIndicator.jsx")
        .get(function(err, data) {
          var outputEl = document.getElementById('chart');
          try {
            var output = Babel.transform(data.responseText, { presets: ["es2015", "react", "stage-3"] }).code;
            eval(output);
          } catch (ex) {
            outputEl.innerHTML = 'ERROR: ' + ex.message;
          }
        })
    </script>
  </body>
</html>
​
    

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js

https://unpkg.com/react-stockcharts@latest/dist/react-stockcharts.min.js

https://bundle.run/react-stockcharts@0.7.8