Google chart api sample

[Sebastien Cesbron]

Hi

I am trying the use of google chart with play as it seems several people have done it successfully.

I am wondering what's the correct ajax syntax and what is the correct json format to use to do a linechart.

Can I render directly my model objects or do I have to use some specific object for that as it seems that the goole api needs a special format ?

Do I have to use the jsAction tag or do I directly pass the url to the "$.ajax" method ?

If somebody have a simple snippet of this I would appreciate

Regards
Seb

[Pascal Voitot Dev]

I'd say that you should directly convert your model into google expected JSON format on server side and get it with $.ajax which is the easiest solution IMO.
(that's how I do it at least :) )

Pascal

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To post to this group, send email to play-fr...@googlegroups.com.
To unsubscribe from this group, send email to play-framewor...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.

[Sebastien Cesbron]

Thanx for the help Pascal

I finally managed to integrate my graph. Here is the code if somebody else have the same problem.

My javascript code is

<script type="text/javascript">
    google.load("visualization", "1", {
        packages : [ "corechart" ]
    });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var jsonData = $.ajax({
            url : "@{MyController.findStats(clientId, startDate, endDate)}",
            dataType : "json",
            async : false
        }).responseText;

        var data = new google.visualization.DataTable(jsonData);

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {
            width : 960,
            height : 400,
            title : 'My chart'
        });
    }
</script>

My Controller code is simple. In fact I do not convert my objets in java but use a json template to do so

public class MyController extends Controller {

    public static void index() {
        User user = User.findByEmailWithClients(Security.connected());
        if (user.clients.size() > 0) {
            Long clientId = user.clients.get(0).id;
            LocalDate today = new LocalDate();
            Date startDate = today.minusDays(today.getDayOfMonth() - 1).minusMonths(1).toDateMidnight().toDate();
            Date endDate = today.toDateMidnight().toDate();
            render(clientId, startDate, endDate);
        }
        render();
    }
   
    public static void findStats(Long clientId, Date startDate, Date endDate) {
        List<Stat> stats = Stat.findStats(clientId, startDate, endDate);
        render(stats);
    }
}

And my json template

{
  "cols": [
        {"id":"date","label":"Date","type":"string"},
        {"id":"stat","label":"Stat","type":"number"}
      ],
  "rows": [
#{list stats, as:'stat'}
        {"c":[
            {"v":"${stat.date}"},
            {"v":${stat.stat}}
        ]},
#{/list}
      ]
}

Regards
Seb

2011/8/9 Pascal Voitot Dev <pascal.v...@gmail.com>

[Pascal Voitot Dev]

Yes exactly :)
If I'm courageous, one day I will write a real Google Chart Datasource for Siena to map directly entities to charts...
But just now I'm not :)

Pascal

[julien LESBEGUERIES]

Hi,

I would like to integrate a dynamically updated google chart in my play (2.2.1) application and I'm 

very interested in this solution.

But I don't get the render(...). It seems in the new version of play,

it corresponds to return ok(...);

but i'm not sure. When I see the source page of the generated application

I've got this: 

function drawChart() {
	var jsonData = $.ajax({

url: "SimpleResult(200, Map(Content-Type -> application/json; charset=utf-8))",

	dataType:"json",
	async: false
	}).responseText;

var data = google.visualization.arrayToDataTable(jsonData);

I understand this is the result of the get call to my java controller. I wrote this in the url parameter:

url: "@{MyController.getTable()}",

I would need help to understand this,

Thank you!