jQuery UI Widgets Forums Chart Jqxtabs width for resizing charts dynamically

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

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

  • sonicviz
    Participant

    I have a wordpress plugin using Jqxtabs display.
    One tab has a number of charts in vertical display in the tab panel, one after the other.

    I need to dynamically resize the charts based on device – mobile vs desktop, or small screen vs larger screen.

    // select the chartContainer DIV element and render the chart.
    jQuery (\”#chartContainer\”).jqxChart(settings);

    console.log(‘Tab width = ‘ + jQuery(‘#jqxTabs’).jqxTabs(‘width’) + ‘ window.innerHeight: ‘ + window.innerHeight + ‘ window.innerWidth: ‘ + window.innerWidth);
    //Dynamic resize chart
    var chartHeight = (window.innerWidth -50) / 1.33;
    jQuery (\”#chartContainer\”).height(chartHeight);

    but I get
    Tab width = 100% window.innerHeight: 943 window.innerWidth: 543

    So I can’t do it because the tab width is returning 100% instead of a pixel value.
    Is there any way to reliably detect the width of a tab widget so I can then dynamically resize charts within to to the correct size and ratio?

    Another issue:
    <div id=”tab-charts” style=”margin-left: 15px;”><h3 class=”bwt_title”>Select Date Range</h3><script>

    Where is style=”margin-left: 15px overridden in jQX widgets for tabs?
    I’d like to maximise the charts to full width screen on mobile and need to drop this to 1 pixel, but can’t find where to override it.

    • This topic was modified 8 years, 3 months ago by  sonicviz.

    sonicviz
    Participant

    Scratch the margin-left issue – found it.

    Still curious about the tab width though.
    I can get around it using 51degrees screen width detection etc but curious.


    Dimitar
    Participant

    Hello sonicviz,

    You can try setting the width of the charts to ‘100%’ (in the HTML).

    Best Regards,
    Dimitar

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


    sonicviz
    Participant

    Hi Dimitar,

    Yes, thanks I already did that.

    My questions was related to Tab widget width, as that is needed to calculate the correct chart height to go with the selected aspect ratio.


    Dimitar
    Participant

    Hi sonicviz,

    You can get the jqxTabs width in pixels with jQuery’s .width().

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.