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
    2,447
    Vote Rating
    52
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar