Graph won't render in Content DIV

Steve Harris commented on Dec 5, 2022

I have a web site with multiple DIVs The left hand side is all about menus for the user to select from. One of those menu options causes a report to be displayed in the mainContents DIV however the graphs do not render. The tables do but not the graphs.

If I load the report page outside of my menu system it renders correctly.

I have tried changing the working directory Webs/jtmjbw/htdocs/code chdir('../reports') Webs/jtmjbw/htdocs/reports

And fiddling with the relative path to KoolReports but nothing seems to work

KoolReport commented on Dec 6, 2022

What library chart are you using? Google Chart or chartjs?

Sebastian Morales commented on Dec 6, 2022

Steve, how did you update the main content's div when users clicked left side menu?

KoolReport commented on Dec 6, 2022

I guess the issue is due to initiate chart within hidden div. Google Chart will not be able to establish the size therefore failed to show. The solution is that we redraw the chart when the div is unhide.

To do so, you need to catch the event when your menu is fully open and then call redraw() javascript of google chart. For example:

ColumnChart::create([
    "name"=>"myColumnChart", // name the chart to be referred to in js
])

then at client event, you redraw the chart like this:

myColumnChart.redraw();

Hope that helps.

Steve Harris commented on Dec 6, 2022

Thanks for the responses.

The user request fires a javascript/jquery post which returns the results of the report "rpt_SalesbyCustomer.php" which is injected into the pageContents <DIV>

    			$.post( "code/frm_load.php", {
				menu: menu,
				key: key,
				user: user
			} , function( data ) {
				document.getElementById('pageContents').innerHTML =  data;
			});

This is the KoolReport I have set up that works perfectly if I call it directly "http://localhost/reports/rpt_SalesbyCustomer.php"

The frm_load function checks the report/form exists and if so it includes it. if (file_exists($form)) { include $form; } else { echo $form."' does not exist"; }

rpt_SalesbyCustomer.php includes this code. I have left our the bulk of the code as it works external to my DIVs.

As the table renders correctly, I assume everything else is ok. The result also leave a space where the graph would have been.

KoolReport commented on Dec 7, 2022

Could you please check if there is any javascript error in console log of browser

Sebastian Morales commented on Dec 7, 2022

Steve, more often than not KoolReport widgets such as charts, tables, pivot tables, etc need to execute some initial javascript on load. Pls use the following function in your ajax call and let us know if it works for you:

function setInnerHTML(elm, html) {
  elm.innerHTML = html;
  
  Array.from(elm.querySelectorAll("script"))
    .forEach( oldScriptEl => {
      const newScriptEl = document.createElement("script");
      
      Array.from(oldScriptEl.attributes).forEach( attr => {
        newScriptEl.setAttribute(attr.name, attr.value) 
      });
      
      const scriptText = document.createTextNode(oldScriptEl.innerHTML);
      newScriptEl.appendChild(scriptText);
      
      oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
  });
} 

$.post( "code/frm_load.php", {
	menu: menu,
	key: key,
	user: user
} , function( data ) {
	setInnerHTML(document.getElementById('pageContents'), data);
});

Source: https://stackoverflow.com/a/47614491/2873057

Steve Harris commented on Dec 7, 2022

Sebastian Morales commented 11 hours ago

Thanks Sebastian, that has solved the issue, although I think it is a little intermittent. If I load the report the graph is not there but if I load it again and on subsequent loads, it is. If I refresh the browser and then run the report, the first time it doesn't work but then subsequent loads it does.

Regards Steve

Sebastian Morales commented on Dec 8, 2022

Ah, it's not perfect then. Pls use the following function to see if it makes difference:

        function setAndExecute(wrappingEl, innerHTML) {
            wrappingEl.innerHTML = innerHTML;
            var x = wrappingEl.getElementsByTagName("script");
            for (var i = 0; i < x.length; i++)
                eval(x[i].text);
        }

$.post( "code/frm_load.php", {
	menu: menu,
	key: key,
	user: user
} , function( data ) { 
	setAndExecute(document.getElementById('pageContents'), data);
});

KoolReport's Forum

Graph won't render in Content DIV #2895

Build Your Excellent Data Report