Plotly

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<h1>
Hello
</h1>

<div id="myDiv"></div>

JavaScript

var channels = [{
  "channel": "(Other)",
  "pageviews": 1388082,
  "sessions": 314263,
  "avg_time": 54.94890183937861
}, {
  "channel": "Referral",
  "pageviews": 364869,
  "sessions": 50387,
  "avg_time": 58.104753437736335
}, {
  "channel": "Direct",
  "pageviews": 92538,
  "sessions": 22118,
  "avg_time": 59.21658970091479
}, {
  "channel": "Organic Search",
  "pageviews": 23470,
  "sessions": 4246,
  "avg_time": 51.96215449005384
}, {
  "channel": "Social",
  "pageviews": 8317,
  "sessions": 1931,
  "avg_time": 58.63430399702078
}]

var options = [];
var table_data = [];

channels.forEach(function(i) {
  options.push(i.channel)
  var tmp = [];
  tmp.push(parseFloat(i.pageviews / i.sessions).toFixed(2))
  tmp.push(parseFloat(i.avg_time).toFixed(2))
    // var avgTime = parseFloat(parseFloat(i.avg_time).toFixed(2))
  table_data.push(tmp)
})
console.log(this.options)
  //console.log(this.table_data.toFixed(2))

//////  PLOTLY

var xValues = ['Page Views/Sessions', 'Avg. Time on Site'];

var yValues = this.options;
var zValues = this.table_data;

var colorscaleValue = [
  [0, '#3D9970'],
  [0.5, '#eded2a'],
  [1, '#001f3f'],
  //  [0,'#FF0000']
];

var data = [{
  x: xValues,
  y: yValues,
  z: zValues,
  type: 'heatmap',
  colorscale: colorscaleValue,
  showscale: false
}];

var layout = {
  title: 'Sessions',
  annotations: [],
  xaxis: {
    ticks: '',
    side: 'bottom'
  },
  yaxis: {
    ticks: '',
    ticksuffix: ' ',
    width: 700,
    height: 700,
    autosize: false
  }
};

for (var i = 0; i < yValues.length; i++) {
  //	console.log(i)
  for (var j = 0; j < xValues.length; j++) {
    var currentValue = zValues[i][j];
    //    console.log('cv is '+currentValue)
    if (currentValue != 0.0) {
      var textColor = 'white';
    } else {
      var textColor = 'black';
    }
    console.log('XXXX')
    console.log(xValues[j])
    console.log(yValues[i])
    console.log(zValues[i][j])
    var result = {
      xref: 'x1',
      yref: 'y1',
      x:...