MyFiles/chart_with_CDN.html at main · jaredgibb/MyFiles · 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
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js"
    type="text/javascript"></script>
  <link href="https://cdn.jsdelivr.net/npm/c3@0.7.15/c3.css" rel="stylesheet">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/c3@0.7.15/c3.min.js"></script>

</head>

<body>

    <div id="chart"></div>
    <script>
var chart = c3.generate({
      bindto: '#chart',
      data: {
        x: 'x',
        columns: [
          ['x'],
          ['data1']
        ]
      },
      axis: {
        x: {
          type: 'categories'
        },
        y:{
            min:0,
            max:100,
            padding: 0
        }
      },
    });

ThunkableWebviewerExtension.receiveMessage(function(message) {
		  let thunkData = JSON.parse(message);
            let xValues = thunkData.xValues;
            let yValues = thunkData.yValues;
            let titleName = thunkData.title;

		setTimeout(function () {
          	chart.load({
           	 columns: [
           	   ['x'].concat(xValues),
           	   ['data1'].concat(yValues),
           	 ],
          	  names: {
           	   data1: titleName
          	  }
        	  })
		}, 500);
});
    </script>
</body>

</html>