-
Notifications
You must be signed in to change notification settings - Fork 0
/
recipes.html
68 lines (64 loc) · 2.34 KB
/
recipes.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
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['sankey']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addColumn({type:'string', role:'tooltip'});
data.addRows([
['heavy-oil', 'lubricant', 0.458793, '45.9%'],
['water', 'concrete', 0.188254, '18.8%'],
['lubricant', 'electric-engine-unit', 0.044698, '4.5%'],
['stone', 'stone-brick', 0.019719, '2.0%'],
['electronic-circuit', 'solar-panel', 0.018602, '1.9%'],
['copper-ore', 'copper-plate', 0.017632, '1.8%'],
['steel-plate', 'rocket-silo', 0.011755, '1.2%'],
['concrete', 'rocket-silo', 0.011755, '1.2%'],
['stone-brick', 'concrete', 0.009413, '0.9%'],
['iron-ore', 'iron-plate', 0.008490, '0.8%'],
['solid-fuel', 'rocket-fuel', 0.007112, '0.7%'],
['pipe', 'engine-unit', 0.006794, '0.7%'],
['advanced-circuit', 'effectivity-module', 0.006612, '0.7%'],
['electronic-circuit', 'effectivity-module', 0.006612, '0.7%'],
['advanced-circuit', 'speed-module', 0.006259, '0.6%'],
['electronic-circuit', 'speed-module', 0.006259, '0.6%'],
['steel-plate', 'solar-panel', 0.006201, '0.6%'],
['copper-plate', 'solar-panel', 0.006201, '0.6%'],
['electronic-circuit', 'electric-engine-unit', 0.005960, '0.6%'],
['battery', 'accumulator', 0.005907, '0.6%'],
['concrete', 'nuclear-reactor', 0.005877, '0.6%']
]);
// Sets chart options.
var options = {
sankey: {
node: {
width: 15,
color: { stroke: 'gray', strokeWidth: 1 },
nodePadding: 20,
label: { fontSize: 16, bold: true },
interactivity: true
},
link: {
colorMode: "source",
color: { stroke: '#777', strokeWidth: 1.5 }
},
iterations: 100
},
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="sankey_basic" style="width: 100%; height: 100%;"></div>
</body>
</html>