jQuery UI Widgets Forums Chart Troubles with charts and tabs

This topic contains 4 replies, has 2 voices, and was last updated by  toquehead 8 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Troubles with charts and tabs #72859

    toquehead
    Participant

    I have a fairly simple setup with a jqxTab widget, with each tab having a list of jqxCharts. Neither the number of tabs nor the chart number or configuration is known at compile time. When the page is loaded, I create the tabs with jqxTabs(‘addAt’, …) calls, and then retrieve the data for the charts with web service calls.

    The problem is that by the time the service calls return, the tab in question is not the current one and is hidden, so the chart container is of size 0, and calls to jqxChart() do NOT render _anything_. initTabContent is of no assistance, as it is called immediately when using ‘addAt’. All the examples I can find have the tab config hard-coded in HTML, and that is not possible for me.

    Right now, the only way I have found to make it work, is every time a tab is made active, look for a <svg> element and if not found, re-create the chart. Ugly.

    I am using jqxWidgets 3.8.0 and Chrome 43/IE 11.

    What is the best way to handle this?

    Thanks.

    Troubles with charts and tabs #72868

    Dimitar
    Participant

    Hi toquehead,

    Here is a suggestion – add the chart on the new tab’s selected event, then set a flag variable indicating that the chart for this tab has been initialized. E.g.:

    var flagObject = {};
    
    $('#jqxTabs').on('selected', function(event) {
        var selectedTab = event.args.item;
        if (!flagObject['tab' + selectedTab]) {
    
            // initialize chart here      
    
            flagObject['tab' + selectedTab] = true;
        }
    });

    Another, simpler, way is to select the new tab immediately after it has been added.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Troubles with charts and tabs #72914

    toquehead
    Participant

    Thanks for your response.

    Neither of those solutions work. When a tab is added via jqxTabs(‘addAt’, …), it immediately becomes selected. The problem is because I am adding multiple tabs at once during page load, only one can be selected when the service calls return and I actually initialize the charts.

    1. The flag technique fails because the tab was first selected immediately after being added, so the flag will be set then. If the flag is not set until the data actually arrives and the chart is rendered, then it will be set but the chart will not be rendered because by now the tabs (except for one) will be hidden.

    2. Your second suggestion doesn’t make sense because a tab is already automatically selected when it is dynamically added.

    d.

    Troubles with charts and tabs #72918

    Dimitar
    Participant

    Hi toquehead,

    I am sorry for my mistake regarding 2). Maybe you would have to add tabs one by one to avoid the behaviour you described in 1). Other than that, we cannot offer you any more suggestions on this matter, I am afraid.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Troubles with charts and tabs #72974

    toquehead
    Participant

    The only solution I came up with involved looking for evidence of a rendered chart (svg, canvas, or div, as the case may be) inside the ‘selected’ handler and not setting the “rendered” flag until such evidence was found. This worked, but didn’t allow me to prepare the charts in the background so they were ready when the user clicked on the tab.

    That was only the beginning of my problems though. If the window size changed, any attempt to resize/rerender the charts on non-selected tabs failed. So that means I had to queue up _any_ changes to charts on non-selected tabs and do all that work once the user clicked on the tab. Ugly.

    The solution I am going with now involves moving the contents on each tab to an off-viewport div whenever a tab is un-selected, and moving them back when it is selected. In this way, I can simply render and update the charts when I want, and they are ready without delay when the user clicks on a tab. While this container div is out of sight, it obviously can’t be visibility:hidden or display:none or jqxCharts will refuse to render.

    This works for me, but is a pain, and the process of finding something that works certainly involved some gnashing of teeth. I do wonder about some your design decisions.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.