array(10) {
  [0]=>
  int(18)
  [1]=>
  int(180)
  [2]=>
  string(22) "Corones metropolitanes"
  [3]=>
  int(1)
  [4]=>
  string(9) "Barcelona"
  [5]=>
  int(1)
  [6]=>
  NULL
  [7]=>
  string(11) "40.56900286"
  [8]=>
  string(11) "17.52810368"
  [9]=>
  string(11) "22.79235317"
}
string(4) "<br>"
array(10) {
  [0]=>
  int(18)
  [1]=>
  int(180)
  [2]=>
  string(22) "Corones metropolitanes"
  [3]=>
  int(2)
  [4]=>
  string(9) "Resta AMB"
  [5]=>
  int(2)
  [6]=>
  NULL
  [7]=>
  string(11) "31.61931914"
  [8]=>
  string(11) "14.36044901"
  [9]=>
  string(11) "22.55908081"
}
string(4) "<br>"
array(10) {
  [0]=>
  int(18)
  [1]=>
  int(180)
  [2]=>
  string(22) "Corones metropolitanes"
  [3]=>
  int(3)
  [4]=>
  string(9) "Total AMB"
  [5]=>
  int(3)
  [6]=>
  NULL
  [7]=>
  string(11) "37.08994917"
  [8]=>
  string(11) "16.08507748"
  [9]=>
  string(11) "22.65702063"
}
string(4) "<br>"
string(6) "attr: "
object(AttributeAmbits)#13 (3) {
  ["name":protected]=>
  string(5) "Ambit"
  ["list_vars":protected]=>
  array(7) {
    [0]=>
    object(VariableAttribute)#11 (2) {
      ["name":"VariableAttribute":private]=>
      string(9) "order_amb"
      ["show":"VariableAttribute":private]=>
      bool(false)
    }
    [1]=>
    object(VariableAttribute)#16 (2) {
      ["name":"VariableAttribute":private]=>
      string(2) "id"
      ["show":"VariableAttribute":private]=>
      bool(false)
    }
    [2]=>
    object(VariableAttribute)#15 (2) {
      ["name":"VariableAttribute":private]=>
      string(10) "name_ambit"
      ["show":"VariableAttribute":private]=>
      bool(false)
    }
    [3]=>
    object(VariableAttribute)#17 (2) {
      ["name":"VariableAttribute":private]=>
      string(11) "order_ambit"
      ["show":"VariableAttribute":private]=>
      bool(false)
    }
    [4]=>
    object(VariableAttribute)#18 (2) {
      ["name":"VariableAttribute":private]=>
      string(14) "name_nom_ambit"
      ["show":"VariableAttribute":private]=>
      bool(true)
    }
    [5]=>
    object(VariableAttribute)#19 (2) {
      ["name":"VariableAttribute":private]=>
      string(12) "id_nom_ambit"
      ["show":"VariableAttribute":private]=>
      bool(false)
    }
    [6]=>
    object(VariableAttribute)#20 (2) {
      ["name":"VariableAttribute":private]=>
      string(7) "acronym"
      ["show":"VariableAttribute":private]=>
      bool(false)
    }
  }
  ["iterator":protected]=>
  NULL
}
string(4) "<br>"
string(5) "var: "
object(VariableAttribute)#11 (2) {
  ["name":"VariableAttribute":private]=>
  string(9) "order_amb"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(4) "<br>"
object(VariableAttribute)#11 (2) {
  ["name":"VariableAttribute":private]=>
  string(9) "order_amb"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(5) "var: "
object(VariableAttribute)#16 (2) {
  ["name":"VariableAttribute":private]=>
  string(2) "id"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(4) "<br>"
object(VariableAttribute)#16 (2) {
  ["name":"VariableAttribute":private]=>
  string(2) "id"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(5) "var: "
object(VariableAttribute)#15 (2) {
  ["name":"VariableAttribute":private]=>
  string(10) "name_ambit"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(4) "<br>"
object(VariableAttribute)#15 (2) {
  ["name":"VariableAttribute":private]=>
  string(10) "name_ambit"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(5) "var: "
object(VariableAttribute)#17 (2) {
  ["name":"VariableAttribute":private]=>
  string(11) "order_ambit"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(4) "<br>"
object(VariableAttribute)#17 (2) {
  ["name":"VariableAttribute":private]=>
  string(11) "order_ambit"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(5) "var: "
object(VariableAttribute)#18 (2) {
  ["name":"VariableAttribute":private]=>
  string(14) "name_nom_ambit"
  ["show":"VariableAttribute":private]=>
  bool(true)
}
string(4) "<br>"
object(VariableAttribute)#18 (2) {
  ["name":"VariableAttribute":private]=>
  string(14) "name_nom_ambit"
  ["show":"VariableAttribute":private]=>
  bool(true)
}
string(5) "var: "
object(VariableAttribute)#19 (2) {
  ["name":"VariableAttribute":private]=>
  string(12) "id_nom_ambit"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(4) "<br>"
object(VariableAttribute)#19 (2) {
  ["name":"VariableAttribute":private]=>
  string(12) "id_nom_ambit"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(5) "var: "
object(VariableAttribute)#20 (2) {
  ["name":"VariableAttribute":private]=>
  string(7) "acronym"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(4) "<br>"
object(VariableAttribute)#20 (2) {
  ["name":"VariableAttribute":private]=>
  string(7) "acronym"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
int(4)
int(1)
array(10) {
  [0]=>
  int(18)
  [1]=>
  int(180)
  [2]=>
  string(22) "Corones metropolitanes"
  [3]=>
  int(1)
  [4]=>
  string(9) "Barcelona"
  [5]=>
  int(1)
  [6]=>
  NULL
  [7]=>
  string(11) "40.56900286"
  [8]=>
  string(11) "17.52810368"
  [9]=>
  string(11) "22.79235317"
}
string(4) "<br>"
array(10) {
  [0]=>
  int(18)
  [1]=>
  int(180)
  [2]=>
  string(22) "Corones metropolitanes"
  [3]=>
  int(2)
  [4]=>
  string(9) "Resta AMB"
  [5]=>
  int(2)
  [6]=>
  NULL
  [7]=>
  string(11) "31.61931914"
  [8]=>
  string(11) "14.36044901"
  [9]=>
  string(11) "22.55908081"
}
string(4) "<br>"
array(10) {
  [0]=>
  int(18)
  [1]=>
  int(180)
  [2]=>
  string(22) "Corones metropolitanes"
  [3]=>
  int(3)
  [4]=>
  string(9) "Total AMB"
  [5]=>
  int(3)
  [6]=>
  NULL
  [7]=>
  string(11) "37.08994917"
  [8]=>
  string(11) "16.08507748"
  [9]=>
  string(11) "22.65702063"
}
string(4) "<br>"
string(6) "attr: "
object(AttributeAmbits)#13 (3) {
  ["name":protected]=>
  string(5) "Ambit"
  ["list_vars":protected]=>
  array(7) {
    [0]=>
    object(VariableAttribute)#11 (2) {
      ["name":"VariableAttribute":private]=>
      string(9) "order_amb"
      ["show":"VariableAttribute":private]=>
      bool(false)
    }
    [1]=>
    object(VariableAttribute)#16 (2) {
      ["name":"VariableAttribute":private]=>
      string(2) "id"
      ["show":"VariableAttribute":private]=>
      bool(false)
    }
    [2]=>
    object(VariableAttribute)#15 (2) {
      ["name":"VariableAttribute":private]=>
      string(10) "name_ambit"
      ["show":"VariableAttribute":private]=>
      bool(false)
    }
    [3]=>
    object(VariableAttribute)#17 (2) {
      ["name":"VariableAttribute":private]=>
      string(11) "order_ambit"
      ["show":"VariableAttribute":private]=>
      bool(false)
    }
    [4]=>
    object(VariableAttribute)#18 (2) {
      ["name":"VariableAttribute":private]=>
      string(14) "name_nom_ambit"
      ["show":"VariableAttribute":private]=>
      bool(true)
    }
    [5]=>
    object(VariableAttribute)#19 (2) {
      ["name":"VariableAttribute":private]=>
      string(12) "id_nom_ambit"
      ["show":"VariableAttribute":private]=>
      bool(false)
    }
    [6]=>
    object(VariableAttribute)#20 (2) {
      ["name":"VariableAttribute":private]=>
      string(7) "acronym"
      ["show":"VariableAttribute":private]=>
      bool(false)
    }
  }
  ["iterator":protected]=>
  int(7)
}
string(4) "<br>"
string(5) "var: "
object(VariableAttribute)#11 (2) {
  ["name":"VariableAttribute":private]=>
  string(9) "order_amb"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(4) "<br>"
object(VariableAttribute)#11 (2) {
  ["name":"VariableAttribute":private]=>
  string(9) "order_amb"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(5) "var: "
object(VariableAttribute)#16 (2) {
  ["name":"VariableAttribute":private]=>
  string(2) "id"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(4) "<br>"
object(VariableAttribute)#16 (2) {
  ["name":"VariableAttribute":private]=>
  string(2) "id"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(5) "var: "
object(VariableAttribute)#15 (2) {
  ["name":"VariableAttribute":private]=>
  string(10) "name_ambit"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(4) "<br>"
object(VariableAttribute)#15 (2) {
  ["name":"VariableAttribute":private]=>
  string(10) "name_ambit"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(5) "var: "
object(VariableAttribute)#17 (2) {
  ["name":"VariableAttribute":private]=>
  string(11) "order_ambit"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(4) "<br>"
object(VariableAttribute)#17 (2) {
  ["name":"VariableAttribute":private]=>
  string(11) "order_ambit"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(5) "var: "
object(VariableAttribute)#18 (2) {
  ["name":"VariableAttribute":private]=>
  string(14) "name_nom_ambit"
  ["show":"VariableAttribute":private]=>
  bool(true)
}
string(4) "<br>"
object(VariableAttribute)#18 (2) {
  ["name":"VariableAttribute":private]=>
  string(14) "name_nom_ambit"
  ["show":"VariableAttribute":private]=>
  bool(true)
}
string(5) "var: "
object(VariableAttribute)#19 (2) {
  ["name":"VariableAttribute":private]=>
  string(12) "id_nom_ambit"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(4) "<br>"
object(VariableAttribute)#19 (2) {
  ["name":"VariableAttribute":private]=>
  string(12) "id_nom_ambit"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(5) "var: "
object(VariableAttribute)#20 (2) {
  ["name":"VariableAttribute":private]=>
  string(7) "acronym"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
string(4) "<br>"
object(VariableAttribute)#20 (2) {
  ["name":"VariableAttribute":private]=>
  string(7) "acronym"
  ["show":"VariableAttribute":private]=>
  bool(false)
}
int(4)
int(1)
<!doctype html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<title>Sistema d'Indicadors Metropolitans de BArcelona - SIMBA</title>
    <link rel='stylesheet' id='googlefont-atkinson-hyperlegible-css' href='https://fonts.googleapis.com/css?family=Atkinson+Hyperlegible%3A300italic%2C400italic%2C600italic%2C700italic%2C800italic%2C700%2C300%2C600%2C800%2C400&#038;subset=latin%2Ccyrillic-ext%2Cgreek-ext%2Cvietnamese%2Clatin-ext&#038;ver=5.4.15' type='text/css' media='all' />
    <link rel='stylesheet' id='googlefont-open-sans-css' href='https://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C700italic%2C800italic%2C700%2C300%2C600%2C800%2C400&#038;subset=latin%2Ccyrillic-ext%2Cgreek-ext%2Cvietnamese%2Clatin-ext&#038;ver=5.4.15' type='text/css' media='all' />

    <link rel="stylesheet" href="css_files/ap_contact.css" type="text/css"><link rel="stylesheet" href="css_files/ap_categories.css" type="text/css"><link rel="stylesheet" href="css_files/ap_form_indicator.css" type="text/css"><link rel="stylesheet" href="css_files/ap_main.css" type="text/css"><link rel="stylesheet" href="css_files/ap_user.css" type="text/css"><link rel="stylesheet" href="css_files/import.css" type="text/css"><link rel="stylesheet" href="css_files/main.css" type="text/css"><link rel="stylesheet" href="css_files/cookiePolicy.css" type="text/css">
<script src="javascript/jquery-ui.min.js"></script><script src="javascript/general.js"></script>
<!--<script src="javascript/exportCSV.js"></script>-->
<script src="javascript/import.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="javascript/cookies.js"></script>

<script type='text/javascript'>        $(document).ready(function(){
            //mostrar gr�fic
            $('div#ico_grafic_5, img#ico_grafic_5').click(function (){
                if (typeof chart !== 'undefined')
                {
                    chart.destroy();
                }
                $('.chart_div').css("display", "none");
                $('#box_result').css("display", "none");
                $('#chart_div_5').css("display", "grid");
                show_chart_5("none");
                $('#chart_div_5').css("height", "400px");
                $('#chart_div_5').css("width", "100%");
                $('.download_canvas').css("display", "grid");
                $('.change_order_var').css("display", "none");
                $('div#ico_grafic_1').css("display", "grid");
                $('.link_excel').css("display", "none");
            });

            function createImage_5() {
                //get the original data
                var canvas = $('#chart_canvas_5');
                var ctx = canvas[0].getContext("2d");

                //create new canvas with the same dimensions as the original
                var newCanvas = document.createElement('canvas');
                newCanvas.width = canvas[0].width;
                newCanvas.height = canvas[0].height;
                var newCtx = newCanvas.getContext("2d");

                //fill the new canvas with white background
                newCtx.fillStyle = "white";
                newCtx.fillRect(0, 0, newCanvas.width, newCanvas.height);

                //draw the original canvas onto the new canvas
                newCtx.drawImage(canvas[0], 0, 0, newCanvas.width, newCanvas.height);

                //add text to the new canvas
                newCtx.font = '15px "Atkinson Hyperlegible", "Open Sans", "Tahoma"';
                newCtx.fillStyle = "black";
                newCtx.fillText("Font: https://www.indicadors.institutmetropoli.cat", 10, newCanvas.height - 30);
                newCtx.fillText("\u00AE Institut Metr\u00F2poli", 10, newCanvas.height - 10);

                //convert the new canvas to an image
                var imageToData = newCanvas.toDataURL("image/png");
                var link = document.createElement('a');
                link.href = imageToData;
                link.download = "8287_id_1704_type_5.png";
                link.click();
            }

            $('#download_chart').click(function (){
                if ($('#chart_div_5').css("display") == "grid")
                {
                    createImage_5();
                }
            });

            function show_chart_5(stacking_val)
            {
                var canvas = document.getElementById('chart_canvas_5');
                var parent = canvas.parentNode;
                var newCanvas = document.createElement('canvas');
                newCanvas.id = 'chart_canvas_5';
                newCanvas.width = canvas.width;
                newCanvas.height = canvas.height;

                parent.removeChild(canvas);
                parent.appendChild(newCanvas);

                var ctx = newCanvas.getContext('2d');
                var chart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ["Barcelona","Resta AMB","Total AMB"],
                        datasets: [{"label":"Unipersonal","data":[40.56900286,31.61931914,37.08994917]},{"label":"Llars sense infants dependents","data":[17.52810368,14.36044901,16.08507748]},{"label":"Llars amb infants dependents","data":[22.79235317,22.55908081,22.65702063]}]                    },
                    options: {
                        maintainAspectRatio: false,
                        layout: {
                            padding: 20
                        },
                                                scales: {
                            y: {
                                grid: {
                                    display: true
                                },
                                ticks: {
                                    color: 'black',
                                    font: {
                                        family: '"Atkinson Hyperlegible", "Open Sans", "Tahoma"'
                                    }
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                },
                                ticks: {
                                    color: 'black',
                                    font: {
                                        family: '"Atkinson Hyperlegible", "Open Sans", "Tahoma"'
                                    }
                                }
                            }
                        },
                                                plugins: {
                            legend: {
                                display: true,
                                position: 'bottom',
                                labels: {
                                    color: 'black',
                                    font: {
                                        family: '"Atkinson Hyperlegible", "Open Sans", "Tahoma"'
                                    }
                                }
                            },
                            title: {
                                display: true,
                                text: 'Proporció de renda destinada a despeses d\'habitatge per tipus de llar',
                                color: 'black',
                                font: {
                                    family: '"Atkinson Hyperlegible", "Open Sans", "Tahoma"'
                                }
                            }
                        }
                    }
                });
            }
        });
                $(document).ready(function(){
            //mostrar gr�fic
            $('div#ico_grafic_1, img#ico_grafic_1').click(function (){
                if (typeof chart !== 'undefined')
                {
                    chart.destroy();
                }
                $('.chart_div').css("display", "none");
                $('#box_result').css("display", "none");
                $('#chart_div_1').css("display", "grid");
                show_chart_1("none");
                $('#chart_div_1').css("height", "400px");
                $('#chart_div_1').css("width", "100%");
                $('.download_canvas').css("display", "grid");
                $('.change_order_var').css("display", "none");
                $('div#ico_grafic_5').css("display", "grid");
                $('.link_excel').css("display", "none");
            });

            function createImage_1() {
                //get the original data
                var canvas = $('#chart_canvas_1');
                var ctx = canvas[0].getContext("2d");

                //create new canvas with the same dimensions as the original
                var newCanvas = document.createElement('canvas');
                newCanvas.width = canvas[0].width;
                newCanvas.height = canvas[0].height;
                var newCtx = newCanvas.getContext("2d");

                //fill the new canvas with white background
                newCtx.fillStyle = "white";
                newCtx.fillRect(0, 0, newCanvas.width, newCanvas.height);

                //draw the original canvas onto the new canvas
                newCtx.drawImage(canvas[0], 0, 0, newCanvas.width, newCanvas.height);

                //add text to the new canvas
                newCtx.font = '15px "Atkinson Hyperlegible", "Open Sans", "Tahoma"';
                newCtx.fillStyle = "black";
                newCtx.fillText("Font: https://www.indicadors.institutmetropoli.cat", 10, newCanvas.height - 30);
                newCtx.fillText("\u00AE Institut Metr\u00F2poli", 10, newCanvas.height - 10);

                //convert the new canvas to an image
                var imageToData = newCanvas.toDataURL("image/png");
                var link = document.createElement('a');
                link.href = imageToData;
                link.download = "8287_id_1704_type_1.png";
                link.click();
            }

            $('#download_chart').click(function (){
                if ($('#chart_div_1').css("display") == "grid")
                {
                    createImage_1();
                }
            });

            function show_chart_1(stacking_val)
            {
                var canvas = document.getElementById('chart_canvas_1');
                var parent = canvas.parentNode;
                var newCanvas = document.createElement('canvas');
                newCanvas.id = 'chart_canvas_1';
                newCanvas.width = canvas.width;
                newCanvas.height = canvas.height;

                parent.removeChild(canvas);
                parent.appendChild(newCanvas);

                var ctx = newCanvas.getContext('2d');
                var chart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ["Unipersonal","Llars sense infants dependents","Llars amb infants dependents"],
                        datasets: [{"label":"Barcelona","data":[40.56900286,17.52810368,22.79235317]},{"label":"Resta AMB","data":[31.61931914,14.36044901,22.55908081]},{"label":"Total AMB","data":[37.08994917,16.08507748,22.65702063]}]                    },
                    options: {
                        maintainAspectRatio: false,
                        layout: {
                            padding: 20
                        },
                                                scales: {
                            y: {
                                grid: {
                                    display: true
                                },
                                ticks: {
                                    color: 'black',
                                    font: {
                                        family: '"Atkinson Hyperlegible", "Open Sans", "Tahoma"'
                                    }
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                },
                                ticks: {
                                    color: 'black',
                                    font: {
                                        family: '"Atkinson Hyperlegible", "Open Sans", "Tahoma"'
                                    }
                                }
                            }
                        },
                                                plugins: {
                            legend: {
                                display: true,
                                position: 'bottom',
                                labels: {
                                    color: 'black',
                                    font: {
                                        family: '"Atkinson Hyperlegible", "Open Sans", "Tahoma"'
                                    }
                                }
                            },
                            title: {
                                display: true,
                                text: 'Proporció de renda destinada a despeses d\'habitatge per tipus de llar',
                                color: 'black',
                                font: {
                                    family: '"Atkinson Hyperlegible", "Open Sans", "Tahoma"'
                                }
                            }
                        }
                    }
                });
            }
        });
        </script><!-- datatables includes -->
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.0/css/dataTables.dataTables.css" />
<script src="https://cdn.datatables.net/2.0.0/js/dataTables.js"></script>
<script src="https://cdn.rawgit.com/ashl1/datatables-rowsgroup/fbd569b8768155c7a9a62568e66a64115887d7d0/dataTables.rowsGroup.js"></script>
</head>
<body>
<div id="cookie-popup">
    <div id="cookie-popup-text">
        <p>Aquesta web utilitza cookies no exceptuades, cookies pròpies i de tercers a fi d'identificar les preferències i hàbits de navegació dels usuaris i per a oferir una millor experiència.</p>
    </div>
    <div id="cookie-popup-buttons">
        <button id="accept-cookies">Acceptar cookies</button>
        <button id="reject-cookies">Rebutjar cookies</button>
        <button id="config-cookies">Configurar cookies</button>
    </div>
</div>

<div id="modal-config-cookies" class="modalDialog">
    <div id="cookie-modal-content">
        <a href='#close' title='Close' class='close'>X</a>
        <div class="cookie-title">
            <h2>Visió general de privacitat</h2>
        </div>
        <div class="cookie-main">
            <p>Aquesta web utilitza cookies no exceptuades, cookies pròpies i de tercers a fi d'identificar les preferències i hàbits de navegació dels usuaris i per a oferir una millor experiència.</p>
            <p>Pot consultar les polítiques de <a href="#">cookies en aquest enllaç</a>.</p>
            <p>A continuació, pot seleccionar les cookies que s'habilitaran en la web en funció de les seves preferències.</p>
            <div class="cookie-tecniques">
                <h3>Cookies técniques</h3>
                <div class="cookie-config-item">
                    <p>Aquestes cookies són imprescindibles per al correcte funcionament de la web. Controlen l'idioma triat de la navegació i les preferències sobre les cookies de la web dels indicadors de l'Institut Metròpoli.</p>
                    <div class="switch-button">
                        <div id="fondo-gris">
                            <div id="circulo"></div>
                        </div>
                    </div>
                </div>
                <h3>Cookies analítiques</h3>
                <div class="cookie-config-item">
                    <p>Cookies que controlen les estadístiques d'accès a la web dels indicadors de l'Institut Metròpoli.</p>
                    <div class="switch-button">
                        <input type="checkbox" name="cookies-analitiques" id="switch-label" class="switch-button__checkbox">
                        <label for="switch-label" class="switch-button__label"></label>
                    </div>
                </div>
            </div>
        </div>
        <div class="cookie-footer">
            <button id="activate-cookies">Activar-les totes</button>
            <button id="save-changes-cookie">Guardar els canvis</button>
        </div>
    </div>
</div><script>
            $('#cookiesPopup').css('display', 'flex');
            </script><div class="loader"></div>
<div class="container">
		<header class="header">
		<div class="phone-header">
			<div class="icon_IERMB"> 
				<a target="_blank" href='https://www.institutmetropoli.cat'><img src="/images/im_logo.png" height="60"></a>
			</div>
			<div class="simba-title">
				<div class="just-simba">Sistema d'Indicadors Metropolitans de Barcelona</div>
			</div>
		</div>
	</header>
	<div class="bar_buttons_main_menu"> 
<div class="buttons_area">
<form name="main_menu" method="GET">
<a href='?ap=0'>Inici</a><a href='?ap=1'>Llista indicadors</a><a href='?ap=2'>Contacte</a></form></div><div class='menu_user'><a class='login-text-menu' href='index.php?ap=3'>Iniciar sessió</a><a class='login-with-phone' href='index.php?ap=3'><img src='/images/user-pen-svgrepo-com.svg' width='25px' height='25px'></a></div></div>
<div class="introduction-container">
	<div class="image-bcn">
		<img src="/images/bcn-1.jpeg" height="200">
		<h2>SIMBA</h2>
	</div>
	<div class="introduction-text">
		<p>Descubre la vitalidad del Área Metropolitana de Barcelona a través de nuestra plataforma de indicadores. Desde la economía hasta la calidad de vida, te ofrecemos una visión completa para entender y apreciar esta dinámica región. ¡Explora y conéctate con tu entorno de manera informada!</p>
		<h2>Sistema d'Indicadors </br> Metropolitans de Barcelona</h2>
	</div>
</div>	<div class="main_body">
		<div id='general-structure'><form name='indicator' id='indicator' method='POST' action='index.php?ap=0&id_ind=1704&id_cat=549'><div id='form-header'><div class='category-title'>Proporció de renda destinada a despeses d'habitatge per tipus de llar</div><div class='description-and-metodology' onclick='toggleDescription()'><div class='arrow-icon'>➤</div>Descripció i metodologia<div class='hidden-description-and-metodology'><div class='description'>Descripció: Proporció mitjana de la renda anual (neta) de les llars que es destina a les despeses fixes de l'habitatge, segons tipus de llar.</br></br></div><div class='metodology'>Metodologia: L'indicador es calcula dividint les despeses anuals totals de l'habitatge menys qualsevol transferència social destinada a habitatge (numerador) i els ingressos anuals totals disponibles a la llar menys qualsevol transferència social destinada a habitatge (denominador). Es comptabilitzen com despeses de l'habitatge el lloguer o els interessos de la hipoteca (en cas de ser propietat amb pagaments pendents) i altres despeses associades (aigua, electricitat, gas, comunitat, assegurances, taxes municipals).  Es consideren llars amb menors dependents les llars amb menors de 18 anys i les llars amb persones fins a 24 anys, residents amb els seus progenitors, dels quals en depenen econòmicament. <br>S'informa a nivell d'individus.</div></div></div></div><div class='form_ind_body' id='form_select'><div class='ambit2'><div class='title_grp' id='title-0'>Àmbits territorials </div></div><div class='grp'><div class='title_grp' id='title-1'>Temporalitat</div></div><div class='variables2'><div class='title_grp' id='title-2'>Tipus de llar</div></div><div class='options2'><div class='title_grp' id='title-3'>Opcions </div></div><div class='unroll_all_parameters'><img src='./images/arrows/double-arrow-down-svgrepo-com.png' id='double_arrow_unroll' title='Desplegar totes les opcions'></div><div class='form_ind_bottons'><div class='group_buttons'><div class='input'><div class='col2'><input type='submit'  name='submit' id='submit' value='Visualitza' onclick="checkForm(true);return false;"></div></div></a></div><div id='openModal' class='modalDialog'><div><a href='#close' title='Close' class='close'>X</a><h2 id='h2-modal'></h2><p id='p-modal'></pid></div></div></div></div><div id='hidden-parameters'><div class='hidden-div' id='parameters-0'><div class='hidden-structure'><div class='hidden_title_select'>Àmbits territorials</div><div class='inner-ambit-structure'><div class='sel_ambit'><div class='input'><div class='col1'>Selecciona l'unitat territorial:</div><div class='col2'><select name='ambit_sel' id='ambit_sel_id' disabled><option value='180'>Corones metropolitanes</option></select></div></div></div><div class='structure_ambits'><div class='sel_nom_ambits'><div class='input ambit_180' id='nom_ambits_select' style='display:block'><div class='col2'><select name='nom_ambit_180[]' id='nom_ambit_180' class='input_sel_nom_ambits' multiple="multiple"></select></div></div></div><div class='bottons_order'><div class='input'><div class='col2'><input type='button'  name='btn_ambit_add' id='btn_ambit_add' value='>' class='btn_change_order' style='' title="Afegeix els elements seleccionats a la llista"></div></div><div class='input'><div class='col2'><input type='button'  name='btn_ambit_remove' id='btn_ambit_remove' value='<' class='btn_change_order' style='' title="Treu els elements seleccionats de la llista"></div></div><div class='input'><div class='col2'><input type='button'  name='btn_ambit_add_all' id='btn_ambit_add_all' value='>>' class='btn_change_order' style='' title="Afegeix tots els elements a la llista"></div></div><div class='input'><div class='col2'><input type='button'  name='btn_ambit_remove_all' id='btn_ambit_remove_all' value='<<' class='btn_change_order' style='' title="Treu tots els elements de la llista"></div></div></div><div class='ambits_selected'><div class='input'><div class='col1'>Àmbits seleccionats</div><div class='col2'><select name='sel_ambits[]' id='sel_ambit' multiple="multiple"><option value='am_180_1' selected>Corones metropolitanes-Barcelona</option><option value='am_180_2' selected>Corones metropolitanes-Resta AMB</option><option value='am_180_3' selected>Corones metropolitanes-Total AMB</option></select></div></div></div><div class='ambits_options'><div class='input show_codes_hidden'><div class='col1'>Mostrar unitats territorials: </div><div class='col2'><input type='checkbox'  name='show_acronym_ambit' id='show_acronym_ambit'></div></div><div class='input show_codes_hidden'><div class='col1'>Mostrar codis dels Àmbits: </div><div class='col2'><input type='checkbox'  name='show_codes_ambit' id='show_codes_ambit'></div></div></div></div></div></div></div><div class='hidden-div' id='parameters-1'><div id='temporality2' class='hidden-structure'><div class='hidden_title_select'>Temporalitat</div><div id='temporality-structure'><div class='input'><div class='col1'>Anys</div><div class='col2'><select name='anys[]' id='anys' multiple="multiple"><option value='-1'>Tots</option><option value='2022' selected>2022-2023</option><option value='2021'>2021-2022</option><option value='2020'>2020-2021</option><option value='2019'>2019-2020</option><option value='2018'>2018-2019</option><option value='2017'>2017-2018</option><option value='2016'>2016-2017</option></select></div></div></div></div></div><div class='hidden-div' id='parameters-2'><div id='var_0' class='hidden-structure'><div class='hidden_title_select'>Tipus de llar</div><div class='input'><div class='col1'>Tipus de llar</div><div class='col2'><select name='var_var[]' id='var_var' class='Tipus de llar' multiple="multiple"><option value='1' selected>Unipersonal</option><option value='2' selected>Llars sense infants dependents</option><option value='3' selected>Llars amb infants dependents</option></select></div></div></div></div><div class='hidden-div' id='parameters-3'><div id='order_elems' class='hidden-structure'><div class='hidden_title_select'>Opcions de visualització</div><table class='order-table'><tr><td class ='swap-all-cell'><button type='button' id='swap' class='btn-swap' title='Intercanviar files per columnes'>                            <svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="15px" viewBox="0 0 248.04 248.04" xml:space="preserve" stroke="#000000" stroke-width="0.00248043" transform="matrix(1, 0, 0, 1, 0, 0)rotate(0)"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"> <g> <polygon points="152.057,28.285 171.473,47.702 47.703,47.702 47.703,171.475 28.285,152.057 0,180.342 67.703,248.043 135.403,180.342 107.121,152.057 87.703,171.475 87.703,87.702 171.475,87.702 152.057,107.121 180.341,135.404 248.042,67.702 180.341,0 "/> </g> </g></svg>
                            </button></td><th colspan='3' class='col-headers'><ul id='order-columns'><li class='col-header'>Any<div class='swap-content'>                                    <button type="button" class="swapToRow swapChange swapButtons" title="Passar a fila">
                                        <svg width="15px" height="15px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title/><g id="Complete"><g id="arrow-down-left"><g><polyline data-name="Right" fill="none" id="Right-2" points="5.3 11.6 5.3 18.7 12.4 18.7" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="18.7" x2="6.9" y1="5.3" y2="17.1"/></g></g></g></svg>
                                    </button>
                                    <button type="button" class="swapDown swapButtons" title="Desplaçar a sota">
                                        <svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z" fill="#0F0F0F"/></svg>
                                    </button>
                                    <button type="button" class="swapUp swapButtons" title="Desplaçar a dalt">
                                        <svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.2929 15.2893C18.6834 14.8988 18.6834 14.2656 18.2929 13.8751L13.4007 8.98766C12.6195 8.20726 11.3537 8.20757 10.5729 8.98835L5.68257 13.8787C5.29205 14.2692 5.29205 14.9024 5.68257 15.2929C6.0731 15.6835 6.70626 15.6835 7.09679 15.2929L11.2824 11.1073C11.673 10.7168 12.3061 10.7168 12.6966 11.1073L16.8787 15.2893C17.2692 15.6798 17.9024 15.6798 18.2929 15.2893Z" fill="#0F0F0F"/></svg>
                                    </button>
                                    <button type="button" class="swapToColumn swapChange swapButtons" title="Passar a columna">
                                        <svg width="15px" height="15px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title/><g id="Complete"><g id="arrow-up-right"><g><polyline data-name="Right" fill="none" id="Right-2" points="18.7 12.4 18.7 5.3 11.6 5.3" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5.3" x2="17.1" y1="18.7" y2="6.9"/></g></g></g></svg>
                                    </button>
                                </div></li><li class='col-header'>Tipus de llar<div class='swap-content'>                                    <button type="button" class="swapToRow swapChange swapButtons" title="Passar a fila">
                                        <svg width="15px" height="15px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title/><g id="Complete"><g id="arrow-down-left"><g><polyline data-name="Right" fill="none" id="Right-2" points="5.3 11.6 5.3 18.7 12.4 18.7" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="18.7" x2="6.9" y1="5.3" y2="17.1"/></g></g></g></svg>
                                    </button>
                                    <button type="button" class="swapDown swapButtons" title="Desplaçar a sota">
                                        <svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z" fill="#0F0F0F"/></svg>
                                    </button>
                                    <button type="button" class="swapUp swapButtons" title="Desplaçar a dalt">
                                        <svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.2929 15.2893C18.6834 14.8988 18.6834 14.2656 18.2929 13.8751L13.4007 8.98766C12.6195 8.20726 11.3537 8.20757 10.5729 8.98835L5.68257 13.8787C5.29205 14.2692 5.29205 14.9024 5.68257 15.2929C6.0731 15.6835 6.70626 15.6835 7.09679 15.2929L11.2824 11.1073C11.673 10.7168 12.3061 10.7168 12.6966 11.1073L16.8787 15.2893C17.2692 15.6798 17.9024 15.6798 18.2929 15.2893Z" fill="#0F0F0F"/></svg>
                                    </button>
                                    <button type="button" class="swapToColumn swapChange swapButtons" title="Passar a columna">
                                        <svg width="15px" height="15px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title/><g id="Complete"><g id="arrow-up-right"><g><polyline data-name="Right" fill="none" id="Right-2" points="18.7 12.4 18.7 5.3 11.6 5.3" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5.3" x2="17.1" y1="18.7" y2="6.9"/></g></g></g></svg>
                                    </button>
                                </div></li></ul></th></tr><tr><th rowspan='3' class='row-headers'><ul id='order-rows'><li class='row-header'>Àmbits<div class='swap-content'>                                    <button type="button" class="swapToRow swapChange swapButtons" title="Passar a fila">
                                        <svg width="15px" height="15px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title/><g id="Complete"><g id="arrow-down-left"><g><polyline data-name="Right" fill="none" id="Right-2" points="5.3 11.6 5.3 18.7 12.4 18.7" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="18.7" x2="6.9" y1="5.3" y2="17.1"/></g></g></g></svg>
                                    </button>
                                    <button type="button" class="swapDown swapButtons" title="Desplaçar a sota">
                                        <svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z" fill="#0F0F0F"/></svg>
                                    </button>
                                    <button type="button" class="swapUp swapButtons" title="Desplaçar a dalt">
                                        <svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.2929 15.2893C18.6834 14.8988 18.6834 14.2656 18.2929 13.8751L13.4007 8.98766C12.6195 8.20726 11.3537 8.20757 10.5729 8.98835L5.68257 13.8787C5.29205 14.2692 5.29205 14.9024 5.68257 15.2929C6.0731 15.6835 6.70626 15.6835 7.09679 15.2929L11.2824 11.1073C11.673 10.7168 12.3061 10.7168 12.6966 11.1073L16.8787 15.2893C17.2692 15.6798 17.9024 15.6798 18.2929 15.2893Z" fill="#0F0F0F"/></svg>
                                    </button>
                                    <button type="button" class="swapToColumn swapChange swapButtons" title="Passar a columna">
                                        <svg width="15px" height="15px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title/><g id="Complete"><g id="arrow-up-right"><g><polyline data-name="Right" fill="none" id="Right-2" points="18.7 12.4 18.7 5.3 11.6 5.3" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5.3" x2="17.1" y1="18.7" y2="6.9"/></g></g></g></svg>
                                    </button>
                                </div></li></ul></th><td class='order-cell-empty'></td><td class='order-cell-empty'></td><td class='order-cell-empty'></td></tr><tr><td class='order-cell-empty'></td><td class='order-cell-empty'></td><td class='order-cell-empty'></td></tr><tr><td class='order-cell-empty'></td><td class='order-cell-empty'></td><td class='order-cell-empty'></td></tr></table><div class='group_row'><div class='input'><div class='col1'>Files</div><div class='col2'><select name='order[]' id='order' multiple="multiple"><option value='10' selected>Àmbits</option></select></div></div></div><div class='group_col'><div class='input'><div class='col1'>Columnes</div><div class='col2'><select name='order_cols[]' id='order_cols' multiple="multiple"><option value='20' selected>Any</option><option value='34' selected>Tipus de llar</option></select></div></div></div></div></div></div><div id='grafic-icons'><div class='box_buttons_grafic'><div class='item_chart_icon'><img src='./images/icons/ico_data.JPG' id='ico_data' class='ico_grafic'></div><div class='item_chart_icon'><img src='./images/icons/charts/chart-bar.png' id='ico_grafic_1' class='ico_grafic'></div></div></div><div class='body_data'><div class='box_result' id='box_result'><table id='form-indicator-table' class='center'><thead><tr class='row-header'><th class='cell' rowspan='1' colspan='1'>Nom Àmbit</th><th class='cell' rowspan='1' colspan='1'>Unipersonal</th><th class='cell' rowspan='1' colspan='1'>Llars sense infants dependents</th><th class='cell' rowspan='1' colspan='1'>Llars amb infants dependents</th></tr></thead></table></br><script> var data_table = [["Barcelona","40,6","17,5","22,8"],["Resta AMB","31,6","14,4","22,6"],["Total AMB","37,1","16,1","22,7"]];var row_group = [];</script><div id='table_data' style='display: none;'>[["Barcelona","40,6","17,5","22,8"],["Resta AMB","31,6","14,4","22,6"],["Total AMB","37,1","16,1","22,7"]]</div></div><div class='chart_div' id='chart_div_5'><canvas id='chart_canvas_5'></canvas><div id='ico_grafic_1' class='change_order_var ico_grafic'>Canviar ordre variables</div></div><div class='chart_div' id='chart_div_1'><canvas id='chart_canvas_1'></canvas><div id='ico_grafic_5' class='change_order_var ico_grafic'>Canviar ordre variables</div></div><div class='download_area'><div class='link_excel'><img src='images/export/csv-32px.png' alt='Export to csv' width='32px' height='32px'><div class='excel-text-link'>Descarregar aquesta taula</div></div><div class='download_canvas'><button id='download_chart'>Descarregar gràfic</button></div></div><div class='input'><div class='col2'><input type='hidden' name='ap' value='1'></div></div><div class='input'><div class='col2'><input type='hidden' name='id_ind' value='1704'></div></div><div class='input'><div class='col2'><input type='hidden' name='form_res' value='0'></div></div></form><div id='extra-bottom-info'><div class='meta-info'><div class='bottom-info'>Unitat: Percentatge</div><div class='bottom-info'>Any: 2022-2023</div></div><div class='foot-info'><div class='bottom-info'>Nota: La informació relativa a la renda fa referència a l'any anterior del de realització de l'enquesta.</div><div class='bottom-info'>Font: IERMB i Idescat: EMCV.</div><div class='bottom-info'>Darrera actualització: 23-07-2024.</div><div class='bottom-info'>(CC BY 3.0 ES) Institut d'Estudis Regionals i Metropolitans de Barcelona.</div></div></div></div>	</div>
	<footer class="foot">
		<a target="_blank" href="http://www.amb.cat" class="amb_icon"><img src = "/images/AMB_logo_1.png"></a>
		<div class="links_footer">
			<a href="https://www.institutmetropoli.cat/ca/avis-legal/">Avís legal</a> |
			<a href="https://www.institutmetropoli.cat/ca/politica-de-privacitat/">Política de privacitat</a> |
			<a href="http://iermbdb.uab.cat/index.php?ap=politica-cookies">Política de cookies</a>
			</br> <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/es/deed.ca">
                &#169 2025 </a> Institut Metròpoli
	    </div>
    </footer>
	<div style="color:white;background-color:rgb(159 78 252); margin-top:10px;padding:5px 10px">Portal web en fase de proves. En cas de trobar algun malcomportament, pots continuar veient <a target="_blank" style="font-weight:bold;text-decoration:none;color:white
    " href="https://indicadors-antic.institutmetropoli.cat">la versió antiga clicant aquí</a></div>
</div></body>
</html>