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'
  },
  yaxis: {
    ticks: '',
    ticksuffix: ' ',
    width: 700,
    height: 700,
    autosize: false
  }
};


channels.forEach(function(i) {
  xValuesOne.push(1)
  xValuesTwo.push(2)
  yValues.push(count++)
  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++) {
  	console.log(cat[x])
    catVar = cat[x]
    console.log(i.channel)
//    console.log(zValuesOne)
//    console.log(zValuesTwo)
    smt = i.channel
    if (x == 0) { 
    	console.log(zValuesOne[nc])
      txt = zValuesOne[nc]
     } else {
     	console.log(zValuesTwo[nc])
      txt = zValuesTwo[nc]
     }
    
    var result = {
      xref: 'x1',
      yref: 'y1',
      x: catVar,
      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 data = [{
  type: 'heatmap',
  x: xValuesOne,
  y:...