Dynamic Chart Regions in Oracle Apex

What would be the suggested approach for dynamically create a Chart Region in Apex?

I have a Teams table and for each team A Chart region, a gauge chart should be added as you add teams, and chart be removed as you delete a team.

The solution I applied is to create a dynamic region.

Add the anychart library reference in the page header.
Create a region that serves as a container.
Create a pl/sql dynamic region, it's parent the above one.
Use htp.p to create the div.
Use htp.script to setup the javascript code.

I use looping and mod to set an enter at each 4 divs.

Result is coming like this: Anychart Gauges dynamically create from Loop, htp.p, htp.script

Code is coming like this:

declare
type v_valor is table of number index by binary_integer;
t_valor v_valor;
v_index binary_integer;
val number;
enter varchar2(5);
begin
enter :='';
t_valor(1) := 100;
t_valor(2) := 150;
t_valor(3) := 124;
t_valor(4) := 159;
t_valor(5) := 100;
t_valor(6) := 150;
t_valor(7) := 124;
t_valor(8) := 159;
v_index := t_valor.first;
val := 0;
ancho := (1/t_valor.last)*100;

for i in 1..t_valor.last loop
val := t_valor(v_index);  
if mod(i,5)=0 then enter := '</br>'; end if;

htp.p(''||enter||'<div id="anychart'||i||'" style="width: 330px; height:    330px; float: left; ">');
    enter :='';

    htp.script('

    anychart.onDocumentReady(function() {

      // create data set on our data
      var dataSet = anychart.data.set(['||val||',500]);

      // chart type
      var gauge = anychart.circularGauge();

      // set series padding
       gauge.data(dataSet).padding("4%");

        //axis settings
        var axis = gauge.axis()
        .radius(95)
        .width(2);

       //scale settings
        axis.scale()
        .minimum(0)
        .maximum(590)
        .ticks({interval: 73.75})
        .minorTicks({interval: 18.4375});

        //ticks settings
        axis.ticks()
        .enabled(true)
        .type(''trapezoid'')
        .length(8);

    //minor ticks settings
    axis.minorTicks()
    .enabled(true)
    .length("2");

    // second axis settings
    var axis_1 = gauge.axis(1)
    .radius(60)
    .width(3);

    // second scale settings
    axis_1.scale()
    .minimum(0)
    .maximum(600)
    .ticks({interval: 100})
    .minorTicks({interval: 20});

    // second ticks settings
    axis_1.ticks()
    .type("trapezoid")
    .length(8);

    // second minor ticks settings
    axis_1.minorTicks()
    .enabled(true)
    .length("3");

    //needle
    gauge.needle(0)
    .enabled(true)
    .startRadius(''-5%'')
    .endRadius(''80%'')
    .middleRadius(0)
    .startWidth(''0.1%'')
    .endWidth(''0.1%'')
    .middleWidth(''5%'');

    // marker
    gauge.marker(0)
    .axisIndex(1)
    .dataIndex(1)
    .size(7)
    .type("triangledown")
    .position("outside")
    .radius(60);

        // bar
        gauge.bar(0)
    .axisIndex(1)
    .position("i")
    .dataIndex(1)
    .width(3)
    .radius(60)
    .zIndex(10);

    //gauge label
    gauge.label()
    .text(''ALBANY'')
    .anchor(''center'') //set the position of the label
    .adjustFontSize(true)
    .hAlign(''center'')
    .offsetY(''15%'')
    .offsetX(''50%'')
    .width(''40%'')
    .height(''5%'')
    .zIndex(10);

  // draw chart
  gauge.container("anychart'||i||'").draw();
});');
htp.p('</div>');

v_index := t_valor.next(v_index);

end loop;
end;