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

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.