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

    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
    8,778
    Vote Rating
    240
    Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of

      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