C3JS Chart and HandsOn Table

by Matt Webster

HTML

<script src="https://code.angularjs.org/1.6.2/angular.min.js"></script>
<script src="https://docs.handsontable.com/0.31.0/bower_components/handsontable/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/0.31.0/bower_components/handsontable/dist/handsontable.full.min.css">
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div ng-app="App">
  <div ng-controller="TodoCtrl">
    <div id="tablecontainer">
      <table class="tgh">
        <tr>
          <td>Auxilliary Power</td>
        </tr>
      </table>
      <div id="example"></div>
      <table class="tg">
        <tr>
          <td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td>
        </tr>
      </table>
    </div>
    <div id="c3chart"></div>
  </div>
</div>

CSS

body {
  font: 12px Arial;
}

#tablecontainer {
  float: right;
}

#c3chart {
  width: 65%;
}

path {
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}

.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 80px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0px;
  padding: 0px;
}

.tg tr:first-child {
  width: 144px;
}

.tg td {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-spacing: 0px;
  overflow: hidden;
  word-break: normal;
  background-color: #EEE;
  border-color: #DDD;
  border-top: none !important;
  text-align: right;
  vertical-align: top;
  margin: 0px 0px 0px 0px;
}

.tg .tg-yw4l {
  width: 70px;
  padding: 4px 4px 4px 0px;
}

.tg :first-child {
  width: 144px;
}

.tg .tg-yw4g {
  width: 49px;
  padding: 4px 0px 4px 0px;
  border-width: 0px 0px 1px 1px;
}

.tg .tg-yw4g + td {
  width: 144px;
}

.tgh {
  border-style: solid;
  border-width: 1px 1px 0px 1px;
  border-spacing: 0px;
  overflow: hidden;
  word-break: normal;
  background-color: #EEE;
  border-color: #DDD;
  text-align: center;
  vertical-align: top;
  margin: 0px 0px 0px 0px;
  width: 300px;
  padding: 4px 4px 4px 4px;
}

JavaScript

angular.module('App', []).controller("TodoCtrl", ['$scope', function($scope) {

  // CHART

  var parseDate = d3.time.format("%d/%m/%Y %H:%M").parse;
  var formatTime = d3.time.format("%e %B");

  var financeData = [
    ["21/02/2017 01:30", 10.5],
    ["21/02/2017 01:35", 11.5],
    ["21/02/2017 01:40", 12.25],
    ["21/02/2017 01:45", 8.5],
    ["21/02/2017 01:50", 7.5],
    ["21/02/2017 01:55", 15.5],
    ["21/02/2017 02:00", 20.5],
    ["21/02/2017 02:05", 21.5],
    ["21/02/2017 02:10", 22.5],
    ["21/02/2017 02:15", 24.5],
    ["21/02/2017 02:20", 23.5],
    ["21/02/2017 02:25", 23.5],
    ["21/02/2017 02:30", 19.5],
    ["21/02/2017 02:35", 18.5],
    ["21/02/2017 02:40", 15.5],
  ];

  // duplicate value column for the 'originals' column
  financeData.forEach(function(d) {
    d[2] = d[1];
  });

  var data = [];

  financeData.forEach(function(d) {
    data.push({
      date: parseDate(d[0]),
      close: d[1]
    });
  });

  var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
  };
  var width = 600 - margin.left - margin.right;
  var height = 270 - margin.top - margin.bottom;
  /*
    var x = d3.time.scale().range([0, width]);
    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);

    var valueline = d3.svg.line()
      .x(function(d) {
        return x(d.date);
      })
      .y(function(d) {
        return y(d.close);
      });

  	// Define the div for the tooltip
  	var div = d3.select("#d3chart").append("div")	
      .attr("class", "tooltip")				
      .style("opacity", 0);

    var svg = d3
      .select("#d3chart")
      .append("svg")
      //.attr("width", width + margin.left + margin.right)
      //.attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Scale the range of the data
   ...