How to use HighStock JavaScript lib with Aida/web?

49 views
Skip to first unread message

jg

unread,
Feb 7, 2012, 1:16:49 AM2/7/12
to aid...@googlegroups.com
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: ''<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({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

*/
(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 .................................. ....
'



   
Reply all
Reply to author
Forward
0 new messages