google char pass data

Question

I have a piece of code using google chart API

 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">

    google.load('visualization', '1', {packages: ['annotatedtimeline']});





    function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Artist');
    data.addRows([
            [new Date(2008, 1 ,1), 30000],
            [new Date(2008, 1 ,2), 14045],
            [new Date(2008, 1 ,3), 55022],
            [new Date(2008, 1 ,4), 75284],
            [new Date(2008, 1 ,5), 41476],
            [new Date(2008, 1 ,6), 33322]
            ]);

        var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
                document.getElementById('visualization'));
        annotatedtimeline.draw(data, {'displayAnnotations': true});
    }

    google.setOnLoadCallback(drawVisualization);
  </script>


<div id="visualization" style="width: 800px; height: 400px;"></div>

This works.

However, it I put the data definition outside of the function drawVisualization and pass data to it, like the following, it will not work. Why is that is case?

    google.load('visualization', '1', {packages: ['annotatedtimeline']});






    function drawVisualization(data) {
        var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
                document.getElementById('visualization'));
        annotatedtimeline.draw(data, {'displayAnnotations': true});
    }



    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Artist');
    data.addRows([
    [new Date(2008, 1 ,1), 30000],
    [new Date(2008, 1 ,2), 14045],
    [new Date(2008, 1 ,3), 55022],
    [new Date(2008, 1 ,4), 75284],
    [new Date(2008, 1 ,5), 41476],
    [new Date(2008, 1 ,6), 33322]
    ]);


    google.setOnLoadCallback(function(){drawVisualization(data)});
  </script>


<div id="visualization" style="width: 800px; height: 400px;"></div>

Thanks a lot!

What do you mean by "it will not work"? – Jeff Dec 12 '12 at 20:15 — Jeff, Dec 12 '12 at 20:15

score 0 · Answer 1 · answered Dec 12 '12 at 20:17

0

You're not passing data to it - you're requiring it as a parameter, but google.setOnLoadCallback doesn't pass it. Remove the data parameter and it should work:

function drawVisualization() { //<-- Note there is no parameter.
    var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
            document.getElementById('visualization'));
    annotatedtimeline.draw(data, {'displayAnnotations': true});
}

answered Dec 12 '12 at 20:17

Jeff

12,555
5
33
60

Thanks @Jeff, I changed the question a little. it still doesn't work. – Alfred Zhong Dec 12 '12 at 20:31
@AlfredZhong Oh, ok. Does `drawVisualization` get called? If so, is the `data` parameter the correct object? – Jeff Dec 12 '12 at 20:40
data is the same type as the 1st example. I just moved it out of the drawVisualization function, it doesn't draw anymore. I tried pass it to the function or just leave it outside without passing, it doesn't draw. – Alfred Zhong Dec 12 '12 at 20:54
Hi Jeff, after trying it again, it works. I guess there may be some typo on my previous attempt. Gee, it is real hard to debug javascript – Alfred Zhong Dec 12 '12 at 20:58
@AlfredZhong Actually, you might want to check that - I was just about to update my answer saying that the problem is that the google visualization package hadn't loaded - the reason it works now might actually be that the module is cached in your browser. I strongly recommend flushing your cache and seeing if it still works. – Jeff Dec 12 '12 at 21:00

google char pass data

1 Answers1