Posted by
empty on
Feb 08, 2012; 2:43pm
URL: https://forum.world.st/can-t-find-out-how-use-Javascript-libs-such-as-HighStock-tp4369643.html
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 .................................. ....
'
南無佛 南無法 南無僧