chart container as a variable

[et62962003]

Hi,

I am trying to integrate canvasjs charts into Oracle APEX plugins. I would like to dynamically pass the container ID that is system-generated by Oracle APEX to the CavasJS.Chart. This code will not become re-usable if I need to hard-code the chart container ID in the render function. Is there any workaround for this? Thanks.

// Create and draw the chart
function renderChart() {
var chart = new CanvasJS.Chart( pRegionId, {
theme: “theme2″, // Options: “theme1″,”theme2″, “theme3″
exportEnabled: true,
animationEnabled: true,
title:{
text: “Simple Column Chart”
},
subtitles:[
{ text: “This is a Subtitle”
//Uncomment properties below to see how they behave
//fontColor: “red”,
//fontSize: 30
}
],
axisX:{
title:”Axis X title”,
},
axisY:{
title:”Axis Y Title”,
},
legend: {
horizontalAlign: “left”, // “center” , “right”
verticalAlign: “center”, // “top” , “bottom”
fontSize: 15
},
data: [
{
type: “column”, //change type to bar, line, area, pie, etc
indexLabel: “{y}”,
indexLabelPlacement: “outside”,
indexLabelOrientation: “horizontal”,
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}
]
});

chart.render();
}

[et62962003]

Please ignore the question above. I have resolved the problem. The issue was related to the duplicated container ID generated in the region template. After I set it to use no template, it worked fine although I needed to define a height for the chart. Since the container ID can be dynamic now, I can reuse the code for multiple charts in a page.

Thanks.