Skip to content

Instantly share code, notes, and snippets.

@JamoCA

JamoCA/wkhtmltopdf-chartjs-26-demo.htm

Created November 24, 2021 17:30
Show Gist options
  • Save JamoCA/42f47f92f96f9f1e6b4555b5fe8e3839 to your computer and use it in GitHub Desktop.
Save JamoCA/42f47f92f96f9f1e6b4555b5fe8e3839 to your computer and use it in GitHub Desktop.
Download ZIP
Chart.js 2.6.x HTML for use with WKHTMLTOPDF
Raw
wkhtmltopdf-chartjs-26-demo.htm
<!DOCTYPE html>
<!-- HTML borrowed from https://github.com/itsmeJithin/wkhtmltopdf-chartjs-working-demo/blob/master/src/test.php -->
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<!-- Chart.js 3.6 renders in a browser, but not WKHTMLTOPDF. Doesn't render using the QtWeb browser either.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script>
<style>
.reportGraph {width:400px;height: 400px;}
</style>
<title>WKHTMLTOPDF + Chart.js Demo</title>
</head>
<body>
<h1>WKHTMLTOPDF + Chart.js Demo</h1>
<div class="reportGraph">
<canvas id="canvas"></canvas>
</div>
<script>
'use strict';
function drawGraphs() {
new Chart(
document.getElementById("canvas"), {
"responsive": false,
"type":"pie",
"data":{
"labels":["January","February","March","April","May","June","July"],
"datasets":[
{
"label":"My First Dataset",
"data":[65,59,80,81,56,55,40],
backgroundColor: [
window.chartColors.red,
window.chartColors.orange,
window.chartColors.yellow,
window.chartColors.green,
window.chartColors.blue,
window.chartColors.grey,
window.chartColors.purple,
],
"borderColor":"rgb(75, 192, 192)"
}
]
},
options: {
animation: {
duration: 0, // general animation time
},
hover: {
animationDuration: 0, // duration of animations when hovering an item
},
responsiveAnimationDuration: 0, // animation duration after a resize
}
}
);
}
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
window.onload = function() {
drawGraphs();
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment