test-scatterplot.html 1.52 KB
Newer Older
Sascha Herzinger's avatar
Sascha Herzinger committed
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scatterplot</title>
    <script src="http://localhost:8080/ada-charts.js"></script>
</head>
<body>
    <div id="scatterplot-controls">
        <span>API examples:</span>
        <button onclick="update()">update()</button>
        <button onclick="toPNG()">toPNG()</button>
    </div>
    <div id="scatterplot-container"></div>
</body>
</html>

<script>

  /**
   * Helper function. Do not copy
   */

  function generateRandomData(numOfPoints, minValue, maxValue) {
    const values = [];
    for (let i = 0; i < numOfPoints; i++) {
      const x = Math.random() * (maxValue - minValue + 1) + minValue;
      const y = Math.random() * (maxValue - minValue + 1) + minValue;
      const z = Math.random() * (maxValue - minValue + 1) + minValue;
      values.push({ x, y, z });
    }
    return values;
  }

  /**
   * API Documentation below this point
   */
  const container = document.querySelector('#scatterplot-container');
  const scatterplot = AdaCharts.chart({ chartType: 'scatterplot', container });

  function update() {
    scatterplot.update({
      values: generateRandomData(5000, -100, 100),
    });
  }

  function toPNG() {
    scatterplot.toPNG();
  }

  document.addEventListener('DOMContentLoaded', update, false);
</script>

<style>
    body {
        display: flex;
        flex-direction: row;
    }

    #scatterplot-controls {
        display: flex;
        flex-direction: column;
    }

    #scatterplot-container {
        width: 50vw;
    }
</style>