Home How to assign values after the program finished drawing Google Charts?
Reply: 1

How to assign values after the program finished drawing Google Charts?

Travis Su
1#
Travis Su Published in 2017-12-08 00:48:28Z

I know that sounds a bit weird but I got a piece of code in here:

let globalResult = [];
let defaultData = ["None", 1200, 1200, 1200, 1200, 1200, 1200, 1200,
1200, 1200, 1200, 1200];
$(document).ready(() => {
    // set a listener on the textbox
    $('#input').on("change", (evt) => {
        let text = $('#input').val();
        // the {text: text} sends a parameter named text with the
        // value of what was typed in the textbox
        $.get("/display", {text: text})
            .done((data) => {
                globalResult = data['result'];
                $('#input').val('');   // reset the textbox
                //Draw Graph
                google.charts.load('current', {'packages':['corechart']});
                google.charts.setOnLoadCallback(drawChart);

                function drawChart() {
                    //Chart stuff.... Doesn't matter
                    //It's programmed to Draw Line with defaultData and globalResult
                    };

                    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

                    chart.draw(data, options);
                    //Swap Value here:
                    defaultData = globalResult;
                }

            })

I tried to swap defaultData and globalResult after the Chart is drawn, But some how it always drawing a new chart when swapping data, thus it causes interruption on the graph (like another line just died in the middle of the drawing, left half of the line hanging out there). If I trying to put these outside of the function drawChart, it will draw 2 same line with another dies in the middle. And I also cannot place this outside of $.get() scope cause that the chart won't be drawn. How do I fix that?

WhiteHat
2#
WhiteHat Reply to 2017-12-08 12:34:20Z

the load statement (google.charts.load) will wait until the document is ready,
before executing the callback, or promise it returns...
as such, no need for --> $(document).ready

load google first using the promise,
then create the chart and save the reference for later use,
which will allow you to draw the same chart with any data

recommend setup similar to following...

let globalResult = [];
let defaultData = ["None", 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200];

google.charts.load('current', {
  packages: ['corechart']
}).then(() => {
    // save reference to chart here
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    $('#input').on("change", (evt) => {
        let text = $('#input').val();
        // the {text: text} sends a parameter named text with the
        // value of what was typed in the textbox
        $.get("/display", {text: text})
            .done((data) => {
                globalResult = data['result'];
                $('#input').val('');   // reset the textbox

                //Chart stuff....
                chart.draw(data, options);

                //Swap Value here:
                defaultData = globalResult;
            });

    });
});
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.305024 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO