Arimaa Forum - Print Page


    
      
        Arimaa Forum
        (http://arimaa.com/arimaa/forum/cgi/YaBB.cgi)
      

        Arimaa >> Site Discussion >> Rating graphs in Javascript
        
(Message started by: omar on Jan 18^th, 2008, 9:05pm)

Title: Rating graphs in Javascript
Post by omar on Jan 18^th, 2008, 9:05pm

For a long time I've been wanting to show a graph of the players rating history on the players profile page. I thought I would have to do this in Java or Flash, but I just found that graphs can be created in Javascript; WOW :-)

Check out this page:
http://www.dynamicdrive.com/dynamicindex11/linegraph.htm

It worked for me in both FF and IE.

To begin with I think I'll setup a web service for accessing player rating histories. That way anyone who wants to can take a crack at generating the rating graphs.

You would pass it a list of player names and for each player it would return back a table with game_id, game_time, and rating.

Title: Re: Rating graphs in Javascript
Post by leo on Jan 19^th, 2008, 3:53am

:o There soon will be complete web apps all in Javascript... It might even be possible to generate SVG pictures if they can be inlined. This player history server is a good idea.

Title: Re: Rating graphs in Javascript
Post by omar on Jan 19^th, 2008, 5:57am

Yes, you are right Leo. I think eventually we might not need any browser plugins to build fancy, cross-platform applications. Im looking forward to that day.

I've just created the web service to get the player rating history.

You call it with a comma separated list of usernames like this:
http://arimaa.com/arimaa/gameroom/playerRatingHist.cgi?u=omar,aamir

It returns a JSON (www.json.org) formated string with the requested data. This is a great format for easily converting back to an object in Javascript.

Now all we have to do is graph the data in Javascript.

Title: Re: Rating graphs in Javascript
Post by omar on Jan 19^th, 2008, 6:42pm

I tried out the javascript graphs, but it seems to run too slow in the browser.

You can try it out here:
http://arimaa.com/arimaa/gameroom/graphRatings.htm

Between the time it gets the data and the graph shows up there is a bit of a delay.

Title: Re: Rating graphs in Javascript
Post by Fritzlein on Jan 19^th, 2008, 6:49pm

on 01/19/08 at 18:42:36, omar wrote:

I tried out the javascript graphs, but it seems to run too slow in the browser.

You can try it out here:
http://arimaa.com/arimaa/gameroom/graphRatings.htm

Cool! Except the rating is jumping around way more than possible from one game to the next. Perhaps the opponents' ratings are being used for half the games? Or else the games are not in chronological order?

Title: Re: Rating graphs in Javascript
Post by omar on Jan 19^th, 2008, 6:55pm

Yeah, you are right. I wasn't even paying attention to the data. I just fixed it. Thanks.

Title: Re: Rating graphs in Javascript
Post by Fritzlein on Jan 20^th, 2008, 6:45pm

Hmmm... Before the graph was clearly wrong, but now I'm not getting a graph at all, just some negative numbers on the vertical axis. Which situation is to be preferred? :-)

Title: Re: Rating graphs in Javascript
Post by omar on Jan 21^st, 2008, 8:44am

Oops, missing ampersand. Try it now.

Title: Re: Rating graphs in Javascript
Post by Fritzlein on Jan 21^st, 2008, 9:46am

Excellent. Now I get the right ratings in the right order. Also it is much faster than it was before. It's a nifty feature too that I can type in a second name and compare the two lines on the same graph.

If you want to keep improving the tool, I'd say the next feature would be the scaling of the axes. The vertical axis would be more informative if it crossed the horizontal axis at the minimum rating rather than at zero. The horizontal axis would be easier to understand as time rather than game number, particularly for comparing two players.

I have a hunch this little tool could become quite popular some day.