MVVM & google charts

asked 2013-11-15 19:45:56 +0800

kalmmon3
11 ● 2

Hi all,

I'm trying to use google charts in my zkgrails application but I cannot understand how to pass data from my ViewModel to Javascript. I have read all the wiki's and smalltalks regarding so I know that the best way is to use an ajax call returning json array but I'm looking for a complete sample because I'm very beginner in the client side programming (js and so on).

I have this zul that works correctly

    <?xml version="1.0" encoding="UTF-8"?>
    <zk 
    xmlns:w="client"
    xmlns:n="native">

<!--Load the AJAX API-->
<?script type="text/javascript" src="https://www.google.com/jsapi"></script?>
<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // Set chart options
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  }

</script>
<window title="new page title" height="100%"
    apply="grailsBindComposer" 
    viewModel="@id('vm') @init('mypackage.richieste.ChartTestViewModel')"
    sizable="true" border="normal" contentStyle="overflow:auto" >


    <n:div style="width: 500px" id="chart_div" />

</window>
</zk>

and I want to query database during init of my ViewModel (ChartTestViewModel) and give results to javascript to build chart.

class ChartTestViewModel{

ListModelList<Customer> sample

@Init 
def init(){
sample = new ListModelList<Customer> Customer.findAll()
}

I would appreciate any suggestions. Thank's in advance.