My First User Control on GeneXus X: Google Motion Chart

After Enrique wrote about Google Visualization API, and after Gonzalo showed us that create an User Control for Google Visualization Gadgets is an easy task, I tried to do my first User Control.
 

I choose Google Motion Chart. You can download it here

This sample is a simple chart showing Sales and Price for IPhone, WM and Nokia (N Serie). I wrote this "hard coded" code in GeneXus X

DataProvider1 

TimeSerie
{
    Category
    {
        Name = "IPhone"
        Date = ctod("01/01/2007")
        X = 0
        Y = 0
    }
    Category
    {
        Name = "Nokia N"
        Date = ctod("01/01/2007")
        X = 400
        Y = 9
    }
    Category
    {
        Name = "WM"
        Date = ctod("01/01/2007")
        X = 400
        Y = 2.9
    }
    Category
    {
        Name = "IPhone"
        Date = ctod("06/01/2007")
        X = 499
        Y = 2.3
    }
    Category
    {
        Name = "Nokia N"
        Date = ctod("06/01/2007")
        X = 599
        Y = 11
    }
    Category
    {
        Name = "WM"
        Date = ctod("06/01/2007")
        X = 450
        Y = 3.8
    }

    Category
    {
        Name = "IPhone"
        Date = ctod("08/11/2008")
        X = 199
        Y = 4
    }

    Category
    {
        Name = "Nokia N"
        Date = ctod("08/11/2008")
        X = 699
        Y = 12
    }
    Category
    {
        Name = "WM"
        Date = ctod("08/11/2008")
        X = 499
        Y = 3
    }
   
}

The right code should be:

 TimeSerie
{
    Category
    {
       Name = ItemName
       Date = ItemDate
        X = ItemPrice
        Y = ItemSales
    }

} 

And in the Start Event of the Panel

WebPanel1  

 Event Start
    &serie = DataProvider1() // The &serie is the data bound to the control
EndEvent

I think is a bit easier than write a bunch of javascript code.

And the data is almost real ;)