PDA

View Full Version : how to render the charts in multiple columns



Rohit
24 Nov 2009, 3:57 AM
how to render the (dynamic) charts in columns
Hi,

I am trying to create dynamic charts using EJSC charts within a panel.
Can anyone please tell me : how to render the (dynamic) charts in columns. Right now the charts are displayed in a single column.
For example, if I have three charts, the present layout is like :

chart1
chart 2
chart3

I need the layout to be
chart 1 chart2
chart3

Please let me know how to render the charts in multiple columns?

Here is my code :


var vnicPanel = new Ext.Panel({
autoScroll : true,
id:'vnicChartPanel',
region:'north',
//title:'vnic',
width:518,
collapsible :true,
resizable:true,
html:'<div id="vnicPanel" style="width:300px; height:200px;"></div>',
listeners :{
render : function(panel){
Ext.lib.Event.onAvailable( 'vnicPanel', function(){
for(var i=0;i<=nVnic;i++){
var myElement = document.createElement('div');// id="myChart" style="width:400px; height:200px;"></div>');
myElement.setAttribute('id','mychart'+i);
myElement.setAttribute('width',300);
myElement.setAttribute('height',200);
var div=document.getElementById('vnicPanel');
div.appendChild(myElement);
var chart = new EJSC.Chart("mychart"+i,
{
show_legend: false,
title: "vnic "+i,
show_messages: false,
x_axis_caption: "Time(Hour:Minute:Second)",
y_axis_caption: "Mbps",
allow_zoom: false,
x_axis_formatter: new EJSC.DateFormatter(
{ format_string: "HH:NN:SS",
useUTC: false
}
)
}
);
chart.addSeries(new EJSC.LineSeries(
new EJSC.ArrayDataHandler([[1,5],[2,1],[3,5],[4,0],[5,3]]))
);
}
});
}
}
});

can anyone Please let me how to render the charts in columns asap, i am in pressure :(

Thanks
Rohit