Bootstrap tab panel event

publicado por: Anonymous

Tengo un tab panel de bootstrap con 5 pestañas intercambiables (in active, fade, fade, fade, fade)

Dentro de cada una de estas pestañas está incluida una dxchart (devextreme) que se grafica con Jscript.

Cuando mi página termina de cargar , la gráfica que se encuentra en el tab con la clase css: (in active) aparece apropiadamente. Pero si navego en los otros tabs las gráficas no se crean.

He investigado sobre el caso y he descubierto que las gráficas en los tabs (fade) tienen que ser creadas en el evento tabchanged.

No soy muy bueno en Jscript, y me la paso investigado cada detalle de código. He encotrado y modificado lo siguiente:

var isShown = false;

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//  e.target // newly activated tab
//    e.relatedTarget // previous active tab
DrawChart(); isShown = true;           
})


function DrawChart() {
if (isShown)
    return;

$("#chartUtilidad").dxChart({
    dataSource: chartDataBar,
    commonSeriesSettings: {
        bar: {
            cornerRadius: 10
        },
        argumentField: 'ano_a'
    },

    tooltip: {
        enabled: true,
        format: "fixedPoint",
        precision: 2,
    },

    series: [
        { valueField: 'ing1_f', name: 'Ingreso', type: 'bar', color: '#4F81BC' },
        { valueField: 'cost1_f', name: 'Costo', type: 'bar', color: '#9BBB58' },
        { valueField: 'gastos1', name: 'Gasto', type: 'bar', color: '#23BFAA' },
        { valueField: 'uti1', name: 'Utilidad', type: 'bar', color: '#8064A1' },
    ],
    argumentAxis: {
        //tickInterval: { years: 1 },
        argumentType: 'string'
    },
    legend: {
        horizontalAlignment: 'center',
        font: { color: 'Black', size: 20 },
    },


    title: {
        text: 'Comparativo C$'
    },
    animation: {
        easing: 'easeOutCubic',
        duration: 3000
    }

});

}

Normalmente el código para crear las gráficas es el siguiente (me funciona bien en el “in active”):

$(function () {



$("#chartVentas").dxChart({
    dataSource: chartData,

    commonSeriesSettings: {
        type: "line",
        hoverMode: "allArgumentPoints",
        selectionMode: "allArgumentPoints",
        label: {
            visible: false,
        },
    },
    tooltip: {
        enabled: true,
        format: "fixedPoint",
        precision: 2,
        //customizeText: function () {
        //    return this.valueText + ' C$';
        //}
    },
    series: [
    { argumentField: 'argumento1', valueField: 'vtas1', name: '2016', color: '#4f81bc' },
    { argumentField: 'argumento2', valueField: 'vtas2', name: '2015', color: '#bc8a4f' },
    ],
    argumentAxis: {
        tickInterval: 1,
    },
    legend: {
        horizontalAlignment: 'center',
        font: { color: 'Black', size: 20 },
    },

    title: 'Cajas vendidas C$',

    animation: {
        easing: 'easeOutCubic',
        duration: 3000
    }


});

});

No sé como tiene que estar estructurado el código para el tabchanged event.

Este es el HTML:

<div class="container">  
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#venta">Ventas</a></li>
<li><a data-toggle="tab" href="#costo">Costos</a></li>
<li><a data-toggle="tab" href="#comparativo">Comparativo</a></li>
<li><a data-toggle="tab" href="#caja">Cajas</a></li>
</ul>

<div class="tab-content">
<div id="venta" class="tab-pane fade in active">
    <div id="chartVentas"></div>
</div>
<div id="costo" class="tab-pane fade">

</div>
<div id="comparativo" class="tab-pane fade">

  <div id="chartUtilidad"></div>

 </div>
<div id="caja" class="tab-pane fade">

</div>
</div>
</div>  

Ventas (in active)
Chart utilidades (fade)

solución

Noel, si el problema es que no se cargan los mapas en los tabs no activos, haz que se carguen al cambiar el foco añadiendo un evento

Si, correcto es lo que intento hacer pero no soy muy bueno en JS, algun ejemplo a seguir?

Lo que necesitas es añadir eventos a las pestañas. Tienes muchas maneras de hacerlo, via html directamente usando el atributo onclick, por ejemplo.

Yo, por costumbre, en estos casos declaro los listeners via js/jquery.


Si dispones de javascript/HTML (DOM) puro mira este ejemplo:

var ventas = document.getElementById('ventas');
ventas.addEventListener('click', function() {
    alert( "Carga grafico de ventas" );
}, false);

Si tienes JQuery mira este otro ejemplo:

$( "#costos" ).click(function() {
  alert( "Carga grafico de compras" );
});

Si en cambio tienes JQuery UI puedes cojer el evento tabs (link en ingles)

$("#tabs").tabs({
    select: function(event, ui) {
        alert("PRESSED TAB!");
    }
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *