Plot.ly Demo

Me

HTML

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

<div id="myDiv"></div>
<hr>
<div id="graph"></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 = [];
var xValuesOne = [];
var xValuesTwo = [];
var yValues = [];
var zValuesOne = [];
var zValuesTwo = [];
var count = 0;
var annotations = []
var nc = -1


var layout = {
  title: 'Sessions',
  annotations: [],
  xaxis: {
    ticks: '',
    side: 'bottom',
    tickvals: [0, 1],
    ticktext: ['Page Views/Sessions', 'Avg Time on Site']
  },
  yaxis: {
    ticks: '',
    ticksuffix: ' ',
    width: 700,
    height: 700,
    autosize: false
  }
};

var countx = 0;
channels.forEach(function(i) {

  xValuesOne.push('Page Views/Sessions')
  xValuesTwo.push('Avg. Time on Site')
  yValues.push(i.channel)
  options.push(i.channel)
  zValuesOne.push(parseInt(i.pageviews / i.sessions))
  zValuesTwo.push(parseInt(i.avg_time))
  var cat = ['Page Views/Sessions', 'Avg. Time on Site'];
  nc++;
  for (var x = 0; x < cat.length; x++) {
    catVar = cat[x]
    smt = i.channel
    if (x == 0) {
      txt = zValuesOne[nc]
    } else {
      txt = zValuesTwo[nc]
    }

    var result = {
      xref: 'x1',
      yref: 'y1',
      x: x,
      y: i.channel,
      text: txt,
      font: {
        family: 'Arial',
        size: 12,
        color: 'rgb(50, 171, 96)'
      },
      showarrow: false,
      //   font: {
      //     color: textColor
      //   }
    };
    
    layout.annotations.push(result);
  }

})

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


var data = [{
  type: 'heatmap',
  x: [0],
  y:...