Extjs 2.3 et amcharts

Bonjour,

Je dispose d'une application développée avec ExtJS2.3 à laquelle je souhaiterai simplement ajouter quelques graphiques type amcharts.

Au niveau du code Extjs, je souhaiterai afficher les graphiques à l'intérieur d'un viewport.

Pour commencer, j'essaye un graphique simple issu de la documentation de amcharts.

J'ai essayé différentes choses mais cela ne fonctionne pas car au mieux mon graphique s'affiche au dessus le viewport et non pas dans la zone "center" comme espéré.

Quelqu'un a t'il un exemple ou des indications à me fournir pour que je puisse afficher un graphique à l'intérieur de mon viewport ?

D'avance merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
var chart;
 
            var chartData = [
                {
                    "name": "John",
                    "startTime": 8,
                    "endTime": 11,
                    "color": "#FF0F00"
                },
                {
                    "name": "Joe",
                    "startTime": 10,
                    "endTime": 13,
                    "color": "#FF9E01"
                },
                {
                    "name": "Susan",
                    "startTime": 11,
                    "endTime": 18,
                    "color": "#F8FF01"
                },
                {
                    "name": "Eaton",
                    "startTime": 15,
                    "endTime": 19,
                    "color": "#04D215"
                }
            ];
 
 
            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "name";
                chart.rotate = true;
                chart.columnWidth = 0.9;
                chart.startDuration = 1;
 
                // AXES
                // Category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.gridAlpha = 0.1;
                categoryAxis.axisAlpha = 0;
                categoryAxis.gridPosition = "start";
 
                // Value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.gridAlpha = 0.1;
                valueAxis.axisAlpha = 0;
                valueAxis.unit = ":00";
                chart.addValueAxis(valueAxis);
 
                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.valueField = "endTime";
                graph.openField = "startTime";
                graph.type = "column";
                graph.lineAlpha = 0;
                graph.colorField = "color";
                graph.fillAlphas = 0.8;
                graph.balloonText = "<b>[[category]]</b><br>starts at [[startTime]]:00<br>ends at [[endTime]]:00";
                chart.addGraph(graph);
 
                chart.creditsPosition = "top-right";
 
 
 
 
 
viewport = new Ext.Viewport
	({
		layout:'border',
		items:[
		{
			id : 'north',
			region:'north',
	         	title : translation.viewport.title_north[locale],
			height:30,
			tbar: stb
 
		},
		{
			id : 'center',
			name : 'center',
			region:'center',
			title : translation.viewport.title_center[locale],
			layout:'fit',
			height:450,
			items: 
			[
				{
 
                                       /* ICI */
                                       chart
 
				}
			]
		}
		{
			id : 'south-panel',
			region:'south',
			hideParent : false,
			height:10,
			border: false,
			hidden : true
			margins:'0 0 0 0'
 
		}
 
		]
	});