4

Estoy creando unos gráficos con Highcharts, el cual se muestran luego de recibir una petición Ajax y una opción de un formulario. Depende de la opción se deberían crear n cantidad de <div> y adentro de los <div> mostrar la gráfica.

La petición, la opción del formulario y crear los <div> funciona correctamente, el problema viene al eliminar los <div> previamente creados a la hora de elegir otra opción, ya que, solo borra el contenido de dichos <div> pero siguen ahí por así decirlo.

  • Eligiendo una opción:

opcion #1

  • Luego, eligiendo otra opción:

opcion #2

Los <div> los creo de la siguiente forma (utilizando append):

  • Archivo "indicadores.js"
function opcion_uno()
{
    var fila = $(".cajas");
    var box = $(".box-charts");
    box.text("");

    for(let i = 0; i < 3; ++i)
    {
        fila.append('<div class="col-6 box-charts p-2 my-4" id="container'+ i +'" style="min-width: 310px; height: 400px; margin: 0 auto"></div>');
    }

    Highcharts.chart('container0', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Efficiency Optimization by Branch'
        },
        xAxis: {
            categories: [
                'Seattle HQ',
                'San Francisco',
                'Tokyo'
            ]
        },
        yAxis: [{
            min: 0,
            title: {
                text: 'Employees'
            }
        }, {
            title: {
                text: 'Profit (millions)'
            },
            opposite: true
        }],
        legend: {
            shadow: false
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                grouping: false,
                shadow: false,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Employees',
            color: 'rgba(165,170,217,1)',
            data: [150, 73, 20],
            pointPadding: 0.3,
            pointPlacement: -0.2
        }, {
            name: 'Employees Optimized',
            color: 'rgba(126,86,134,.9)',
            data: [140, 90, 40],
            pointPadding: 0.4,
            pointPlacement: -0.2
        }, {
            name: 'Profit',
            color: 'rgba(248,161,63,1)',
            data: [183.6, 178.8, 198.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.3,
            pointPlacement: 0.2,
            yAxis: 1
        }, {
            name: 'Profit Optimized',
            color: 'rgba(186,60,61,.9)',
            data: [203.6, 198.8, 208.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.4,
            pointPlacement: 0.2,
            yAxis: 1
        }]
    });

    Highcharts.chart('container1', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Efficiency Optimization by Branch'
        },
        xAxis: {
            categories: [
                'Seattle HQ',
                'San Francisco',
                'Tokyo'
            ]
        },
        yAxis: [{
            min: 0,
            title: {
                text: 'Employees'
            }
        }, {
            title: {
                text: 'Profit (millions)'
            },
            opposite: true
        }],
        legend: {
            shadow: false
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                grouping: false,
                shadow: false,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Employees',
            color: 'rgba(165,170,217,1)',
            data: [150, 73, 20],
            pointPadding: 0.3,
            pointPlacement: -0.2
        }, {
            name: 'Employees Optimized',
            color: 'rgba(126,86,134,.9)',
            data: [140, 90, 40],
            pointPadding: 0.4,
            pointPlacement: -0.2
        }, {
            name: 'Profit',
            color: 'rgba(248,161,63,1)',
            data: [183.6, 178.8, 198.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.3,
            pointPlacement: 0.2,
            yAxis: 1
        }, {
            name: 'Profit Optimized',
            color: 'rgba(186,60,61,.9)',
            data: [203.6, 198.8, 208.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.4,
            pointPlacement: 0.2,
            yAxis: 1
        }]
    });

    Highcharts.chart('container2', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Efficiency Optimization by Branch'
        },
        xAxis: {
            categories: [
                'Seattle HQ',
                'San Francisco',
                'Tokyo'
            ]
        },
        yAxis: [{
            min: 0,
            title: {
                text: 'Employees'
            }
        }, {
            title: {
                text: 'Profit (millions)'
            },
            opposite: true
        }],
        legend: {
            shadow: false
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                grouping: false,
                shadow: false,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Employees',
            color: 'rgba(165,170,217,1)',
            data: [150, 73, 20],
            pointPadding: 0.3,
            pointPlacement: -0.2
        }, {
            name: 'Employees Optimized',
            color: 'rgba(126,86,134,.9)',
            data: [140, 90, 40],
            pointPadding: 0.4,
            pointPlacement: -0.2
        }, {
            name: 'Profit',
            color: 'rgba(248,161,63,1)',
            data: [183.6, 178.8, 198.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.3,
            pointPlacement: 0.2,
            yAxis: 1
        }, {
            name: 'Profit Optimized',
            color: 'rgba(186,60,61,.9)',
            data: [203.6, 198.8, 208.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.4,
            pointPlacement: 0.2,
            yAxis: 1
        }]
    });
}

function opcion_dos()
{
    var fila = $(".cajas");
    var box = $(".box-charts");
    box.text("");

    for(let i = 0; i < 1; ++i)
    {
        fila.append('<div class="col-6 box-charts p-2 my-4" id="container'+ i +'" style="min-width: 310px; height: 400px; margin: 0 auto"></div>');
    }

    Highcharts.chart('container0', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Efficiency Optimization by Branch'
        },
        xAxis: {
            categories: [
                'Seattle HQ',
                'San Francisco',
                'Tokyo'
            ]
        },
        yAxis: [{
            min: 0,
            title: {
                text: 'Employees'
            }
        }, {
            title: {
                text: 'Profit (millions)'
            },
            opposite: true
        }],
        legend: {
            shadow: false
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                grouping: false,
                shadow: false,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Employees',
            color: 'rgba(165,170,217,1)',
            data: [150, 73, 20],
            pointPadding: 0.3,
            pointPlacement: -0.2
        }, {
            name: 'Employees Optimized',
            color: 'rgba(126,86,134,.9)',
            data: [140, 90, 40],
            pointPadding: 0.4,
            pointPlacement: -0.2
        }, {
            name: 'Profit',
            color: 'rgba(248,161,63,1)',
            data: [183.6, 178.8, 198.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.3,
            pointPlacement: 0.2,
            yAxis: 1
        }, {
            name: 'Profit Optimized',
            color: 'rgba(186,60,61,.9)',
            data: [203.6, 198.8, 208.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.4,
            pointPlacement: 0.2,
            yAxis: 1
        }]
    });
}
  • Ajax
$(".formulario").change(function (){

    var select = $("#lista").val();

    $.ajax({
        url:"modules/ajax.php",
        method:"POST",
        data: select,
        cache: false,
        contentType: false,
        processData: false,
        success:function(){
            switch(select)
            {
                case '1':
                    return opcion_uno();
                case '2':
                    return opcion_dos();
                default:
                    console.log("opcion no valida");
                    break;
            }
        }
    });

});
  • Html
<div class="container">

        <div class="row justify-content-center align-items-center">

        <div class="col-12">
            <form method="POST">

                    <div class="input-group">

                        <div class="input-group-prepend ">
                            <span class="input-group-text">Lista</span>
                        </div>

                        <select class="custom-select formulario form-control" id="lista" name="lista">
                            <option selected value="0">Seleccionar...</option>
                            <option value="1">Opcion #1</option>
                            <option value="2">Opcion #2</option>
                        </select>

                    </div>

            </form>

        </div>

        <div class="cajas col-12"></div>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="js/ajax.js"></script>
<script src="js/indicadores.js"></script>

4
  • 2
    Lo que pasa es que estas asignandole un valor vacio a tus divs, al hacer el box.text(""); lo que necesitas hacer es removerlos, prueba con esto box.remove(); en cada una de tus funciones, deberia de funcionar. el 15 oct. 2019 a las 14:30
  • 2
    Antes del ajax, $(".box-charts").remove(); y ya está, si no entendí mal.
    – Emeeus
    el 15 oct. 2019 a las 14:33
  • 1
    Si, así es, funcionaria mejor, pero ya vez que el en sus funciones hace esto para eliminar sus gráficas box.text(""), por eso le recomendé que reemplazara eso por el box.remove(). el 15 oct. 2019 a las 14:36
  • Muchas gracias a los dos, era lo que necesitaba el 15 oct. 2019 a las 14:40

1 respuesta 1

4

Gracias a los comentarios de @Ricardo Pérez y @Emeeus, lo único que hacia falta era cambiar el .text() por .remove() en mis funciones.

  • Antes:

function opcion_uno()
{
    var fila = $(".cajas");
    var box = $(".box-charts");
    box.text("");
.
.
.
  • Ahora:
function opcion_uno()
{
    var fila = $(".cajas");
    var box = $(".box-charts");
    box.remove();
.
.
.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.