Provides the means to create various forms of charts using very little markup.

View in a new window...

Source Code

This example demonstrates the creation of a chart with three rows, the second row has content that is fetched from a remote source when it's header is clicked on.

<div control="chart[property=rows,type=line,height=400,width=400]" on="l:line_1 then render" style="float:left">
</div>
<div control="chart[property=rows,type=bar]" on="l:bar_1 then render" style="float:left">
</div>
<div control="chart[property=rows,type=pie]" on="l:pie_1 then render " style="float:left">
</div>
 
<script>
$MQL('l:app.compiled',function() {
        $MQ('l:line_1',{'rows':[{name:'coke',value:10},{name:'pepsi',value:5},{name:'tab',value:3}]});
        $MQ('l:pie_1',{'rows':[{name:'coke',value:10},{name:'pepsi',value:5},{name:'tab',value:3}]});
        $MQ('l:bar_1',{'rows':[{name:'coke',value:10},{name:'pepsi',value:5},{name:'tab',value:3}]});                              
});
</script>

In this sample, a chart with the name of 'myChart' is created with some initial properties. The function argument of createControl is called when the widget renders, and a dataset is added to it.

Create the control…

App.createControl(
	'myChart',
	'chart',
	{
		type:'bar',
		property:'rows'
	},
	function()
	{
		var d = [{name:'coke',value:10},{name:'pepsi',value:5},{name:'tab',value:3}]
		this.render({'rows':d})
	}
);

Get the handle to an instance of the control…

App.getControl('myChart','chart',function()
{
	var d = [{name:'coke',value:10},{name:'pepsi',value:5},{name:'tab',value:3}];
	this.render({'rows':d})
});

The accordion control is made up of a container div and a single level of divs within that container which will constitute it's rows when it is rendered. The control tag on the div indicates what kind of widget the div will become. The widget identity can accept the following initial parameters…

Initial options supported by the widget.

Functions either accept a single argument such as an integer or a string, otherwise they accept a one dimensional object literal. Any function that can be called as an action accepts the same parameters but in the action parameter format.