klicky/map.html at main · gschultz49/klicky · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
  <head>
    <title>Heat Map</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-heatmap.min.js"></script>
  </head>

  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // create data
        let data = [
          { x: "Left Sidebar", y: "1", heat: 20},
          { x: "LinkedIn Feed (Left)", y: "1", heat: 17 },
          { x: "LinkedIn Feed (Right)", y: "1", heat: 21 },
          { x: "Right Sidebar", y: "1", heat: 34 },
          { x: "Left Sidebar", y: "2", heat: 33 },
          { x: "LinkedIn Feed (Left)", y: "2", heat: 32 },
          { x: "LinkedIn Feed (Right)", y: "2", heat: 51 },
          { x: "Right Sidebar", y: "2", heat: 50 },
          { x: "Left Sidebar", y: "3", heat: 47 },
          { x: "LinkedIn Feed (Left)", y: "3", heat: 34 },
          { x: "LinkedIn Feed (Right)", y: "3", heat: 60 },
          { x: "Right Sidebar", y: "3", heat: 12 },
        ];
        // create a chart and set the data
        let chart = anychart.heatMap(data);

        // set the chart title
        chart.title(
"This heat map shows which parts of the page have been clicked on most (The numbers represent the # of clicks)"
        );


        // set the container id
        chart.container("container");

        // initiate drawing the chart
        chart.draw();

      });
    </script>
    <script src="./src/index.js"></script>
      <img src="legend.jpg">
  </body>
</html>