Alien-Web-ExtJS-V3
45 results

 view release on metacpan or  search on metacpan

share/docs/source/Chart.html  view on Meta::CPAN 

            name: 'Tahoma',
            color: 0x444444,
            size: 11
        },
        dataTip: {
            padding: 5,
            border: {
                color: 0x99bbe8,
                size:1
            },
            background: {
                color: 0xDAE7F6,
                alpha: .9
            },
            font: {
                name: 'Tahoma',
                color: 0x15428B,
                size: 10,
                bold: true
            }
        }
    },

<span id='Ext-chart-Chart-cfg-url'>    /**
</span>     * @cfg {String} url
     * The url to load the chart from. This defaults to Ext.chart.Chart.CHART_URL, which should
     * be modified to point to the local charts resource.
     */

<span id='Ext-chart-Chart-cfg-extraStyle'>    /**
</span>     * @cfg {Object} extraStyle
     * Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to &lt;tt&gt;null&lt;/tt&gt;.
     * For a detailed list of the options available, visit the YUI Charts site
     * at &lt;a href=&quot;http://developer.yahoo.com/yui/charts/#basicstyles&quot;&gt;http://developer.yahoo.com/yui/charts/#basicstyles&lt;/a&gt;&lt;br/&gt;
     * Some of the options availabe:&lt;br /&gt;
     * &lt;ul style=&quot;padding:5px;padding-left:16px;list-style-type:inherit;&quot;&gt;
     * &lt;li&gt;&lt;b&gt;padding&lt;/b&gt; - The space around the edge of the chart's contents. Padding does not increase the size of the chart.&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;animationEnabled&lt;/b&gt; - A Boolean value that specifies whether marker animations are enabled or not. Enabled by default.&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;font&lt;/b&gt; - An Object defining the font style to be used in the chart. Defaults to &lt;tt&gt;{ name: 'Tahoma', color: 0x444444, size: 11 }&lt;/tt&gt;&lt;br/&gt;
     *  &lt;ul style=&quot;padding:5px;padding-left:26px;list-style-type:circle;&quot;&gt;
     *      &lt;li&gt;&lt;b&gt;name&lt;/b&gt; - font name&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;color&lt;/b&gt; - font color (hex code, ie: &quot;#ff0000&quot;, &quot;ff0000&quot; or 0xff0000)&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;size&lt;/b&gt; - font size in points (numeric portion only, ie: 11)&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;bold&lt;/b&gt; - boolean&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;italic&lt;/b&gt; - boolean&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;underline&lt;/b&gt; - boolean&lt;/li&gt;
     *  &lt;/ul&gt;
     * &lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;border&lt;/b&gt; - An object defining the border style around the chart. The chart itself will decrease in dimensions to accomodate the border.&lt;br/&gt;
     *  &lt;ul style=&quot;padding:5px;padding-left:26px;list-style-type:circle;&quot;&gt;
     *      &lt;li&gt;&lt;b&gt;color&lt;/b&gt; - border color (hex code, ie: &quot;#ff0000&quot;, &quot;ff0000&quot; or 0xff0000)&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;size&lt;/b&gt; - border size in pixels (numeric portion only, ie: 1)&lt;/li&gt;
     *  &lt;/ul&gt;
     * &lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;background&lt;/b&gt; - An object defining the background style of the chart.&lt;br/&gt;
     *  &lt;ul style=&quot;padding:5px;padding-left:26px;list-style-type:circle;&quot;&gt;
     *      &lt;li&gt;&lt;b&gt;color&lt;/b&gt; - border color (hex code, ie: &quot;#ff0000&quot;, &quot;ff0000&quot; or 0xff0000)&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;image&lt;/b&gt; - an image URL. May be relative to the current document or absolute.&lt;/li&gt;
     *  &lt;/ul&gt;
     * &lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;legend&lt;/b&gt; - An object defining the legend style&lt;br/&gt;
     *  &lt;ul style=&quot;padding:5px;padding-left:26px;list-style-type:circle;&quot;&gt;
     *      &lt;li&gt;&lt;b&gt;display&lt;/b&gt; - location of the legend. Possible values are &quot;none&quot;, &quot;left&quot;, &quot;right&quot;, &quot;top&quot;, and &quot;bottom&quot;.&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;spacing&lt;/b&gt; - an image URL. May be relative to the current document or absolute.&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;padding, border, background, font&lt;/b&gt; - same options as described above.&lt;/li&gt;
     *  &lt;/ul&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;dataTip&lt;/b&gt; - An object defining the style of the data tip (tooltip).&lt;br/&gt;
     *  &lt;ul style=&quot;padding:5px;padding-left:26px;list-style-type:circle;&quot;&gt;
     *      &lt;li&gt;&lt;b&gt;padding, border, background, font&lt;/b&gt; - same options as described above.&lt;/li&gt;
     *  &lt;/ul&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;xAxis and yAxis&lt;/b&gt; - An object defining the style of the style of either axis.&lt;br/&gt;
     *  &lt;ul style=&quot;padding:5px;padding-left:26px;list-style-type:circle;&quot;&gt;
     *      &lt;li&gt;&lt;b&gt;color&lt;/b&gt; - same option as described above.&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;size&lt;/b&gt; - same option as described above.&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;showLabels&lt;/b&gt; - boolean&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;labelRotation&lt;/b&gt; - a value in degrees from -90 through 90. Default is zero.&lt;/li&gt;
     *  &lt;/ul&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;majorGridLines and minorGridLines&lt;/b&gt; - An object defining the style of the style of the grid lines.&lt;br/&gt;
     *  &lt;ul style=&quot;padding:5px;padding-left:26px;list-style-type:circle;&quot;&gt;
     *      &lt;li&gt;&lt;b&gt;color, size&lt;/b&gt; - same options as described above.&lt;/li&gt;
     *  &lt;/ul&gt;&lt;/li&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;zeroGridLine&lt;/b&gt; - An object defining the style of the style of the zero grid line.&lt;br/&gt;
     *  &lt;ul style=&quot;padding:5px;padding-left:26px;list-style-type:circle;&quot;&gt;
     *      &lt;li&gt;&lt;b&gt;color, size&lt;/b&gt; - same options as described above.&lt;/li&gt;
     *  &lt;/ul&gt;&lt;/li&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;majorTicks and minorTicks&lt;/b&gt; - An object defining the style of the style of ticks in the chart.&lt;br/&gt;
     *  &lt;ul style=&quot;padding:5px;padding-left:26px;list-style-type:circle;&quot;&gt;
     *      &lt;li&gt;&lt;b&gt;color, size&lt;/b&gt; - same options as described above.&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;length&lt;/b&gt; - the length of each tick in pixels extending from the axis.&lt;/li&gt;
     *      &lt;li&gt;&lt;b&gt;display&lt;/b&gt; - how the ticks are drawn. Possible values are &quot;none&quot;, &quot;inside&quot;, &quot;outside&quot;, and &quot;cross&quot;.&lt;/li&gt;
     *  &lt;/ul&gt;&lt;/li&gt;&lt;/li&gt;
     * &lt;/ul&gt;
     */
    extraStyle: null,

<span id='Ext-chart-Chart-cfg-seriesStyles'>    /**
</span>     * @cfg {Object} seriesStyles
     * Contains styles to apply to the series after a refresh. Defaults to &lt;tt&gt;null&lt;/tt&gt;.
     */
    seriesStyles: null,

<span id='Ext-chart-Chart-cfg-disableCaching'>    /**
</span>     * @cfg {Boolean} disableCaching
     * True to add a &quot;cache buster&quot; to the end of the chart url. Defaults to true for Opera and IE.
     */
    disableCaching: Ext.isIE || Ext.isOpera,
<span id='Ext-chart-Chart-property-disableCacheParam'>    disableCacheParam: '_dc',
</span>
<span id='Ext-chart-Chart-method-initComponent'>    initComponent : function(){
</span>        Ext.chart.Chart.superclass.initComponent.call(this);
        if(!this.url){
            this.url = Ext.chart.Chart.CHART_URL;
        }
        if(this.disableCaching){
            this.url = Ext.urlAppend(this.url, String.format('{0}={1}', this.disableCacheParam, new Date().getTime()));
        }
        this.addEvents(
            'itemmouseover',
            'itemmouseout',
            'itemclick',
            'itemdoubleclick',
            'itemdragstart',
            'itemdrag',
            'itemdragend',
<span id='Ext-chart-Chart-event-beforerefresh'>            /**
</span>             * @event beforerefresh
             * Fires before a refresh to the chart data is called.  If the beforerefresh handler returns
             * &lt;tt&gt;false&lt;/tt&gt; the {@link #refresh} action will be cancelled.
             * @param {Chart} this
             */
            'beforerefresh',
<span id='Ext-chart-Chart-event-refresh'>            /**
</span>             * @event refresh
             * Fires after the chart data has been refreshed.
             * @param {Chart} this
             */
            'refresh'
        );
        this.store = Ext.StoreMgr.lookup(this.store);
    },

<span id='Ext-chart-Chart-method-setStyle'>    /**
</span>     * Sets a single style value on the Chart instance.
     *
     * @param name {String} Name of the Chart style value to change.
     * @param value {Object} New value to pass to the Chart style.
     */
     setStyle: function(name, value){
         this.swf.setStyle(name, Ext.encode(value));
     },

<span id='Ext-chart-Chart-method-setStyles'>    /**
</span>     * Resets all styles on the Chart instance.
     *
     * @param styles {Object} Initializer for all Chart styles.
     */
    setStyles: function(styles){
        this.swf.setStyles(Ext.encode(styles));
    },

<span id='Ext-chart-Chart-method-setSeriesStyles'>    /**
</span>     * Sets the styles on all series in the Chart.
     *
     * @param styles {Array} Initializer for all Chart series styles.
     */
    setSeriesStyles: function(styles){
        this.seriesStyles = styles;
        var s = [];
        Ext.each(styles, function(style){
            s.push(Ext.encode(style));
        });
        this.swf.setSeriesStyles(s);
    },

<span id='Ext-chart-Chart-method-setCategoryNames'>    setCategoryNames : function(names){
</span>        this.swf.setCategoryNames(names);
    },

<span id='Ext-chart-Chart-method-setLegendRenderer'>    setLegendRenderer : function(fn, scope){
</span>        var chart = this;
        scope = scope || chart;
        chart.removeFnProxy(chart.legendFnName);
        chart.legendFnName = chart.createFnProxy(function(name){
            return fn.call(scope, name);
        });
        chart.swf.setLegendLabelFunction(chart.legendFnName);
    },

<span id='Ext-chart-Chart-method-setTipRenderer'>    setTipRenderer : function(fn, scope){
</span>        var chart = this;
        scope = scope || chart;
        chart.removeFnProxy(chart.tipFnName);
        chart.tipFnName = chart.createFnProxy(function(item, index, series){
            var record = chart.store.getAt(index);
            return fn.call(scope, chart, record, index, series);
        });
        chart.swf.setDataTipFunction(chart.tipFnName);
    },

<span id='Ext-chart-Chart-method-setSeries'>    setSeries : function(series){
</span>        this.series = series;
        this.refresh();
    },

<span id='Ext-chart-Chart-method-bindStore'>    /**
</span>     * Changes the data store bound to this chart and refreshes it.
     * @param {Store} store The store to bind to this chart
     */
    bindStore : function(store, initial){
        if(!initial &amp;&amp; this.store){
            if(store !== this.store &amp;&amp; this.store.autoDestroy){
                this.store.destroy();
            }else{
                this.store.un(&quot;datachanged&quot;, this.refresh, this);
                this.store.un(&quot;add&quot;, this.delayRefresh, this);
                this.store.un(&quot;remove&quot;, this.delayRefresh, this);
                this.store.un(&quot;update&quot;, this.delayRefresh, this);
                this.store.un(&quot;clear&quot;, this.refresh, this);
            }
        }
        if(store){
            store = Ext.StoreMgr.lookup(store);
            store.on({
                scope: this,
                datachanged: this.refresh,
                add: this.delayRefresh,
                remove: this.delayRefresh,
                update: this.delayRefresh,
                clear: this.refresh
            });
        }
        this.store = store;
        if(store &amp;&amp; !initial){
            this.refresh();
        }
    },

<span id='Ext-chart-Chart-method-onSwfReady'>    onSwfReady : function(isReset){
</span>        Ext.chart.Chart.superclass.onSwfReady.call(this, isReset);
        var ref;
        this.swf.setType(this.type);

        if(this.chartStyle){
            this.setStyles(Ext.apply({}, this.extraStyle, this.chartStyle));
        }

        if(this.categoryNames){
            this.setCategoryNames(this.categoryNames);
        }

        if(this.tipRenderer){
            ref = this.getFunctionRef(this.tipRenderer);
            this.setTipRenderer(ref.fn, ref.scope);
        }
        if(this.legendRenderer){
            ref = this.getFunctionRef(this.legendRenderer);
            this.setLegendRenderer(ref.fn, ref.scope);
        }
        if(!isReset){
            this.bindStore(this.store, true);
        }
        this.refresh.defer(10, this);
    },

<span id='Ext-chart-Chart-method-delayRefresh'>    delayRefresh : function(){
</span>        if(!this.refreshTask){
            this.refreshTask = new Ext.util.DelayedTask(this.refresh, this);
        }
        this.refreshTask.delay(this.refreshBuffer);
    },

<span id='Ext-chart-Chart-method-refresh'>    refresh : function(){
</span>        if(this.fireEvent('beforerefresh', this) !== false){
            var styleChanged = false;
            // convert the store data into something YUI charts can understand
            var data = [], rs = this.store.data.items;
            for(var j = 0, len = rs.length; j &lt; len; j++){
                data[j] = rs[j].data;
            }
            //make a copy of the series definitions so that we aren't
            //editing them directly.
            var dataProvider = [];
            var seriesCount = 0;
            var currentSeries = null;
            var i = 0;
            if(this.series){
                seriesCount = this.series.length;
                for(i = 0; i &lt; seriesCount; i++){
                    currentSeries = this.series[i];
                    var clonedSeries = {};
                    for(var prop in currentSeries){
                        if(prop == &quot;style&quot; &amp;&amp; currentSeries.style !== null){
                            clonedSeries.style = Ext.encode(currentSeries.style);
                            styleChanged = true;
                            //we don't want to modify the styles again next time
                            //so null out the style property.
                            // this causes issues
                            // currentSeries.style = null;
                        } else{
                            clonedSeries[prop] = currentSeries[prop];
                        }
                    }
                    dataProvider.push(clonedSeries);
                }
            }

            if(seriesCount &gt; 0){
                for(i = 0; i &lt; seriesCount; i++){
                    currentSeries = dataProvider[i];
                    if(!currentSeries.type){
                        currentSeries.type = this.type;
                    }
                    currentSeries.dataProvider = data;
                }
            } else{
                dataProvider.push({type: this.type, dataProvider: data});
            }
            this.swf.setDataProvider(dataProvider);
            if(this.seriesStyles){
                this.setSeriesStyles(this.seriesStyles);
            }
            this.fireEvent('refresh', this);
        }
    },

<span id='Ext-chart-Chart-method-createFnProxy'>    // private
</span>    createFnProxy : function(fn){
        var fnName = 'extFnProxy' + (++Ext.chart.Chart.PROXY_FN_ID);
        Ext.chart.Chart.proxyFunction[fnName] = fn;
        return 'Ext.chart.Chart.proxyFunction.' + fnName;
    },

<span id='Ext-chart-Chart-method-removeFnProxy'>    // private
</span>    removeFnProxy : function(fn){
        if(!Ext.isEmpty(fn)){
            fn = fn.replace('Ext.chart.Chart.proxyFunction.', '');
            delete Ext.chart.Chart.proxyFunction[fn];
        }
    },

<span id='Ext-chart-Chart-method-getFunctionRef'>    // private
</span>    getFunctionRef : function(val){
        if(Ext.isFunction(val)){
            return {
                fn: val,
                scope: this
            };
        }else{
            return {
                fn: val.fn,
                scope: val.scope || this
            };
        }
    },

<span id='Ext-chart-Chart-method-onDestroy'>    // private
</span>    onDestroy: function(){
        if (this.refreshTask &amp;&amp; this.refreshTask.cancel){
            this.refreshTask.cancel();
        }
        Ext.chart.Chart.superclass.onDestroy.call(this);
        this.bindStore(null);
        this.removeFnProxy(this.tipFnName);
        this.removeFnProxy(this.legendFnName);
    }
});
Ext.reg('chart', Ext.chart.Chart);
Ext.chart.Chart.PROXY_FN_ID = 0;
Ext.chart.Chart.proxyFunction = {};

<span id='Ext-chart-Chart-static-property-CHART_URL'>/**
</span> * Sets the url to load the chart from. This should be set to a local resource.
 * @static
 * @type String
 */
Ext.chart.Chart.CHART_URL = 'http:/' + '/yui.yahooapis.com/2.8.2/build/charts/assets/charts.swf';

<span id='Ext-chart-PieChart-method-constructor'><span id='Ext-chart-PieChart'>/**
</span></span> * @class Ext.chart.PieChart
 * @extends Ext.chart.Chart
 * @constructor
 * @xtype piechart
 */
Ext.chart.PieChart = Ext.extend(Ext.chart.Chart, {
<span id='Ext-chart-PieChart-property-type'>    type: 'pie',
</span>
<span id='Ext-chart-PieChart-method-onSwfReady'>    onSwfReady : function(isReset){
</span>        Ext.chart.PieChart.superclass.onSwfReady.call(this, isReset);

        this.setDataField(this.dataField);
        this.setCategoryField(this.categoryField);
    },

<span id='Ext-chart-PieChart-method-setDataField'>    setDataField : function(field){
</span>        this.dataField = field;
        this.swf.setDataField(field);
    },

<span id='Ext-chart-PieChart-method-setCategoryField'>    setCategoryField : function(field){
</span>        this.categoryField = field;
        this.swf.setCategoryField(field);
    }
});
Ext.reg('piechart', Ext.chart.PieChart);

<span id='Ext-chart-CartesianChart-method-constructor'><span id='Ext-chart-CartesianChart'>/**
</span></span> * @class Ext.chart.CartesianChart
 * @extends Ext.chart.Chart
 * @constructor
 * @xtype cartesianchart
 */
Ext.chart.CartesianChart = Ext.extend(Ext.chart.Chart, {
<span id='Ext-chart-CartesianChart-method-onSwfReady'>    onSwfReady : function(isReset){
</span>        Ext.chart.CartesianChart.superclass.onSwfReady.call(this, isReset);
        this.labelFn = [];
        if(this.xField){
            this.setXField(this.xField);
        }
        if(this.yField){
            this.setYField(this.yField);
        }
        if(this.xAxis){
            this.setXAxis(this.xAxis);
        }

share/docs/source/Chart.html  view on Meta::CPAN 

     *
     * @property calculateCategoryCount
     * @type Boolean
     */
    calculateCategoryCount: false

});

<span id='Ext-chart-Series-method-constructor'><span id='Ext-chart-Series'>/**
</span></span> * @class Ext.chart.Series
 * Series class for the charts widget.
 * @constructor
 */
Ext.chart.Series = function(config) { Ext.apply(this, config); };

Ext.chart.Series.prototype =
{
<span id='Ext-chart-Series-property-type'>    /**
</span>     * The type of series.
     *
     * @property type
     * @type String
     */
    type: null,

<span id='Ext-chart-Series-property-displayName'>    /**
</span>     * The human-readable name of the series.
     *
     * @property displayName
     * @type String
     */
    displayName: null
};

<span id='Ext-chart-CartesianSeries-method-constructor'><span id='Ext-chart-CartesianSeries'>/**
</span></span> * @class Ext.chart.CartesianSeries
 * @extends Ext.chart.Series
 * CartesianSeries class for the charts widget.
 * @constructor
 */
Ext.chart.CartesianSeries = Ext.extend(Ext.chart.Series, {
<span id='Ext-chart-CartesianSeries-property-xField'>    /**
</span>     * The field used to access the x-axis value from the items from the data
     * source.
     *
     * @property xField
     * @type String
     */
    xField: null,

<span id='Ext-chart-CartesianSeries-property-yField'>    /**
</span>     * The field used to access the y-axis value from the items from the data
     * source.
     *
     * @property yField
     * @type String
     */
    yField: null,

<span id='Ext-chart-CartesianSeries-property-showInLegend'>    /**
</span>     * False to not show this series in the legend. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
     *
     * @property showInLegend
     * @type Boolean
     */
    showInLegend: true,

<span id='Ext-chart-CartesianSeries-property-axis'>    /**
</span>     * Indicates which axis the series will bind to
     *
     * @property axis
     * @type String
     */
    axis: 'primary'
});

<span id='Ext-chart-ColumnSeries-method-constructor'><span id='Ext-chart-ColumnSeries'>/**
</span></span> * @class Ext.chart.ColumnSeries
 * @extends Ext.chart.CartesianSeries
 * ColumnSeries class for the charts widget.
 * @constructor
 */
Ext.chart.ColumnSeries = Ext.extend(Ext.chart.CartesianSeries, {
<span id='Ext-chart-ColumnSeries-property-type'>    type: &quot;column&quot;
</span>});

<span id='Ext-chart-LineSeries-method-constructor'><span id='Ext-chart-LineSeries'>/**
</span></span> * @class Ext.chart.LineSeries
 * @extends Ext.chart.CartesianSeries
 * LineSeries class for the charts widget.
 * @constructor
 */
Ext.chart.LineSeries = Ext.extend(Ext.chart.CartesianSeries, {
<span id='Ext-chart-LineSeries-property-type'>    type: &quot;line&quot;
</span>});

<span id='Ext-chart-BarSeries-method-constructor'><span id='Ext-chart-BarSeries'>/**
</span></span> * @class Ext.chart.BarSeries
 * @extends Ext.chart.CartesianSeries
 * BarSeries class for the charts widget.
 * @constructor
 */
Ext.chart.BarSeries = Ext.extend(Ext.chart.CartesianSeries, {
<span id='Ext-chart-BarSeries-property-type'>    type: &quot;bar&quot;
</span>});


<span id='Ext-chart-PieSeries-method-constructor'><span id='Ext-chart-PieSeries'>/**
</span></span> * @class Ext.chart.PieSeries
 * @extends Ext.chart.Series
 * PieSeries class for the charts widget.
 * @constructor
 */
Ext.chart.PieSeries = Ext.extend(Ext.chart.Series, {
<span id='Ext-chart-PieSeries-property-type'>    type: &quot;pie&quot;,
</span><span id='Ext-chart-PieSeries-property-dataField'>    dataField: null,
</span><span id='Ext-chart-PieSeries-property-categoryField'>    categoryField: null
</span>});</pre>
</body>
</html>



( run in 0.766 second using v1.01-cache-2.11-cpan-fa01517f264 )