jQuery UI Widgets › Forums › Chart › Resize Chart Dynamically

Tagged: , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Resize Chart Dynamically Posts
  • July 23, 2014 at 7:38 pm Resize Chart Dynamically #57638

    swarren
    Participant

    We’re using jqxCharts in a responsive website with a fluid layout (percentage based not fixed width). My clients found that if they have two charts size by side (each in a container of 50% width) and they shrink their window’s width (I’m guessing 99% of the time people aren’t doing this) the charts overlap because they retain their original size. Is there any way to have the charts be more responsive or is there a way to trigger a size refresh without having every chart reset (we have 20+ charts on one page [don’t get me started on that either] and redrawing all of them takes the browser a REALLY long time on some computers).

    July 24, 2014 at 5:07 am Resize Chart Dynamically #57647

    Dimitar
    Participant

    Hello swarren,

    We tested the following example for the reported behaviour in Internet Explorer 9, Firefox and Google Chrome. The charts overlap only in IE9 when the window is being resized. After the resize is complete, the charts are displayed as expected.

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // prepare chart data
            var sampleData = [
                    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
                    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
                    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
                    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
                    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
                    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
                    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
                ];

            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        dataField: 'Day',
                        showGridLines: false
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 100,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith' },
                                    { dataField: 'Erica', displayText: 'Erica' },
                                    { dataField: 'George', displayText: 'George' }
                                ]
                        }
                    ]
            };

            // select the chartContainer DIV element and render the chart.
            $('#chartContainer1').jqxChart(settings);
            $('#chartContainer2').jqxChart(settings);
        });
    </script>
</head>
<body style="background: white;">
    <div id='chartContainer1' style="width: 50%; height: 400px; float: left;">
    </div>
    <div id='chartContainer2' style="width: 50%; height: 400px; float: left;">
    </div>
</body>
</html>

    If the issue at your side persists, you can also try using jQuery Mobile’s grid layouts, which integrate with jQWidgets.

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.