<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="total" class="demo-container">
<div id="placeholder" style="height: 300px; width: 900px;"></div>
<div id="placeholder_2" style="height: 300px; width: 900px;"></div>
</div>
<a id="generate">Generate</a>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
flot1();
flot2();
});
function flot1() {
var plot;
plot = $.plot($("#placeholder"), [{
label: 'Test',
data: [
[0, 0],
[1, 1]
]
}], {
yaxis: {
max: 1
}
});
}
function flot2() {
var oilPrices = [
[1167692400000, 61.05],
[1167778800000, 58.32],
[1167865200000, 57.35],
[1167951600000, 56.31],
[1168210800000, 55.55],
[1168297200000, 55.64],
[1168383600000, 54.02],
[1168470000000, 51.88],
[1168556400000, 52.99],
[1168815600000, 52.99],
[1168902000000, 51.21],
[1168988400000, 52.24],
[1169074800000, 50.48]
];
var exchangeRates = [
[1167606000000, 0.7580],
[1167692400000, 0.7580],
[1167778800000, 0.75470],
[1167865200000, 0.75490],
[1167951600000, 0.76130],
[1168038000000, 0.76550],
[1168124400000, 0.76930],
[1168210800000, 0.76940],
[1168297200000, 0.76880],
[1168383600000, 0.76780],
[1168470000000, 0.77080],
[1168556400000, 0.77270],
[1168642800000, 0.77490],
[1168729200000, 0.77410],
[1168815600000, 0.77410],
[1168902000000, 0.77320],
[1168988400000, 0.77270],
[1169074800000, 0.77370],
[1169161200000, 0.77240],
[1169247600000, 0.77120]
];
var data = [{
data: oilPrices,
label: "Oil price ($)"
}, {
data: exchangeRates,
label: "USD/EUR exchange rate",
yaxis: 2
}];
var options = {
canvas: true,
xaxes: [{
mode: "time"
}],
yaxes: [{
min: 0
}, {
position: "right",
alignTicksWithAxis: 1,
tickFormatter: function(value, axis) {
return value.toFixed(axis.tickDecimals) + "€";
}
}],
legend: {
position: "sw"
}
}
plot = $.plot("#placeholder_2", data, options);
}
//----------------------------------------------------
$("#generate").on("click", function(e) {
e.preventDefault();
var p1 = new Promise(function(resolve, reject) {
var element = $("#placeholder").get(0);
html2canvas(element, {
onrendered: function(canvas) {
resolve(canvas.toDataURL('image/png'));
}
});
});
var p2 = new Promise(function(resolve, reject) {
var element = $("#placeholder_2").get(0);
html2canvas(element, {
onrendered: function(canvas) {
resolve(canvas.toDataURL('image/png'));
}
});
});
Promise.all([p1, p2]).then(function(screens) {
var doc = new jsPDF();
doc.addImage(screens[0], 'PNG', 10, 10, 180, 115);
doc.addPage();
doc.addImage(screens[1], 'PNG', 10, 10, 180, 60);
doc.save('sample-file.pdf');
});
});
</script>
</html>
