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

[John McKeon]

On Tue, Sep 21, 2010 at 10:00 AM, Tim Murray <tmurray at ecsorl.com> wrote:

>  Posting this in the hope it helps somebody.
>
>
>
>
>
> 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')
>

Not sure why you need to do this, it could be eliminated by loading the file
into MyCustomLibrary at "design time" using MyCustomLibrary addFileAt:.
Refer to WAFileLibrary's class comments for more information.

The way you have it written, it *looks* like the js file will get loaded
into the image from the disk file on every page hit. If so, that could have
an adverse effect on server performance.



>
>
> 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.
>
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>


-- 
http://john-mckeon.us
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20100921/2352f498/attachment.htm