fishautumn.github.io/chart-tool.html at master · fishautumn/fishautumn.github.io · 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function parseData() {
  const txt = document.getElementById('myData').value;
  const splitter = new RegExp(document.getElementById('splitterEdit').value);
  const lines = txt.split(/[\r\n]+/);
  if (lines.length == 0) {
    return null;
  }
  const init = lines[0].replace(/^# */, "").trim();
  const keys = init.split(splitter);
  var data = [];
  for (var i = 1; i < lines.length; ++i) {
    const line = lines[i].replace(/^# */, "").trim();
    if (line.length > 0) {
      const cols = line.split(splitter);
      var obj = {'row#':i.toString()};
      data.push(obj);
      for (var j = 0; j< cols.length; ++j) {
        obj[keys[j]] = cols[j];
      }
    }
  }
  return data;
}
function loadKeys() {
  const txt = document.getElementById('myData').value;
  const splitter = new RegExp(document.getElementById('splitterEdit').value);
  const lines = txt.split(/[\r\n]+/);
  if (lines.length == 0) {
    return null;
  }
  const init = lines[0].replace(/^# */, '').trim();
  const keys = init.split(splitter);
  const xkeySel = document.getElementById('xkey');
  const ykeySel = document.getElementById('ykey');
  xkeySel.innerHTML = '<option>row#</option>';
  for (const k of keys) {
    if (k.trim().length > 0) {
      xkeySel.innerHTML += '<option>' + k.trim() + '</option>';
      ykeySel.innerHTML += '<option>' + k.trim() + '</option>';
    }
  }
}

var chart = null;

function render() {
  const container = document.getElementById('container');
  container.style = 'width:' + document.getElementById('widthEdit').value + 'px;height:' + document.getElementById('heightEdit').value + 'px';
  const ctx = document.getElementById('myChart');
  const type = document.getElementById('chart-type').value;
  const data = parseData();
  const xkey = document.getElementById('xkey').value;
  const ykey = document.getElementById('ykey').value;
  const cfg = {
    type: type,
    data: {
      labels: data.map(o => o[xkey]),
      datasets: [{data: data}]
    },
    options: {
      parsing: {
        xAxisKey: xkey,
        key: xkey,
        yAxisKey: ykey
      }
    }
  };
  if (chart) {
    chart.clear();
    chart.destroy();
  }
  chart = new Chart(ctx, cfg);
}
</script>
</head>
<body>
<label>Data (csv/tsv):</label><br/>
<textarea id="myData" cols="80" rows="20" onchange="loadKeys()">
</textarea><br/><br/>

<label>column splitter: </label><input type="text" id="splitterEdit" value="[\s,]+"/><br/><br/>

canvas <label>width: </label><input type="text" id="widthEdit" value="800" size="5"/><label>px</label>;
<label>height: </label><input type="text" id="heightEdit" value="400" size="5"/><label>px</label><br/><br/>
<label>chart type: </label>
<select id="chart-type">
    <option>line</option>
    <option>bar</option>
    <option>pie</option>
    <option>scatter</option>
    <option>doughnut</option>
    <option>radar</option>
    <option>polarArea</option>
</select>;
<label>X Axis: </label><select id="xkey"></select>;
<label>Y Axis: </label><select id="ykey"></select>
<button onclick="render()">render</button>
<div id="container" style="width:800px; height:800px">
    <canvas id="myChart"></canvas>
</div>
</body>
</html>