headers
empty | 8 Feb 15:43

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

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
Aida <at> aidaweb.si
http://lists.aidaweb.si/mailman/listinfo/aida
Permalink | Reply |

Gmane