-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchart.html
81 lines (77 loc) · 1.94 KB
/
chart.html
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
<!doctype html>
<html>
<head>
<title>A Chart of some Stylometric Calculations on NNGM books</title>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'A PCA scatter plot of stylometric data on NNGM books'
},
subtitle: {
text: 'Run "{{{kw}}}", based on top {{{size}}} keywords'
},
xAxis: {
title: {
enabled: true,
text: 'PCA1'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'PCA2'
}
},
// legend: {
// layout: 'vertical',
// align: 'left',
// verticalAlign: 'top',
// x: 100,
// y: 70,
// floating: true,
// backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
// borderWidth: 1
// },
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
pointFormat: '<b>{point.name}</b><br/>{point.x}, {point.y}'
}
}
},
series: [{
name: 'Books',
color: 'rgba(223, 83, 83, .5)',
data: [ {{{data}}} ]
}]
});
</script>
</body>
</html>