Google chart: How to pass the datatable from Java files to JavaScript

Hello I try using Google Chart to display the trendlines, based on some datas generated from the Java files. Here is part of my codes

public void resolveEvolution() {
        this.evolution = new ArrayList<Long>();
        this.evolutionTime = new ArrayList<String>();
        Calendar first = Calendar.getInstance();
        first.setTime(this.start);
        first.set(Calendar.DAY_OF_MONTH, 1);
        Calendar last = Calendar.getInstance();
        last.setTime(this.end);

        int i = 0;

        this.dt = DataTable.create();
        dt.addColumn(ColumnType.NUMBER, "Time");
        dt.addColumn(ColumnType.NUMBER, "Utilisation");
        dt.addRow();
        while (first.before(last)) {
            Calendar endMonth = Calendar.getInstance();
            endMonth.setTime(first.getTime());
            endMonth.add(Calendar.MONTH, 1);
            endMonth.add(Calendar.DAY_OF_MONTH, -1);

            this.evolution
                    .add(actionQueries.countByComponent(this.selectedComponent,
                            first.getTime(), endMonth.getTime()));
            this.evolutionTime.add(first.get(Calendar.MONTH) + "/"
                    + first.get(Calendar.YEAR));
            dt.addRow();
            dt.setValue(i, 0, i);
            dt.setValue(i, 1,
                    actionQueries.countByComponent(this.selectedComponent,
                            first.getTime(), endMonth.getTime()));
            i++;
            first.add(Calendar.MONTH, 1);
        }
    }

    public DataTable getDt() {
        System.out.println(this.dt);
        return this.dt;
    }

Here is my xhtml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">
    <head>    
<script type="text/javascript" src="https://www.google.com/jsapi"></script>    
<script type="text/javascript">      
    google.load("visualization", "1", {packages:["corechart"]});     
    google.setOnLoadCallback(drawChart);      
    function drawChart() {        
        var data = new google.visualization.DataTable();
        data = "#{globalComponentsManager.dt}";
        var options = {         
            title: 'Test',
                           trendlines: { 0: {} }

        };    
        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);      
    }    
    </script> 
 </head>  
 <body>   
      <div id="chart_div" style="width: 900px; height: 500px;"></div> 
 </body> 

</html>

Obviously, it doesn't work. So how can I pass the datatable from java to JavaScript ? I am using the JSF frame. Thanks.

Solution

Well, I found the solution at last. And I hope it could help the people who will meet the same difficulty in the future. JSF could pass some parameters from Java to Web Page, including the JavaScript within a JSF page. So I use a StringBuilder in Java file for building the string of Rows, like [[1,2],[5,9],[4,3]]. and then I pass this String to JavaScript, the codes of google chart, like data.addRows(#{stastics.rows}). For the other parts of google chart codes, just refer the google chart documentations. It worked well and I got the chart I needed finally.