Smalltalk › Frameworks & Tools › AIDA/Web

can't find out how use Javascript libs such as HighStock

‹ Previous Topic Next Topic ›
 
classic Classic list List threaded Threaded
♦
♦
 2 messages Options
empty
Reply | Threaded
Open this post in threaded view
♦
♦
|

can't find out how use Javascript libs such as HighStock

empty
Hi
I'm very new to JavaScript as well as Aida/Web.
The task is to show chart in HighStock JavaScript on a page that represents an object that holds the data.
The chart lib has several js files, namely, a "js/highchart.js", "/adapter/prototype-adapter.js", "/adapter/mootools.js" and "/modules/exporting.js" and some /themes/xyz.js
In WebStyle I manually added  methods for those JavaScript, after the examples found in WebStyle such as jQurery, including xyzResource and ensureXYZ etc.
And I added lines to WebElement intending to add those JavaScript into the <head>.
After this I used scriptAfter: to insert the code for charting. The code is just a copy of original example code.
Well, it doesn't work.
Any advises?

Yours,

JG

P.S.
Here are some code:

viewChart

        | e |
        e := WebElement new.
        e ensureId.
        e addTextH1: 'highstock charts'.
        e addInputFieldAspect: #id for: self.
        e addButtonText: 'chart' action: #chart.
        e addBreak.
        e add: self chartElement.
        e addBreak.
  self style pageFrameWith: e title: 'charts'


chartElement
 
        | e |
        e := WebElement new.
        e ensureId.
        (e app style)
                ensureJQuery;
                ensureHighStock;
                ensureDarkBlueThemes;
                ensureDarkGreenThemes;
                ensureGrayThemes;
                ensureGridThemes;
                ensureSkiesThemes.
        "ensurePrototypeAdapter;
                ensureMooltoolsAdapter;"
        "ensureExportingModule;"
        "ensurePrototype;"
        "ensureHighStockProduction;"
        e addTextSmall: '*Charts to be improved'.
        e addBreak.
        e scriptAfter: self chartScript.
  e update.
        ^e

chartScript
 
        ^'$(function() {
        var seriesOptions = [],
                yAxisOptions = [],
                seriesCounter = 0,
                names = [''MSFT'', ''AAPL'', ''GOOG''],
                colors = Highcharts.getOptions().colors;

        $.each(names, function(i, name) {

                $.getJSON(''http://www.highcharts.com/samples/data/jsonp.php?filename=''+ name.toLowerCase() +''-c.json&callback=?'', function(data) {

                        seriesOptions[i] = {
                                name: name,
                                data: data
                        };

                        // As we''re loading the data asynchronously, we don''t know what order it will arrive. So
                        // we keep a counter and create the chart when all the data is loaded.
                        seriesCounter++;

                        if (seriesCounter == names.length) {
                                createChart();
                        }
                });
        });



        // create the chart when all data is loaded
        function createChart() {

                chart = new Highcharts.StockChart({
                    chart: {
                        renderTo: ''container''
                    },

                    rangeSelector: {
                        selected: 4
                    },

                    yAxis: {
                    labels: {
                    formatter: function() {
                    return (this.value > 0 ? ''+'' : '''') + this.value + ''%'';
                    }
                    },
                    plotLines: [{
                    value: 0,
                    width: 2,
                    color: ''silver''
                    }]
                    },
                   
                    plotOptions: {
                    series: {
                    compare: ''percent''
                    }
                    },
                   
                    tooltip: {
                    pointFormat: ''{series.name}: {point.y} ({point.change}%)<br/>'',
                    yDecimals: 2
                    },
                   
                    series: seriesOptions
                });
        }

});'



WebStyle>>ensureHighStock
        "ensure jQuery JavaScript call in header of the page"

        | page url headerValue |
        self highStockProduction. "to ensure it"
        self highStockProductionResource.
        page := self app context page.
        url := '/highstock.js'.
        headerValue := ' src="' , url
                                , '" language="JavaScript" type="text/javascript"'.
        (page headers
                contains: [:each | each key = 'script' and: [each value = headerValue]])
                        ifFalse: [page addHeader: 'script' value: headerValue]

highStockProductionResource
        "WebStyle new highStockProductionResource"

        ^self resources at: #highStockProduction
                ifAbsentPut:
                        [WebMethodResource
                                fromMethod: #highStockProduction
                                on: self
                                contentType: 'text/javascript'
                                preferedUrl: '/highstock.js'
                                site: self site]

highStockProduction

        ^'/*
 Highstock JS v1.1.0 (2011-12-14)

 (c) 2009-2011 Torstein H?nsi

 License: www.highcharts.com/license
*/
(function(){function H(a,b){var c;a||(a={});for(c in b)a[c]=b[c];return a}function Ka(){for(var a=0,b=arguments,c=b.length,d={};a<c;a++)d[b[a++]]=b[a];return d}function N(a,b){return parseInt(a,b||10)}function Bb(a){return typeof a==="string"}function sb(a){return typeof a==="object"}function Ub(a){return typeof a==="number"}function Ib(a){return ta.log(a)/ta.LN10}function pc(a){return ta.pow(10,a)}function Jb(a,b){for(var c=a.length;c--;)if(a[c]===b){a.splice(c,1);break}}function z(a){return a!==
B&&a!==null}function O(a,b,c){var
................................................... some more .................................. ....
'
南無佛 南無法 南無僧
Janko Mivšek
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: can't find out how use Javascript libs such as HighStock

Janko Mivšek
Hi Empty,

First welcome to the list!

Please check the resulting page with FireBug or similar to see if
libraries are present in a header, then open each library in web browser
manually, like http:.../adapter/mootols.js' to check if they are
composed correctly.

Also check in FireBug if script you put after the element is actually
there. Also are some JS errors shown in console?

Hope this helps
Best regards
Janko

S, empty piše:

> Hi
> I'm very new to JavaScript as well as Aida/Web.
> The task is to show chart in HighStock JavaScript on a page that represents
> an object that holds the data.
> The chart lib has several js files, namely, a "js/highchart.js",
> "/adapter/prototype-adapter.js", "/adapter/mootools.js" and
> "/modules/exporting.js" and some /themes/xyz.js
> In WebStyle I manually added  methods for those JavaScript, after the
> examples found in WebStyle such as jQurery, including xyzResource and
> ensureXYZ etc.
> And I added lines to WebElement intending to add those JavaScript into the
> <head>.
> After this I used scriptAfter: to insert the code for charting. The code is
> just a copy of original example code.
> Well, it doesn't work.
> Any advises?
>
> Yours,
>
> JG
>
> P.S.
> Here are some code:
>
> viewChart
>
> | e |
> e := WebElement new.
> e ensureId.
> e addTextH1: 'highstock charts'.
> e addInputFieldAspect: #id for: self.
> e addButtonText: 'chart' action: #chart.
> e addBreak.
>         e add: self chartElement.
> e addBreak.
>   self style pageFrameWith: e title: 'charts'
>
>
> chartElement
>  
> | e |
> e := WebElement new.
> e ensureId.
> (e app style)
> ensureJQuery;
> ensureHighStock;
> ensureDarkBlueThemes;
> ensureDarkGreenThemes;
> ensureGrayThemes;
> ensureGridThemes;
> ensureSkiesThemes.
> "ensurePrototypeAdapter;
> ensureMooltoolsAdapter;"
> "ensureExportingModule;"
> "ensurePrototype;"
> "ensureHighStockProduction;"
> e addTextSmall: '*Charts to be improved'.
> e addBreak.
> e scriptAfter: self chartScript.
>   e update.
> ^e
>
> chartScript
>  
> ^'$(function() {
> var seriesOptions = [],
> yAxisOptions = [],
> seriesCounter = 0,
> names = [''MSFT'', ''AAPL'', ''GOOG''],
> colors = Highcharts.getOptions().colors;
>
> $.each(names, function(i, name) {
>
> $.getJSON(''http://www.highcharts.com/samples/data/jsonp.php?filename=''+
> name.toLowerCase() +''-c.json&callback=?'', function(data) {
>
> seriesOptions[i] = {
> name: name,
> data: data
> };
>
> // As we''re loading the data asynchronously, we don''t know what order
> it will arrive. So
> // we keep a counter and create the chart when all the data is loaded.
> seriesCounter++;
>
> if (seriesCounter == names.length) {
> createChart();
> }
> });
> });
>
>
>
> // create the chart when all data is loaded
> function createChart() {
>
> chart = new Highcharts.StockChart({
>    chart: {
>        renderTo: ''container''
>    },
>
>    rangeSelector: {
>        selected: 4
>    },
>
>    yAxis: {
>     labels: {
>     formatter: function() {
>     return (this.value > 0 ? ''+'' : '''') + this.value + ''%'';
>     }
>     },
>     plotLines: [{
>     value: 0,
>     width: 2,
>     color: ''silver''
>     }]
>    },
>    
>    plotOptions: {
>     series: {
>     compare: ''percent''
>     }
>    },
>    
>    tooltip: {
>     pointFormat: ''{series.name}: *{point.y}* ({point.change}%)<br/>'',
>     yDecimals: 2
>    },
>    
>    series: seriesOptions
> });
> }
>
> });'
>
>
>
> WebStyle>>ensureHighStock
> "ensure jQuery JavaScript call in header of the page"
>
> | page url headerValue |
> self highStockProduction. "to ensure it"
> self highStockProductionResource.
> page := self app context page.
> url := '/highstock.js'.
> headerValue := ' src="' , url
> , '" language="JavaScript" type="text/javascript"'.
> (page headers
> contains: [:each | each key = 'script' and: [each value = headerValue]])
> ifFalse: [page addHeader: 'script' value: headerValue]
>
> highStockProductionResource
> "WebStyle new highStockProductionResource"
>
> ^self resources at: #highStockProduction
> ifAbsentPut:
> [WebMethodResource
> fromMethod: #highStockProduction
> on: self
> contentType: 'text/javascript'
> preferedUrl: '/highstock.js'
> site: self site]
>
> highStockProduction
>
> ^'/*
>  Highstock JS v1.1.0 (2011-12-14)
>
>  (c) 2009-2011 Torstein H?nsi
>
>  License: www.highcharts.com/license
> */
> (function(){function H(a,b){var c;a||(a={});for(c in b)a[c]=b[c];return
> a}function Ka(){for(var
> a=0,b=arguments,c=b.length,d={};a<c;a++)d[b[a++]]=b[a];return d}function
> N(a,b){return parseInt(a,b||10)}function Bb(a){return typeof
> a==="string"}function sb(a){return typeof a==="object"}function Ub(a){return
> typeof a==="number"}function Ib(a){return ta.log(a)/ta.LN10}function
> pc(a){return ta.pow(10,a)}function Jb(a,b){for(var
> c=a.length;c--;)if(a[c]===b){a.splice(c,1);break}}function z(a){return a!==
> B&&a!==null}function O(a,b,c){var
> ................................................... some more
> .................................. ....
> '
>
>
> -----
> 南無佛 南無法 南無僧
> --
> View this message in context: http://forum.world.st/can-t-find-out-how-use-Javascript-libs-such-as-HighStock-tp4369643p4369643.html
> Sent from the AIDA/Web mailing list archive at Nabble.com.
> _______________________________________________
> Aida mailing list
> [hidden email]
> http://lists.aidaweb.si/mailman/listinfo/aida

--
Janko Mivšek
Aida/Web
Smalltalk Web Application Server
http://www.aidaweb.si
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida
Free forum by Nabble Edit this page