UPDATE: After some refining, the code looks something like this:
for (i = 0; i < data.length; i++) {
const newCanvas = document.createElement("canvas");
newCanvas.id = data[i].design_name;
const currentDiv = document.getElementById("chartSpace");
var parentDiv = document.getElementById("gridHere");
parentDiv.insertBefore(newCanvas, currentDiv);
createChart([data[i].design_name], [data[i].design_start, data[i].design_end]);
}
The chart created by `createChart` has an id equal to the elements in the 'labels' array:
const myChart = new Chart(
document.getElementById(labels),
config
);
I am working on a tool that generates 'n' number of charts using ChartJS and saves each one as an image. Currently, when `designButtonClick()` is called, the 'event_fky' value is sent to `getDesigns(event_fky)` in the controller. This method retrieves all designs related to that foreign key, and then plots each design on the chart. I need to enhance this functionality so that it can generate individual charts for each design based on the total number of designs available. My initial approach, though still in the concept phase, involves creating variables `'chartData[data here]'` and '`labels[datahere]`' in the controller while looping through the designs returned from `getDesigns`. These variables are then passed back to the JS script `createChart` 'n' times for each design. Additionally, HTML chart/html element ids based on the 'design_name' attribute are also generated and sent back to `createChart`. This way, a unique chart is created 'n' times.
To save the charts as images, I plan to use the same set of element ids generated by `getDesigns` to convert the charts into images using JavaScript's `toBase64Image()` function and saving them locally on the user's system.
Is this the most efficient way to tackle this problem? Or does it seem convoluted, suggesting there might be a better alternative? So far, my search for solutions online has only yielded documentation about updating a single chart dynamically, not about creating a dynamic number of charts. Any assistance or guidance would be greatly appreciated. The code snippet and a screenshot of the current chart output are provided below.
JavaScript Code:
var labels = [];
var cData = [];
function designButtonClick() {
var event_fky = 3;
$.ajax({
url: 'Tree/getDesigns',
type: 'POST',
data: { event_fky }
}).done(function (data) {
for (i = 0; i < data.length; i++) {
labels.push(data[i].design_name);
cData.push([data[i].design_start, data[i].design_end])
}
createChart(labels, cData);
});
}
function createChart(labels, cData) {
const data = {
labels: labels,
datasets: [{
barThickness: 2,
categoryPercentage: .5,
label: 'Design Time',
data: cData,
backgroundColor: [
'rgba(255, 26, 104, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)'
],
borderWidth: 1,
borderSkipped: false,
borderRadius: 20
}]
};
const config = {
type: 'bar',
data,
options: {
indexAxis: 'y',
scales: {
y: {
beginAtZero: true
},
x: {
min: 0,
max: 6000,
ticks: {
stepSize: 1000
}
}
}
}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
}
C# Controller:
public ActionResult getDesigns(int? event_fky)
{
var designs = from e in _context.designs
where (event_fky.HasValue ? e.event_fky == event_fky : e.event_fky == null)
select new
{
design_pky = e.design_pky,
design_name = e.design_name,
design_start = e.design_start,
design_end = e.design_end
};
return this.Json(designs, JsonRequestBehavior.AllowGet);
}
Designs Table:
--------Design--------
design_pky |int
event_fky |int
design_name |varchar
design_start |number
design_end |number