jQuery UI Widgets Forums Chart Dynamic chart resize on style change (without window resize)

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 5 years, 7 months ago.

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

  • queloz
    Participant

    Hi there

    chart resizing seems to occur whenever there is a (browser-) window resize. Is there a way that the chart gets resized without resizing the window?

    In the following example a click on the button Resize calls the following function:

    		function Resize() {
    		  document.getElementById("outer").style.left="300px"; 
    		}
    

    Which changes the size of the enclosing div

    <body >
      <div id='outer' style="position: absolute; left:200px; right:200px; top:200px; bottom:200px; overflow:hidden;">
        <div id='chartContainer' style="width:100%; height:500px">
        </div> 
      </div>	
      <div>	
        <button onclick="Resize()">Resize</button> 
      </div>	
    </body>

    After the change of the size the chart should resize itself. But it doesn’t 🙁 The chart resizes itself as soon as the window is resized.

    Complete example:

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <title id='Description'>Chart with Range Column Series</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
    
                var data = [
                    { "month": "Jan", "min": -1.9, "max": 3.7, "avg": 0.2 },
                    { "month": "Feb", "min": -0.9, "max": 5.9, "avg": 1.1 },
                    { "month": "Mar", "min": 0.8, "max": 9.8, "avg": 4.9 },
                    { "month": "Apr", "min": 4.1, "max": 13.9, "avg": 8.7 },
                    { "month": "May", "min": 8.0, "max": 18.4, "avg": 13.1 },
                    { "month": "Jun", "min": 11.3, "max": 22.2, "avg": 16.6 },
                    { "month": "Jul", "min": 13.3, "max": 25.3, "avg": 18.4 },
                    { "month": "Aug", "min": 13.0, "max": 24.4, "avg": 17.6 },
                    { "month": "Sep", "min": 10.3, "max": 20.8, "avg": 14.3 },
                    { "month": "Oct", "min": 6.6, "max": 14.9, "avg": 9.2 },
                    { "month": "Nov", "min": 2.1, "max": 8.4, "avg": 4.2 },
                    { "month": "Dec", "min": -0.5, "max": 4.5, "avg": 1.5 }
                    ];
    
                var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                    var dataItem = data[itemIndex];
                    return '<DIV style="text-align:left"><b>Month: ' +
                            categoryValue + '</b><br />Min: ' +
                            dataItem.min + '°<br />Max: ' +
                            dataItem.max + '°<br />Average: ' + 
                            dataItem.avg + '°</DIV>';
                };
    
                // prepare jqxChart settings
                var settings = {
                    title: "Weather in Geneva, Switzerland",
                    description: "Climatological Information about Geneva",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    enableCrosshairs: true,
                    source: data,
                    xAxis:
                        {
                            textRotationAngle: 0,
                            dataField: 'month',
                            showTickMarks: true,
                            tickMarksInterval: 1,
                            tickMarksColor: '#888888',
                            unitInterval: 1,
                            showGridLines: true,
                            gridLinesInterval: 3,
                            gridLinesColor: '#888888'
                        },
                    colorScheme: 'scheme05',
                    seriesGroups:
                        [
                            {
                                type: 'rangecolumn',
                                columnsGapPercent: 100,
                                toolTipFormatFunction: toolTipCustomFormatFn,
                                valueAxis:
                                {
                                    unitInterval: 5,
                                    displayValueAxis: true,
                                    description: 'Temperature [C]',
                                    axisSize: 'auto',
                                    tickMarksColor: '#888888',
                                    minValue: -5,
                                    maxValue: 30
                                },
                                series: [
                                        { dataFieldTo: 'max', displayText: 'Temperature Range', dataFieldFrom: 'min', opacity: 1 }
                                    ]                        
                            },
                            {
                                type: 'spline',
                                toolTipFormatFunction: toolTipCustomFormatFn,
                                valueAxis:
                                {
                                    unitInterval: 5,
                                    displayValueAxis: false,
                                    minValue: -5,
                                    maxValue: 30
                                },
                                series: [
                                        { dataField: 'avg', displayText: 'Average Temperature', opacity: 1, lineWidth: 2 }
                                    ]
                            }
    
                        ]
                };
    
                // setup the chart
                $('#chartContainer').jqxChart(settings);
            });
    		
    		function Resize() {
    		  document.getElementById("outer").style.left="300px"; 
    		}
        </script>
    </head>
    <body >
      <div id='outer' style="position: absolute; left:200px; right:200px; top:200px; bottom:200px; overflow:hidden;">
        <div id='chartContainer' style="width:100%; height:500px">
        </div> 
      </div>	
      <div>	
        <button onclick="Resize()">Resize</button> 
      </div>	
    </body>
    </html>
    

    Thanks in advance!

    Ron.

    • This topic was modified 5 years, 7 months ago by  queloz.

    Dimitar
    Participant

    Hello Ron,

    Just call the method refresh after the resize:

    function Resize() {
        document.getElementById("outer").style.left = "300px";
        $('#chartContainer').jqxChart('refresh');
    }

    Best Regards,
    Dimitar

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


    queloz
    Participant

    Hello Dimitar

    Thanks for the super-fast answer!

    That doesn’t work for me (except for the mini example I submitted) because the change of the size-style doesn’t occur in a callback. The change of the size-style is triggered by AngularJS and there is no callback where I could call jqxChart(‘refresh’);

    Any other ideas?

    Thanks,

    Ron.


    Dimitar
    Participant

    Hi Ron,

    The resize does not need to occur in a callback – you can call refresh directly after the code for changing the size.

    Best Regards,
    Dimitar

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


    queloz
    Participant

    Hi Dimitar

    There is no code for changing the size! The size-change is triggered by AngularJS (change of property of the window-layout-manager). So the size-change has to be detected by the jQWidgets-chart itself. Any chance this could be done?

    Thanks!

    Ron.


    Dimitar
    Participant

    Hi Ron,

    The chart cannot detect changes in the div’s size and needs to be manually refreshed.

    Correct me if I am wrong (I do not know what your scenario actually is), but, no matter if AngularJS automatically resizes the div with id outer, the resize is somehow triggered by user action. I doubt that the div is resized by AngularJS randomly and without any indication from or to the user.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.