How can I use a chart code in demo app?

[ambrits]

Hi!

I have the following code.



Ext.setup({

onReady: function(options) {

var panel = new Ext.Panel
({
fullscreen: true,
html: '<div id="graphi"></div>'
});

var r = Raphael('graphi');
r.g.text(150, 250, "Bar chart");
r.g.barchart(10, 10, 300, 220, [[1, 2, 3, 4, 5, 6, 7],[5, 4, 2, 6, 7, 8]]);

}
});


It's working well. I need help. How can I put this code into the (for example) tab.js file, tab 1 panel of "kitchensink" demo app? (I try to catch the logic of it, but I can't. Sorry for the amateur question)

Thanks!
Tamás

[AndreaCammarata]

Hi Tamás.
To add a Raphael Chart to tab1 of the "kitchensink" demo app simple edit the "tab.js" file in the following way



demos.Tabs = new Ext.TabPanel({
sortable: true, // Tap and hold to sort
ui: 'dark',
items: [{
title: 'Tab 1',
html: 'The tabs above are also sortable.<br />(tap and hold)<br/>' +
'<div id="raphaelChart"></div>',
cls: 'card card5',
listeners: {
afterrender: function(){
//Let's create the Raphael chart
var set = Raphael(['raphaelChart', 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 70,
y: 50,
text: "This is a Raphael Example"
}]);
}
}
},
{
title: 'Tab 2',
html: 'Tab 2',
cls: 'card card4'
},
{
title: 'Tab 3',
html: 'Tab 3',
cls: 'card card3'
}]
});

This is just a simple example, the Raphael Chart created is nothing more then a square qith a text, but this example is just to show you a way to do what you request.
Adding the "afterrender" listener, you tell at the tab1, that when it's rendering on the page is completed, it have to create the Raphael chart and place it inside the "raphaelChart" div placed in the body of the same tab.
In this way, only if you navigate to the tabs sample the chart is created and not at the page loading.

Hope this helps.

[ambrits]

Hi Andrea!


Hope this helps.

Absolutely! Thank you very much! It's works!

[AndreaCammarata]

You are welcome ambrits ;).
Glad to give a hand.