The JavaScript is a Programming language that is used for converting static web pages to interactive and dynamic web pages.
A JavaScript engine is a program present in web browsers that executes JavaScript code.
Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts
Monday, May 6, 2024
Monday, September 12, 2022
Download chart as image using html2canvas
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
#container {
min-width: 310px;
max-width: 800px;
margin: 0 auto
}
td {
padding: 1rem;
background: blue;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.5/apexcharts.min.js" integrity="sha512-K5BohS7O5E+S/W8Vjx4TIfTZfxe9qFoRXlOXEAWJD7MmOXhvsSl2hJihqc0O8tlIfcjrIkQXiBjixV8jgon9Uw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<span onclick="DownloadChart()" style="background: #ffd800; padding: 1rem; color: #fff; cursor: pointer;">Download</span>
<div id="container">
<table style="width: 100%;">
<tr>
<td>3</td>
<td>4</td>
<td>6</td>
<td>5</td>
<td>8</td>
</tr>
</table>
<h2 style="text-align: center; background: #ffd800; padding: 2rem; margin-bottom: 1rem;">This is apexchart download as image using html2canvas library!!</h2>
<div id="chart"></div>
</div>
</div>
</form>
<script>
var options = {
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
}, {
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14]
}, {
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 10
},
},
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
'01/05/2011 GMT', '01/06/2011 GMT'
],
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
function DownloadChart() {
alert("Download chart !");
setTimeout(function () {
generateCanvas();
}, 1000);
}
function generateCanvas() {
html2canvas(document.querySelector("#container")).then(canvas => {
var imgData = canvas.toDataURL("image/jpeg", 1.0);
//$("#canvas_container").attr("src", imgData);
var a = document.createElement("a"); //Create <a>
a.href = imgData; //Image Base64 Goes here
a.download = "Image.png"; //File name Here
a.click(); //Downloaded file
});
}
</script>
</body>
</html>
Thursday, December 19, 2019
What is JavaScript?
JavaScript is the programming language of HTML and the Web.
The programs in this language are called scripts. They can be written right in a web page’s HTML and run automatically as the page loads.
Scripts are provided and executed as plain text. They don’t need special preparation or compilation to run.
JavaScript is very different from another language called Java.
The programs in this language are called scripts. They can be written right in a web page’s HTML and run automatically as the page loads.
Scripts are provided and executed as plain text. They don’t need special preparation or compilation to run.
JavaScript is very different from another language called Java.
Thursday, August 8, 2019
How to reload page after click on back button in browser using javascript
<script>
function noBack() { window.history.forward(); }
noBack();
window.onload = noBack;
window.onpageshow = function (evt) { if (evt.persisted) noBack(); }
window.onunload = function () { void (0); }
</script>
Add this script into your web page header.
function noBack() { window.history.forward(); }
noBack();
window.onload = noBack;
window.onpageshow = function (evt) { if (evt.persisted) noBack(); }
window.onunload = function () { void (0); }
</script>
Add this script into your web page header.
Subscribe to:
Posts (Atom)
Featured Post
What is JavaScript? What is the role of JavaScript engine?
The JavaScript is a Programming language that is used for converting static web pages to interactive and dynamic web pages. A JavaScript e...
