KendoUI Hazard Grid and Chart no splitter

by Sezer Ekinci

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.bootstrap.min.css">
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.timezones.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<br />
<div class="demo-section k-content">
  <div id="splitter" style="height: 365px">
    <div id="left-pane">
      <div id="grid" class="hazardGrid"></div>
    </div>
    <div id="right-pane">
      <div id="chart"></div>
    </div>
  </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900);
html,
body {
  font-family: Roboto, Arial;
}

.hazardSummaryTbl {
  width: 100%;
  border-spacing: 0px;
  border-collapse: separate;
  font-size: 10px;
  font-family: Roboto, Verdana, Helvetica, sans-serif;
}

.hazardSummaryTbl td {
  text-align: center;
  color: #555;
  border-right: 1px solid rgba(50, 50, 50, 0.3);
  border-top: 1px solid rgba(50, 50, 50, 0.3);
}

.hazardSummaryTbl .consA {
  background-color: rgba(255, 0, 0, 0.45);
  width: 20%;
}

.hazardSummaryTbl .consA.sel {
  background-color: rgba(255, 0, 0, 1);
}

.hazardSummaryTbl .consB {
  background-color: rgba(255, 255, 153, 0.45);
  width: 20%;
}

.hazardSummaryTbl .consB.sel {
  background-color: rgba(255, 255, 153, 1);
}

.hazardSummaryTbl .consD {
  background-color: rgba(204, 255, 204, 0.45);
  width: 20%;
}

.hazardSummaryTbl .consD.sel {
  background-color: rgba(204, 255, 204, 1);
}

.hazardSummaryTbl .consC {
  background-color: rgba(153, 204, 255, 0.45);
  width: 20%;
}

.hazardSummaryTbl .consC.sel {
  background-color: rgba(153, 204, 255, 1);
}

.hazardSummaryTbl .sel {
  border: 3px solid #595959;
  color: #000;
}

.pasGridCellCenter {
  text-align: center;
}

.pasGridCellBool i {
  opacity: 0.65;
}

.k-grid-content tr.k-state-selected {
  color: black;
  font-weight: bold;
  background-color: rgba(60, 152, 171, 0.15);
}

.hazardGrid {
  font-size: 12px;
}

.hazardGrid td {
  line-height: 19.44px;
}

.hazardGrid td.k-detail-cell {
  padding: 0px 0px 0px 0px;
}

.hazardGrid .k-detail-cell .k-grid {
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
}

JavaScript

var thedata = [{
    Hazard: "H01-34",
    Current: "A",
    Unmitigated: "C",
    Target: "D",
    Credits: 8,
    Unavailable: 1,
    ChartData: [{
      label: "Target",
      xvalue: 3.8,
      yvalue: 4,
      tooltip: "Level 4 - Target = 10e-7"
    }, {
      label: "Current",
      xvalue: 3.8,
      yvalue: 6,
      tooltip: "Level 4 - Target = 10e-5"
    }, {
      label: "Unmitigated",
      xvalue: 3.8,
      yvalue: 10,
      tooltip: "Level 4 - Target = 10e-1"
    }, ],
    IPLs: [{
      Name: "PSV1",
      Available: 0,
      OOS: 0,
      PastDue: 1,
      Credits: 2
    }, {
      Name: "Alarm2",
      Available: 1,
      OOS: 0,
      PastDue: 0,
      Credits: 1
    }, {
      Name: "Interlock3",
      Available: 0,
      OOS: 1,
      PastDue: 0,
      Credits: 2
    }, ]
  }, {
    Hazard: "H04-43",
    Current: "A",
    Unmitigated: "C",
    Target: "D",
    Credits: 7,
    Unavailable: 1,
    ChartData: [{
      label: "Target",
      xvalue: 2.2,
      yvalue: 4,
      tooltip: "Level 2 - Target = 10e-7"
    }, {
      label: "Current",
      xvalue: 2.2,
      yvalue: 6,
      tooltip: "Level 2 - Target = 10e-5"
    }, {
      label: "Unmitigated",
      xvalue: 2.2,
      yvalue: 10,
      tooltip: "Level 2 - Target = 10e-1"
    }, ],
    IPLs: [{
      Name: "PSV1",
      Available: 0,
      OOS: 0,
      PastDue: 1,
      Credits: 2
    }, {
      Name: "Alarm2",
      Available: 1,
      OOS: 0,
      PastDue: 0,
      Credits: 1
    }, {
      Name: "Interlock3",
      Available: 0,
      OOS: 1,
      PastDue: 0,
      Credits: 2
    }, ]
  }, {
    Hazard: "H02-12",
    Current: "A",
    Unmitigated: "C",
    Target: "D",
    Credits: 10,
    Unavailable: 1,
    ChartData: [{
      label: "Target",
      xvalue: 4.8,
      yvalue: 4,
      tooltip: "Level 5 - Target = 10e-7"
    }, {
      label: "Current",
      xvalue: 4.8,
      yvalue: 6,
      tooltip: "Level 5 - Target = 10e-5"
    }, {
      label: "Unmitigated",
     ...