I need to add the chart in excel. From table data ,need a chart to be drawn in the excel.I have add xlsxAdd to append chart in excel, but its throwing *Missing helper: “xlsxAdd*
error. So table is already there in the excel but chart is not rendering using this handlebars.This is the correct way to add chart in excel ?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Report</title>
<link rel="stylesheet" href="/stylesheets/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%
}
td {
text-align: center
}
</style>
<body>
<div>
<img src="https://icicipruamcdev.azureedge.net/static/media/logo.86f7e0e9.svg" style="height: 150px;">
</div>
<canvas id="canvas" style="width:90vw"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Extract data from the table
const table = document.getElementById('report-table');
const rows = table.querySelectorAll('tr');
const labels = [];
const navData = [];
rows.forEach((row, index) => {
if (index > 0) { // Skip header row
const cells = row.querySelectorAll('td');
labels.push(cells[1].textContent); // Assuming date is in the second column
navData.push(parseFloat(cells[0].textContent)); // Assuming nav is in the first column
}
});
// Chart data
const chartData = {
labels: labels,
datasets: [{
label: "NAV_HISTORY",
type: 'line',
data: navData,
backgroundColor: 'transparent',
borderColor: 'blue',
borderWidth: 1,
lineTension: 0,
pointBackgroundColor: 'blue',
pointBackgroundColor: 'transparent',
borderColor: 'navy',
pointRadius: 3
}]
};
// Chart initialization
const ctx = document.getElementById('canvas').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
responsive: false,
animation: false,
maintainAspectRatio: false,
devicePixelRatio: 1,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 20
}
}],
xAxes: [{
ticks: {
autoSkip: true,
maxTicksLimit: 8,
maxRotation: 0,
minRotation: 0
}
}]
}
}
});
});
</script>
<div><br/></div>
<div class="invoice-box">
<!-- Assuming you have a table structure like this -->
<table>
<thead>
<tr>
<th>NAV</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{{#each data}}
<tr>
<td>{{this.Name}}</td>
<td>{{this.Amount}}</td>
</tr>
{{/each}}
</tbody>
</table>
<!-- Now, let's add the xlsxAdd functionality -->
{{#xlsxAdd "xl/drawings/drawing1.xml" "xdr:wsDr.twoCellAnchor"}}
{{#each data}}
<row>
<c t="inlineStr"><is><t>{{this.Name}}</t></is></c>
<c><v>{{this.Amount}}</v></c>
</row>
{{/each}}
{{/xlsxAdd}}
</div>
</body>
</html>