Hi Joaquin, each KoolReport report class loading requires multiple resources (js, css, etc files) so it would not be the most optimized to ajax load multiple reports per page because of multiple abundant file requests. Instead it's advisable to use SubReport trait to load multiple reports as they would share the same resource files. Here's a standard example of using SubReport to load multiple widgets (chart, table, etc):

https://www.koolreport.com/examples/reports/others/async_loading/

Pls try to copy and modify its source code for your page and let us know if you have any question/difficulty. We would help you to solve them. Tks,

How do you decide the number of graphics for a page? Can you use that logic to define the main report's sub reports as well each sub report's data?

I imagine we could configure your BigReport's sub reports upon users' graphic adding like this:

//BigReport.php

    function settings()
    {
        if (isset($_POST["addGraphic"])) {
            $graphicName = ...;
            $subreportContent = ...;
            $subreportViewContent = ...;
            $subReportPath = $path . "/" . $grapicName . ".php";
            $subReportViewPath = $path . "/" . $grapicName . ".view.php";
            file_put_content($subReportPath, $subreportContent);
            file_put_content($subReportViewPath, $subreportViewContent);
        }
        $listOfSubReports = ...;
        $listOfSubReports[$graphicName] = $subReportPath;
        $this->listOfSubReports = $listOfSubReports;
        return array(
            "subReports"=>$listOfSubReports
        );
    } 

//BigReport.view.php
// render sub reports based on $this->listOfSubReports

It's a general idea. If you have any difficulty in detail implementation let us know. Tks,

Oh, if all of your graphics are generated using the same report file it's even easier. Just set your BigReport's list of sub reports to the same file path, but load each sub report with their own parameters for different graphics:

//BigReport.php
    $pathToSameSubReport = ...;
    require_once $pathToSameSubReport;
    function settings()
    {
        $listOfSubReports = ...;
        if (isset($_POST["addGraphic"])) {
            $graphicName = ...;
            $listOfSubReports[$graphicName] = $pathToSameSubReport;
        }
        $this->listOfSubReports = $listOfSubReports;
        return array(
            "subReports"=>$listOfSubReports
        );
    }  

//BigReport.view.php
<!--
    Add sub report dom for each sub reports, for example:
    foreach ($this->listOfSubReports as $subReportName => $subReportPath) {
        echo "<sub-report name='TopCustomersReport' id='{$subReportName}'></sub-report>";
    }
-->
<script>
        function loadSubReports()
        {
            for (var subReport in allSubReports) {
                var subReportName = ...;
                var subReportParam = ...; // subreport param defined by users
                subReport.update(subReportName, subReportParam);
            }            
        }
        loadSubReports();
</script>

//SubReport.php
public function setup()
{
    $params = $this->params; // $this->params would have the value of client-side subReportParam
    // use $params to build sql query and datastore
}

If you have any difficulty with this approach let us know. Tks,