B4J Question ABMaterial JQPlots charts resizing issue

[walterf25]

I am working on a project and I am using a JQPlot class I found on this thread while the class works great I noticed that the charts/plots don't get resized when the entire page gets resized.

I have placed each plot on a container, the container gets resized just fine but not the plots.
This is an image of the normal size page.

And here's an image when the page is resized

I'm not very good with javascript, but I tried the following code by asking chatgpt

    Dim ResizeJS As String = $"
        $(window).on('resize', function() {
            if ($.jqplot) {
                $('.jqplot-target').each(function() {
                    var chartId = $(this).attr('id');
                    console.log('chartId: ', chartId);
                    if (chartId) {
                        var plot = $('#'+'${chartId}').data('jqplot');
                        console.log('plot: ', plot);
                        if (plot) {
                            plot.replot({ resetAxes: true });
                        }
                    }
                });
            }
        });
    "$

It seems to do something but I see an error at the var plot = $('#'+'${chartId}').data('jqplot'); part, as I reiterate I'm not very familiar with js, maybe someone on here could help me figure this out, all I need is to be able for each plot to resize along with the container when the browser's page is resized.

Walter

 

[alwaysbusy]

What error does it show in the browsers log?

I'm not familiar with this lib, but I would write that line as:

var plot = $('#'+chartId).data('jqplot');

 

[walterf25]

What error does it show in the browsers log?

I'm not familiar with this lib, but I would write that line as:

var plot = $('#'+chartId).data('jqplot');

I was able to get it working with the following modifications, hope it helps someone else

    Dim resizeJs As String = $"
$(window).on('resize', function() {
    if ($.jqplot) {
        var chartId = '${internalID}'; // Specific chart ID
        var chartContainer = $('#' + chartId); // The chart container
        var plot = document.getElementById(chartId).plotInstance; // Retrieve plot instance
        
        if (plot) {
            // Dynamically set the container height to 90% of its parent's height
            var parentHeight = chartContainer.parent().parent().parent().parent().height();
        //    console.log('parentHeight: ', parentHeight);
            chartContainer.height(parentHeight * 0.9); // Set to 90% of parent height
         //   console.log('plot: ', plot.target);
         //   console.log('width: ', chartContainer.width());
         //   console.log('height: ', chartContainer.height());
            if (chartContainer.width() > 0 && chartContainer.height() > 0) {
                plot.replot({ resetAxes: true });
            } else {
            //    console.log('plot: ', plot.target);
            //    console.log('width: ', chartContainer.width());
            //    console.log('height: ', chartContainer.height());
                console.warn('Skipping replot: container has zero dimensions');
            }
        } else {
            console.error('Plot instance not found for chart ID:', chartId);
        }
    }
});
"$

    InternalPage.ws.Eval(resizeJs, Null)
    InternalPage.ws.Flush

The script gets executed inside the Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String) function of the custom component class and it gets called from the Sub page_SizeChanged(previous As String, current As String) function of the page.

So far it seems to work just fine for my purposes.

Cheers,
Walter