Заметки под рукой

Этот сайт содержит небольшие заметки и рецепты, которые вечно забываешь и их приходится гуглить. Поэтому создатель сайта решил их сохранить в какое-то одно место, чтобы иметь быстрый доступ к ним.

Сим-сим

Пример графика на ExtJs 3.2, с временной осью

Опубликовал bobathecar в 07:11 05.04.2010
Для начала подключаем Ext
Код: HTML
1
2
3
4
<LINK href="/extjs/resources/css/ext-all.css" type="text/css" rel="stylesheet">
<SCRIPT type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></SCRIPT>
<SCRIPT type="text/javascript" src="/extjs/ext-all.js"></SCRIPT>
<SCRIPT type="text/javascript" src="/extjs/src/locale/ext-lang-ru.js"></SCRIPT>
Далее создаем JsonStore для нашего графика:
Код: JavaScript
 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
var store = new Ext.data.JsonStore({                                                
    url:'/url/to/serverscript.php',  
    root: 'r', 
    fields: 
[
      // Указываем формат поля времени, поле должно прийти вида 2010-03-04 18:34:55
      {name:'data',type:'date',dateFormat:'Y-m-d H:i:s'},
      // Второе поле просто число
      {name:'c',type:'int'}
      ],
    // Разрешаем автозагрузку
    autoLoad: true                                                            
});

// Указываем необходимые переменные для ExtJs
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';
Ext.chart.Chart.CHART_URL = '/extjs/resources/charts.swf';

//----------
// Функция для форматирования Date объекта
function format_date_whithout_year(d) {
    return d.format('d.m в H:i');           
}

// Инициируем график
Ext.onReady(function() {                                                   
    Ext.QuickTips.init();  

    // График-----------
    var statistic_graf = new Ext.Panel({                                  
        title: 'Сводная почасовая активность модераторов.',               
        // Указываем id divа куда будет нарисован график.
        renderTo: 'content-charts',                                       
        autoWidth: true,                                 
        height: 400,                                               
        items: {                                                          
            xtype: 'linechart',                                           
            store: store,                                        
            xField: 'data',                                               
            yField: 'c',                                                  
            xAxis: new Ext.chart.TimeAxis({
                            labelRenderer: format_date_whithout_year,
                            calculateByLabelSize: true             
                            })      
            }
      });
});
Вся магия в том, что указан тип данных date в JsonStore, формат даты и использована функция для форматирования типа данных Date
Нет комментариев