jQWidgets Forums

Tagged: 100%, auto, chart, dynamic, size, width

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

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

Author

Chart – Dynamic width not working Posts

March 3, 2014 at 2:58 pm Chart – Dynamic width not working #50408

wcogd

Participant

Hello,

I have an issue with dynamic chart sizing. I have copied and pasted the baseline Bar series, and it works perfectly when the chart size is set using style widths set bypx, but the chart will not render using percentages. The code is below, with the non-working code commented out…

Any ideas about what I am doing wrong?

<!DOCTYPE html>
<html lang="en">
<head>
  <title id='Description'>jqxChart Bar Series Example</title>
  <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.js"></script>
  <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
  <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data
            var sampleData = [
                { Country: 'China', Population: 1347350000, Percent: 19.18},
                { Country: 'India', Population: 1210193422, Percent: 17.22},
                { Country: 'USA', Population: 313912000, Percent: 4.47},
                { Country: 'Indonesia', Population: 237641326, Percent: 3.38},
                { Country: 'Brazil', Population: 192376496, Percent: 2.74}];
            // prepare jqxChart settings
            var settings = {
                title: "Top 5 most populated countries",
                description: "Statistics for 2011",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 20, top: 5, right: 20, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        dataField: 'Country',
                        showGridLines: true,
                        flip: false
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            orientation: 'horizontal',
                            columnsGapPercent: 100,
                            toolTipFormatSettings: { thousandsSeparator: ',' },
                            valueAxis:
                            {
                                flip: true,
                                unitInterval: 100000000,
                                maxValue: 1500000000,
                                displayValueAxis: true,
                                description: '',
                                formatFunction: function (value) {
                                    return parseInt(value / 1000000);
                                }
                            },
                            series: [
                                    { dataField: 'Population', displayText: 'Population (millions)' }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <!--- this works fine:   --->
    <div='jqxChart' style="width:680px; height:400px;">
    </div>

    <!--- this does not show the chart: --->
    <!--- <div id='jqxChart' style="width:100%; height:100%;">
   </div> --->

</body>
</html>

March 3, 2014 at 5:09 pm Chart – Dynamic width not working #50416

Peter Stoev

Keymaster

Hi wcogd,

I do not see definitions for the Body and HTML tag styles. If you want HTML Element to occupy the browser window’s height, then you will have to specify that with a CSS Style. Example: http://www.jqwidgets.com/jquery-widgets-demo/mobiledemos/jqxchart/javascript_chart_column_series.htm?(android)&=fullscreen

Best Regards,
Peter Stoev

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

March 3, 2014 at 8:19 pm Chart – Dynamic width not working #50419

wcogd

Participant

Peter,

Got it, thank you!

Author

Posts

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

You must be logged in to reply to this topic.