Discussion :

[kineton]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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'
 
		}
 
		]
	});

[sekaijin]

je ne connais pas bien amcharts
mais il y a un moyen pour afficher le chart dans un DIV

Pour placer ton chart dans un conteneur Ext il te faut récupérer le div de ce conteneur
et demander au amcharts d'y placer le chart

un moyen simple est d'utiliser la methode onRender du conteneur
A+JYT

[ascito]

sur quelle taille d’écran?