[Jquery] Recargar los datos del gráfico a través de JSON con Highcharts



Answers

Las otras respuestas no funcionaron para mí. Encontré la respuesta en su documentación:

http://api.highcharts.com/highcharts#Series

Usando este método ( vea el ejemplo de JSFiddle ):

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

// the button action
$('#button').click(function() {
    chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
});
Question

Estoy tratando de volver a cargar los datos para un gráfico de Highcharts a través de JSON basado en un clic de botón en otro lugar de la página. Inicialmente me gustaría mostrar un conjunto predeterminado de datos (gasto por categoría) pero luego cargar nuevos datos basados ​​en la entrada del usuario (gasto por mes, por ejemplo). La manera más fácil que se me ocurre para enviar el JSON desde el servidor es pasando una solicitud GET a la página PHP, por ejemplo $ .get ('/ dough / includes / live-chart.php? Mode = month' , recuperando esto valor del atributo de ID del botón.

Aquí está lo que tengo hasta ahora para recuperar los datos predeterminados (gasto por categoría). Necesita encontrar cómo cargar datos completamente diferentes en el gráfico circular, según la demanda del usuario, a pedido:

$(document).ready(function() {
            //This is an example of how I would retrieve the value for the button
            $(".clickMe").click(function() {
                var clickID = $(this).attr("id");
            });
            var options = {
                chart: {
                    renderTo: 'graph-container',
                    margin: [10, 175, 40, 40]
                },
                title: {
                    text: 'Spending by Category'
                },
                plotArea: {
                    shadow: null,
                    borderWidth: null,
                    backgroundColor: null
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: $'+ this.y;
                    }
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            formatter: function() {
                                if (this.y > 5) return '$' + this.y;
                            },
                            color: 'white',
                            style: {
                                font: '13px Trebuchet MS, Verdana, sans-serif'
                            }
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    style: {
                        left: 'auto',
                        bottom: 'auto',
                        right: '50px',
                        top: '100px'
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Spending',
                    data: []
                }]
            };
            $.get('/dough/includes/live-chart.php', function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                var data = {};
                $.each(items, function(itemNo, item) {
                    if (itemNo === 0) {
                        data.name = item;
                    } else {
                        data.y = parseFloat(item);
                    }
                });
                options.series[0].data.push(data);
            });
            // Create the chart
            var chart = new Highcharts.Chart(options);
        });
        });

Cualquier ayuda sería muy apreciada

EDITAR

Aquí está el Javascript actualizado gracias a Robodude. John, me tienes en el camino correcto aquí, ¡gracias! Ahora estoy atascado con cómo reemplazar los datos en el gráfico de la solicitud AJAX. Debo admitir que el código que sigue a $ .get () probablemente provenga del código de muestra, no entiendo completamente qué está sucediendo cuando se ejecuta; ¿quizás haya una forma mejor de formatear los datos?

Pude hacer algunos progresos en cuanto a que ahora el gráfico carga nuevos datos, pero se agrega a lo que ya está allí. Sospecho que el culpable es esta línea:

options.series[0].data.push(data);

Probé options.series [0] .setData (data); pero nada pasa. En el lado positivo, la solicitud de AJAX funciona de manera impecable en función del valor del menú de selección y no hay errores de Javascript. Aquí está el código en cuestión, sin opciones de gráfico:

$.get('/dough/includes/live-chart.php?mode=cat', function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                var data = {};
                $.each(items, function(itemNo, item) {
                    if (itemNo === 0) {
                        data.name = item;
                    } else {
                        data.y = parseFloat(item);
                    }
                });
                options.series[0].data.push(data);
            });
            // Create the chart
            var chart = new Highcharts.Chart(options);
        });
        $("#loadChart").click(function() {
            var loadChartData = $("#chartCat").val();
                $.get('/dough/includes/live-chart.php?mode=' + loadChartData, function(data) {
                var lines = data.split('\n');
                $.each(lines, function(lineNo, line) {
                    var items = line.split(',');
                    var data = {};
                    $.each(items, function(itemNo, item) {
                        if (itemNo === 0) {
                            data.name = item;
                        } else {
                            data.y = parseFloat(item);
                        }
                    });
                    options.series[0].data.push(data);
                });
                // Create the chart
                var chart = new Highcharts.Chart(options);
            });
        });
    });

EDITAR 2 Este es el formato del que está sacando el gráfico: muy simple, el nombre y el valor de la categoría con \ n después de cada uno.

Coffee, 4.08
Dining Out, 5.05
Dining: ODU, 5.97
Dining: Work, 38.41
Entertainment, 4.14
Gas, 79.65
Groceries, 228.23
Household, 11.21
Misc, 12.20
Snacks, 20.27



En realidad, tal vez deberías elegir la función de update es mejor.
Aquí está el documento de update de funciones http://api.highcharts.com/highcharts#Series.update

Puedes simplemente escribir el código como a continuación:

chart.series[0].update({data: [1,2,3,4,5]})

Este código fusionará la opción de origen y actualizará los datos modificados.




Si está utilizando push para enviar los datos a la opción .series dinámicamente ... solo use

options.series = [];  

para limpiarlo

options.series = [];
$("#change").click(function(){
}






Links