1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
    Ruskat is on a distinguished road

      0  

    Default Weather chart in Ext. Help

    Weather chart in Ext. Help


    Hi all! I have a data:
    Code:
    c:[16,18,22,18,17,20,22,23,24,25,21,22,19,18,19,22,24,21,17,19,17,17,20,20,17,18,19,17],
     cmin:[14,14,12,15,12,13,15,12,13,14,17,15,13,13,10,13,16,17,15,13,11,12,11,12,11,9,14,12],
     x:['30','1','3','5','7','9','11','13','15','17','19','21','23','25',],
    This data parsed php-file, and i need data for these pasted in my chart:
    HTML Code:
    Ext.onReady(function(){ 
        Ext.define('Browser', {
            extend: 'Ext.data.Model',
            fields: [{
                    name: 'tmax', 
                    type: 'float'
                },{
                    name: 'tmin', 
                    type: 'float'
                },{ 
                    name: 'month',
                    type: 'string'
                }]
        });
        var store = Ext.create('Ext.data.Store', {
            model: 'Browser',
            data: [
                {tmax: 36.52, tmin: 30.52, month: '1'},
                {tmax: 37.09, tmin: 25.50, month: '2 Ранок'},
                {tmax: 38.07, tmin: 13.52, month: '2 Вечір'},
                {tmax: 39.15, tmin: 7.52, month: '3'},
                {tmax: 41.38, tmin: 3.52, month: '4'},
                {tmax: 42.68, tmin: 36.52, month: '5'},
                {tmax: 43.12, tmin: -18.52, month: '6'}
            ]
        });
        Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
            constructor: function(config) {
                Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
                    colors: colors
                }, config));
            }
        });
        var chart = Ext.create('Ext.chart.Chart', {
           renderTo: Ext.getBody(),
           //theme: 'Red',
           //ExtJS4 предлагает несколько встроенных тем: 'Base', 'Green', 'Sky', 'Red', 'Purple', 'Blue', 'Yellow' и шесть тем категорий от 'Category1' до 'Category6'. По умолчанию используется тема 'Base'.
           width: 400,
           height: 300,
           store: store,
           legend: {
                position: 'right'
           },
           axes: [{
                title: 'Температура',
                type: 'Numeric',
                position: 'left',
                fields: ['tmax', 'tmin'],
                grid: true,
                minimum: -20,
                maximum: 50,
                 grid: {
                        odd: {
                            opacity: 1,
                            fill: '#ddd',
                            stroke: '#bbb',
                            'stroke-width': 0.5
                        }
                    }
            },{
                title: 'Дата',
                type: 'Category',
                position: 'bottom',
                grid:true,
                fields: ['month']
            }],
            series: [
            //-----Максимум
            {
                    type: 'line',
                    title: 'Максимум',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    fill: true, //Заливка (синя)
                    xField: 'month',
                    yField: 'tmax',
                    style: {
                        fill: '#f98',
                        stroke: '#f00',
                        'stroke-width': 3
                    },
                    markerConfig: {
                        type: 'cross',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0,
                        fill: '#ff0000',
                        stroke: '#ff8800',
                    },
                    stacked: true,
                    tips: {
                        trackMouse: true,
                        width: 72,
                        height: 28,
                        renderer: function(storeItem, item) {
                            this.setTitle(String(item.value[1] / 1) + ' °C');
                        }
                    }
            },
            //----Мінімум
            {
                    type: 'line',
                    title: 'Мінімум',
                    highlight: {
                        size: 7,
                        radius: 5
                    },
                    axis: 'left',
                    fill: true, //Заливка (синя)
                    smooth: true, //Гладкість
                    xField: 'month',
                    yField: 'tmin',
                    style: {
                        fill: '#98f',
                        stroke: '#00f',
                        'stroke-width': 3
                    },
                    markerConfig: {
                        type: 'circle',
                        size: 4,
                        radius: 4,
                        'stroke-width': 1, //Діаметр кульок
                        fill: '#46f',
                        stroke: '#0ff',
                    },
                    stacked: true,
                    tips: {
                        trackMouse: true,
                        width: 72,
                        height: 28,
                        renderer: function(storeItem, item) {
                            this.setTitle(String(item.value[1] / 1) + ' °C');
                        }
                    }
                }]
        });
            var win = Ext.create('Ext.Window', {
            width: 800,
            height: 600,
            minHeight: 80,
            minWidth: 50,
            hidden: false,
            maximizable: true,
            title: 'Чартик',
            renderTo: Ext.getBody(),
            layout: 'fit',
            tbar: [{
                text: 'Зберегти',
                handler: function() {
                    Ext.MessageBox.confirm('Підтвердження', 'Ви дійсно бажаєте зберегти знімок діаграми?', function(choice){
                        if(choice == 'yes'){
                            chart.save({
                                type: 'image/png'
                            });
                        }
                    });
                }
            }, {
                text: 'Reload Data',
                handler: function() {
                    // Add a short delay to prevent fast sequential clicks
                    window.loadTask.delay(100, function() {
                        store1.loadData(generateData(5, 0));
                    });
                }
            }],
            items: chart
        });
    });
    from PHP. How this how to do it? Help, please in a code.
    Wiew of pasted data most be:
    16 -14 - 30
    18 - 14 - 30
    22 - 12 - 1
    (Minimal temp (16), max. temp (14) - this 2 values per one day (30)

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    5,446
    Vote Rating
    112
    Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice

      0  

    Default


    Looks like you will have to iterate over your data before you configure it into the store. What have you tried so far?

Thread Participants: 1