function embedChart(barDetails, cusName) {
barDetails = barDetails.map(value => parseFloat(value));
let chartScript = `<!DOCTYPE html>
<html lang="en">
<head>
<style>
.bar {
fill: steelblue;
}
.bar-label {
fill: black;
font-size: 12px;
text-anchor: start;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bar Chart Example</title>
<!-- Include D3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- Include canvg library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.5/canvg.min.js"></script>
</head>
<body>
<svg id="svg" width="600" height="500"></svg>
<script>
let svg = d3.select("#svg"),
margin = { top: 50, right: 50, bottom: 50, left: 100 },
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
svg.append("text")
.attr("transform", "translate(100,0)")
.attr("x", 50)
.attr("y", 30)
.attr("font-size", "24px")
.text('${cusName}');
// Sample data - replace this with your data
let xLabels = ["Last Year Sales", "Current Year To Date", "Avg Quarter Sales", "Quarter To Date"];
let yValues = ${JSON.stringify(barDetails)};
// Combine xLabels and yValues into an array of objects
let data = xLabels.map(function(label, index) {
return { year: label, value: yValues[index] };
});
let maxDataValue = d3.max(data, function(d) { return d.value; });
let xScale = d3.scaleLinear()
.domain([0, maxDataValue * 1.2]) // Adjusted domain to accommodate maximum value
.range([0, width]);
let yScale = d3.scaleBand()
.domain(xLabels)
.range([0, height])
.padding(0.4);
let g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-0.8em")
.attr("dy", "0.15em")
.attr("transform", "rotate(-45)");
g.append("g")
.attr("class", "y-axis")
.call(d3.axisLeft(yScale))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-0.8em")
.attr("dy", "0.15em")
.attr("transform", "rotate(-45)");
g.select(".y-axis")
.append("text")
.attr("y", -30)
.attr("x", 0)
.attr("text-anchor", "start")
.attr("stroke", "black")
.attr("transform", "rotate(-45)");
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", 0)
.attr("y", function(d) { return yScale(d.year); })
.attr("width", function(d) { return xScale(d.value); })
.attr("height", yScale.bandwidth());
svg.selectAll(".bar")
.style("fill", "steelblue");
g.selectAll(".bar-label")
.data(data)
.enter().append("text")
.attr("class", "bar-label")
.attr("x", function(d) { return xScale(d.value) + 5; })
.attr("y", function(d) { return yScale(d.year) + yScale.bandwidth() / 2; })
.attr("dy", "0.35em")
.text(function(d) { return d.value; });
// Render SVG onto canvas using canvg
let canvas = document.createElement('canvas');
canvg(canvas, svg.node().outerHTML);
let img = canvas.toDataURL('image/png');
window.jjchartVariableGtilc470 = img;
</script>
</body>
</html>`
return chartScript;
}