[Seaside] How I got google (jgcharts.js) charts working on a component

[Tim Murray]

Posting this in the hope it helps somebody.

 

Basically, we load jgcharts.js on the fly and use the library directly.

The demo page here: http://maxb.net/scripts/jgcharts/include/demo/

Uses jquery-1.3.1.min.js, but it is working fine for me with the shipped
Seaside 3.0 JQuery libs.

 

Note:

Our application loads the JQDeployment and JQUIDeployment libraries by
default at

The dispatcher/config link, but you can load these on the fly if need be
in the updateRoot method 

Of your component.

 

 

 

In our application's custom library we get access to the library

with the following two methods:

 

First:

 

MyCustomLibrary>>getFile: tuple

| f dir |

dir := FileDirectory default.

1 to: tuple size - 1 do: [ :i |

  dir := dir directoryNamed: (tuple at: i)

].

f := StandardFileStream readOnlyFileNamed: (dir fullNameFor: tuple
last).

^ f contentsOfEntireFile

 

MyCustomeLibrary>>jGChartsJs

 ^self getFile: #('MyCustomLibrary' 'jGChart.js')

 

In my component I load the script 

using the updateRoot:anHtmlRoot method...

 

MyComponent>>updateRoot: anHtmlRoot

 anHtmlRoot

   javascript url:(MyCustomLibrary / #jGChartsJs).

 

Then

 

MyComponent>>renderContentOn: html

 html document addLoadScript:'

            var api = new jGCharts.Api(); 

            var opt ={

                        data : [[153, 60, 52], [113, 70, 60], [120, 80,
40]],

                        axis_labels:["A","B","C"],

                        type: "p",

                        size:"400x200",

                        bg   :"ffffff",

                        bg_type: "gradient",

                        bg_angle: 45,

                        bg_offset: "999999",

                        bg_width: 20

                        };

            jQuery("<img>") 

            .attr("src", api.make(opt))

            .appendTo("#p");'.

                        

            html div

                        id:'p'; 

                        with:'pie'.

 

At this point, the string for addLoadScript is hackable and I can

modify it by putting in dynamic data.

 

More demos are here:

 

http://maxb.net/scripts/jgcharts/include/demo/

 

Hope it helps.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20100921/d922b1eb/attachment-0001.htm