Bootstrap - Fluid - not working - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 2 months ago.

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

Author

Bootstrap – Fluid – not working Posts

October 1, 2014 at 2:37 pm Bootstrap – Fluid – not working #60467

Participant

I can not get the charts to work with Bootstrap, it will not display the chart. Pleas reply ASAP as I need to have this work with Bootstrap.

Please reply ASAP as I need to get this to work – Thanks.

If you take the fluid demo at

add this to <head>


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Enclose chart in bootstrap DIVS


   <!-- Bootstrap -->
    <div class='container'>
        <div class='row'>
            <div class='col-md-4'>
                <div id='chartContainer' style="width:80%; height:50%;"></div>
              </div>
            <div class='col-md-4'>Middle</div>
            <div class='col-md-4'>Right</div>
        </div>
    </div>

then the chart does not render

October 1, 2014 at 2:52 pm Bootstrap – Fluid – not working #60471

Peter Stoev

Keymaster

Hi kc,

I would suggest you to provide a full sample which illustrates the reported behavior so people in this forum would be able to help you.

Best Regards,
Peter Stoev

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

October 1, 2014 at 5:41 pm Bootstrap – Fluid – not working #60487

Participant

Here is a modified version of jqxwidgets/demos/jqxchart/javascript_chart_fluid_size.htm with bootstrap scenario:


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxChart Fluid Size Example. The width and height of the Chart in this demo are in Percentages.</title>
    <title id='Description'>jqxChart Themes Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <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/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <style>

    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

        html, body {
            width: 100%; height: 100%; overflow: hidden; padding: 0; margin: 0;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Country' },
                    { name: 'GDP' },
                    { name: 'DebtPercent' },
                    { name: 'Debt' }
                ],
                url: '../sampledata/gdp_dept_2010.txt'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error);} });

            // prepare jqxChart settings
            var settings = {
                title: "Economic comparison",
                description: "GDP and Debt in 2010",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                    {
                        dataField: 'Country',
                        showGridLines: true
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 50,
                            valueAxis:
                            {
                                unitInterval: 5000,
                                displayValueAxis: true,
                                description: 'GDP & Debt per Capita($)'
                            },
                            series: [
                                    { dataField: 'GDP', displayText: 'GDP per Capita'},
                                    { dataField: 'Debt', displayText: 'Debt per Capita' }
                                ]
                        },
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 10,
                                displayValueAxis: false,
                                description: 'Debt (% of GDP)'
                            },
                            series: [
                                    { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
                                ]
                        }

                    ]
            };

            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <!-- Bootstrap -->
    <style>
        .col-md-4 {border:1px solid black}
    </style>
    <div class='container'>
        <div class='row'>
            <div class='col-md-4'>
                    <div id='chartContainer' style="width:80%; height:50%;"></div>
            </div>
            <div class='col-md-4'>Middle</div>
            <div class='col-md-4'>Right</div>
        </div>
    </div>
</body>
</html>

— END —

Here is the diff of bootstrap addition

>     <title id='Description'>jqxChart Themes Example</title>
>     <meta name="viewport" content="width=device-width, initial-scale=1">
>
>     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
>
>
5a12,13
>
>
6a15
>
11a21,23
>
>     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
>
80d91
<             // setup the chart
86,87c97,109
<       <div id='chartContainer' style="width:80%; height:50%;">
<       </div>
---
>     <!-- Bootstrap -->
>     <style>
>         .col-md-4 {border:1px solid black}
>     </style>
>     <div class='container'>
>         <div class='row'>
>             <div class='col-md-4'>
>                   <div id='chartContainer' style="width:80%; height:50%;"></div>
>             </div>
>             <div class='col-md-4'>Middle</div>
>             <div class='col-md-4'>Right</div>
>         </div>
>     </div>

October 7, 2014 at 8:10 am Bootstrap – Fluid – not working #60745

Peter Stoev

Keymaster

The problem in this code is that your Chart’s height is in percentages, but your column, row and container does not have height i.e it is auto which means that you actually you have: I want my chart to be 50% of my container which has automatic height that depends on its content’s height. The solution is very simple. You will have to set height of the containers.

Ex:

<body class='default'>
    <!-- Bootstrap -->
    <style>
        .col-md-4 {border:1px solid black}
        body, html, .container, .row, .col-md-4 {
        height: 100%;
        }
    </style>
    <div class='container'>
        <div class='row'>
            <div class='col-md-4'><div id='chartContainer' style="width:80%; height:50%;"></div></div>
            <div class='col-md-4'>Middle</div>
            <div class='col-md-4'>Right</div>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.