Bonjour

J'utilise Extjs 4

Je veux créer un chart avec l'axe des x : la date l'axe des y les valeurs à partir d'un fichier json obtenu par php

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
    Ext.define('Model', {
        extend: 'Ext.data.Model',
        fields: [ 
		{name: 'date',convert: dateParse},
		{name: 'valeur', type: 'float'}
		]
    });
 
 
var store = new Ext.data.Store({
     model: 'Model',
     proxy: {
         type: 'ajax',
            extraParams: {code: '04213000',type_donnees:'q',table: 'j',dt: 2016},
           url : '../php/maclocdate.php',
           reader: {type: 'json',root: 'resultval'}
         },
});
 
    store.load();
L'affichage d'un grid est immédiat

Mais l'affichage d'un chart est lent puis plante au dessus d'environ 200 valeurs

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
   var panel2 = Ext.create('widget.panel', {
        width: 600,
        height: 300,
        title: 'chart',
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: {
            xtype: 'chart',
            animate: false,
            store: store,
            insetPadding: 30,
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['valeur'],
                title: false,
                grid: true,
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0'),
                    font: '10px Arial'
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['date'],
                title: false,
		label: {renderer : Ext.util.Format.dateRenderer('d/m/y'),orientation: 'horizontal',
		rotate: {degrees: -70},}
            }],
            series: [{
                type: 'line',
                axis: 'left',
                xField: 'date',
                yField: 'valeur',
                tips: {
                    trackMouse: true,
                    width: 110,
                    height: 50,
                    renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('valeur') + ' m2 au mois de ' + Ext.Date.format(new Date(storeItem.get('date')), 'd M y'));
                    }
                },
                style: {
                    fill: '#38B8BF',
                    stroke: '#38B8BF',
                    'stroke-width': 3
                },
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0,
                    fill: '#38B8BF',
                    stroke: '#38B8BF'
                }
            }]
        }
    });
Comment afficher un chart lorsque le fichier json est important?

Merci de votre aide

Lulu