重绘谷歌图表

Question

Hello guys I am developing a web application with google chart . I want to redraw chart on each times the user makes selection And here is my code

    //Loading google api
    google.load("visualization", "1", {
        packages: ["corechart"]
    });
    google.setOnLoadCallback(drawAllCharts);      
    function drawAllCharts() {
        //Sending server a request
        $.post("index.php", {
            type: "result"
        }, function (data, status) {
            handleResponse(data, true)
        });
    }
    //This function handles response of server which is a JSON string 
    function handleResponse(jsonString, init) {
        //Parsing JSON string into object

        var obj = JSON.parse(jsonString);
        var arrayData = objToStrin(obj); //Converting obj to array
        console.log(arrayData);
        drawDistChart(arrayData, init);
    }
    //This function draws first chart
    function drawDistChart(arrayData, init) {
        //Preparing data
        var dataDistribution = new google.visualization.DataTable();
        dataDistribution.addColumn('string', "Fitness");
        dataDistribution.addColumn('number', "Physical");
        dataDistribution.addColumn('number', "Emotional");
        dataDistribution.addRows(arrayData);
        //Setting few properties 
        var options = {
            title: 'No of People',
            backgroundColor: {
                fill: 'transparent'
            },
            hAxis: {
                title: 'Wellness Score',
                slantedText: true,
                titleTextStyle: {
                    color: 'red'
                }
            }
        };
        //Drawing the chart
   var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(dataDistribution, options);            
}

but nothing happens , please help

Answer 1

You need to add a "select" event listener to handle the user selecting chart elements:

google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length) {
        // the user clicked on a chart element
        // get row/column information from selection[n].row/column
        // do something with the selection

        // redraw the chart
        chart.draw(dataDistribution, options);
    }
});

Answer 2

No need to declare new google.visualization.ColumnChart each time.

Just chart.draw(dataDistribution, options); will work fine.

Add chart.draw(dataDistribution, options); in function handleResponse