index.html
HTML
x
143
143
1
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<title>Document</title>
8
</head>
9
<body>
10
<div id="total" class="demo-container">
11
<div id="placeholder" style="height: 300px; width: 900px;"></div>
12
<div id="placeholder_2" style="height: 300px; width: 900px;"></div>
13
</div>
14
<a id="generate">Generate</a>
15
</body>
16
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
17
18
<script>
19
$(function() {
20
flot1();
21
flot2();
22
});
23
24
function flot1() {
25
var plot;
26
plot = $.plot($("#placeholder"), [{
27
label: 'Test',
28
data: [
29
[0, 0],
30
[1, 1]
31
]
32
}], {
33
yaxis: {
34
max: 1
35
}
36
});
37
}
38
39
function flot2() {
40
var oilPrices = [
41
[1167692400000, 61.05],
42
[1167778800000, 58.32],
43
[1167865200000, 57.35],
44
[1167951600000, 56.31],
45
[1168210800000, 55.55],
46
[1168297200000, 55.64],
47
[1168383600000, 54.02],
48
[1168470000000, 51.88],
49
[1168556400000, 52.99],
50
[1168815600000, 52.99],
51
[1168902000000, 51.21],
52
[1168988400000, 52.24],
53
[1169074800000, 50.48]
54
];
55
56
var exchangeRates = [
57
[1167606000000, 0.7580],
58
[1167692400000, 0.7580],
59
[1167778800000, 0.75470],
60
[1167865200000, 0.75490],
61
[1167951600000, 0.76130],
62
[1168038000000, 0.76550],
63
[1168124400000, 0.76930],
64
[1168210800000, 0.76940],
65
[1168297200000, 0.76880],
66
[1168383600000, 0.76780],
67
[1168470000000, 0.77080],
68
[1168556400000, 0.77270],
69
[1168642800000, 0.77490],
70
[1168729200000, 0.77410],
71
[1168815600000, 0.77410],
72
[1168902000000, 0.77320],
73
[1168988400000, 0.77270],
74
[1169074800000, 0.77370],
75
[1169161200000, 0.77240],
76
[1169247600000, 0.77120]
77
];
78
var data = [{
79
data: oilPrices,
80
label: "Oil price ($)"
81
}, {
82
data: exchangeRates,
83
label: "USD/EUR exchange rate",
84
yaxis: 2
85
}];
86
87
var options = {
88
canvas: true,
89
xaxes: [{
90
mode: "time"
91
}],
92
yaxes: [{
93
min: 0
94
}, {
95
position: "right",
96
alignTicksWithAxis: 1,
97
tickFormatter: function(value, axis) {
98
return value.toFixed(axis.tickDecimals) + "€";
99
}
100
}],
101
legend: {
102
position: "sw"
103
}
104
}
105
106
plot = $.plot("#placeholder_2", data, options);
107
}
108
//----------------------------------------------------
109
$("#generate").on("click", function(e) {
110
111
e.preventDefault();
112
113
var p1 = new Promise(function(resolve, reject) {
114
var element = $("#placeholder").get(0);
115
html2canvas(element, {
116
onrendered: function(canvas) {
117
resolve(canvas.toDataURL('image/png'));
118
}
119
});
120
});
121
122
123
var p2 = new Promise(function(resolve, reject) {
124
var element = $("#placeholder_2").get(0);
125
html2canvas(element, {
126
onrendered: function(canvas) {
127
resolve(canvas.toDataURL('image/png'));
128
}
129
});
130
});
131
132
Promise.all([p1, p2]).then(function(screens) {
133
var doc = new jsPDF();
134
doc.addImage(screens[0], 'PNG', 10, 10, 180, 115);
135
doc.addPage();
136
doc.addImage(screens[1], 'PNG', 10, 10, 180, 60);
137
doc.save('sample-file.pdf');
138
139
});
140
});
141
142
</script>
143
</html>