开发者

Google Chart tools Visualizations - Implementing more than one on a page

I'm trying to use Google chart tools to visualize data on my site. The thing is, I can't get more than one to load...

You can find the docs here: http://code.google.com/apis/visualization/documentation/using_overview.html#load_your_libraries

And here is my code so far:

<script type='text/javascript' src='https://www.google.com/jsapi'></script> 
<script type='text/javascript'> 
    google.load('visualization', '1', {'packages':['annotatedtimeline']});

    google.setOnLoadCallback(drawAll);

    function drawAll() {
        drawSales();
        drawRegistration();
    }


    function drawSales() {
        // Sales graph
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addRows([ [new Date(2011, 04 ,30), 401.34], [new Date(2011, 04 ,22), 180.00], [new Date(2011, 04 ,18), 180.00] ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div_sales'));
        chart.draw(data, {});

      }




    function drawRegistration() {


        // Regisrtration graph
        var data2 = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Registration');
        data.addRows([ [new Date(2, 0 ,1), 1], [new Date(2, 0 ,1), 1] ]);

        var chart2 = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div_userregistration'));
        chart2.draw(data2, {});

      }
</script> 


<style> 
.charts{ float: left; width:510px; padding:10px; }
</style> 

    <h1>Stats</h1> 


<div class="charts"> 
    <h1>Overall sales</h1> 
    <div id='chart_div_sales' style='width开发者_开发知识库: 500px; height: 300px;'></div> 
</div> 

<div class="charts"> 
    <h1>User registration</h1> 
    <div id='chart_div_userregistration' style='width: 500px; height: 300px;'></div> 
</div> 

The first one is loading fine, but not the second one. What am I doing wrong??

Thanks for the help.


Replace data by data2 in drawRegistration and all will be fine. Also, have a look at the firebug tool, it will catch that kind of errors quite painlessly.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜