<!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>If you're reading this, you must have heard the buzz about ChatGPT and its incredible…
How to Use ChatGPT in Cybersecurity If you're a cybersecurity geek, you've probably heard about…
Introduction In the dynamic world of cryptocurrencies, staying informed about the latest market trends is…
The Events Calendar Widgets for Elementor has become easiest solution for managing events on WordPress…
Introduction The "Story Timeline" is a versatile plugin that offers an innovative way to present…
Introduction In today's globalized world, catering to diverse audiences is very important. However, the process…