1. #421
    Sencha User
    Join Date
    Apr 2007
    Posts
    91
    Vote Rating
    0
    marcing is on a distinguished road

      0  

    Default


    Could someone attach working Highcharts 2.3 or 3.0 adapter and plugin for Extjs 3.4?

    Thanks

  2. #422
    Sencha User
    Join Date
    Mar 2013
    Posts
    9
    Vote Rating
    0
    Mr.Solomon is on a distinguished road

      0  

    Default


    I searched some demo of Ext.ux.Highchart on google for a long time ,none of them could work correctly,the highcharts.js show an error message "TypeError: Ua is not a function" ,and my Extjs version is 3.4 , if you find out one ,please send me an email(wan.how@gmail.com),thanks in advance

  3. #423
    Sencha User
    Join Date
    Mar 2010
    Posts
    20
    Vote Rating
    0
    jackygurui is on a distinguished road

      0  

    Default Highcharts 3.0.2 and ExtJS 3.3 (should work with 3.4)

    Highcharts 3.0.2 and ExtJS 3.3 (should work with 3.4)


    To get Highcharts 3.0.2 to work with ExtJS 3.3 (3.4 not tried), do not use the the adapter-extjs.js from this forum, but the Ext.ux.HighChart.js you will still need.

    Instead of the adapter from this forum, you should leave it to use the built in jquery adapter.

    All you need is to load jQuery first, before you load extjs.

    Code:
    <script type="text/javascript" src="/js/jquery/jquery-1.10.2.min.js">
    <script type="text/javascript" src="/js/ext3.3/adapter/ext/ext-base.js">
    <script type="text/javascript" src="/js/ext3.3/ext-all.js">
    This works fine for me, although you may need to replace the ext-base with the ext-jquery-adapter.js.

    Code:
    <script type="text/javascript" src="/js/jquery/jquery-1.10.2.min.js">
    <script type="text/javascript" src="/js/ext3.3/adapter/ext/jquery/ext-jquery-adapter.js">
    <script type="text/javascript" src="/js/ext3.3/ext-all.js">
    This also works fine.

    Both jQuery 1.10.2 and 2.0.3 work.

  4. #424
    Sencha User
    Join Date
    Mar 2010
    Posts
    20
    Vote Rating
    0
    jackygurui is on a distinguished road

      0  

    Default JsFiddle example for Highchart 2.0.3 + ExtJS 3.4

    JsFiddle example for Highchart 2.0.3 + ExtJS 3.4


    http://jsfiddle.net/mhYGx/

    EDIT: Due to the security checks in Chrome, it does not work under Chrome unless you load the external resources using JsFiddle resource panels. Firefox is fine.

    resource:
    Code:
    http://cdn.sencha.com/ext-3.4.0/resources/css/ext-all.css
    html:
    Code:
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://cdn.sencha.com/ext-3.4.0/adapter/jquery/ext-jquery-adapter.js"></script>
    <script src="http://cdn.sencha.com/ext-3.4.0/ext-all.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="https://raw.github.com/JoeKuan/Highcharts-Ext-JS-Adapter/master/Ext.ux.HighChart.js"></script>
    
    
    <div id="chart-win"></div>
    javascript:
    Code:
    var win = new Ext.Window({
        renderTo:'chart-win',
        layout:'fit',
        pageX: 50,
        pageY: 50,
        width:800,
        height:600,
        dragable: true,
        closeAction:'hide',
        plain: true,
        items:[{
            xtype: 'highchart',
            loadMask: true,
            chartConfig: {
                chart: {
                    zoomType: 'xy'
                },
                title: {
                    text: 'Average Monthly Weather Data for Tokyo'
                },
                subtitle: {
                    text: 'Source: WorldClimate.com'
                },
                xAxis: [{
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                }],
                yAxis: [{ // Primary yAxis
                    labels: {
                        formatter: function() {
                            return this.value +'°C';
                        },
                        style: {
                            color: '#89A54E'
                        }
                    },
                    title: {
                        text: 'Temperature',
                        style: {
                            color: '#89A54E'
                        }
                    },
                    opposite: true
        
                }, { // Secondary yAxis
                    gridLineWidth: 0,
                    title: {
                        text: 'Rainfall',
                        style: {
                            color: '#4572A7'
                        }
                    },
                    labels: {
                        formatter: function() {
                            return this.value +' mm';
                        },
                        style: {
                            color: '#4572A7'
                        }
                    }
        
                }, { // Tertiary yAxis
                    gridLineWidth: 0,
                    title: {
                        text: 'Sea-Level Pressure',
                        style: {
                            color: '#AA4643'
                        }
                    },
                    labels: {
                        formatter: function() {
                            return this.value +' mb';
                        },
                        style: {
                            color: '#AA4643'
                        }
                    },
                    opposite: true
                }],
                tooltip: {
                    shared: true
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    x: 120,
                    verticalAlign: 'top',
                    y: 80,
                    floating: true,
                    backgroundColor: '#FFFFFF'
                },
                series: [{
                    name: 'Rainfall',
                    color: '#4572A7',
                    type: 'column',
                    yAxis: 1,
                    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                    tooltip: {
                        valueSuffix: ' mm'
                    }
        
                }, {
                    name: 'Sea-Level Pressure',
                    type: 'spline',
                    color: '#AA4643',
                    yAxis: 2,
                    data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
                    marker: {
                        enabled: false
                    },
                    dashStyle: 'shortdot',
                    tooltip: {
                        valueSuffix: ' mb'
                    }
        
                }, {
                    name: 'Temperature',
                    color: '#89A54E',
                    type: 'spline',
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                    tooltip: {
                        valueSuffix: ' °C'
                    }
                }]
            }
        }],
        buttons: [{
            text: 'Close',
            handler: function(){
                win.hide();
            }
        }]
    }).show();
    Last edited by jackygurui; 18 Jul 2013 at 3:40 AM. Reason: READ EDIT

  5. #425
    Sencha User
    Join Date
    Mar 2010
    Posts
    20
    Vote Rating
    0
    jackygurui is on a distinguished road

      0  

    Default Plain HTML Source

    Plain HTML Source


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <title>Hello World</title>
            <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext-3.4.0/resources/css/ext-all.css" />
            <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
            <script src="http://cdn.sencha.com/ext-3.4.0/adapter/jquery/ext-jquery-adapter.js"></script>
            <script src="http://cdn.sencha.com/ext-3.4.0/ext-all.js"></script>
            <script src="http://code.highcharts.com/highcharts.js"></script>
            <script src="https://raw.github.com/JoeKuan/Highcharts-Ext-JS-Adapter/master/Ext.ux.HighChart.js"></script>
            <script>
                Ext.onReady(function() {
                    var win = new Ext.Window({
                        renderTo: 'chart-win',
                        layout: 'fit',
                        pageX: 50,
                        pageY: 50,
                        width: 800,
                        height: 600,
                        dragable: true,
                        closeAction: 'hide',
                        plain: true,
                        items: [{
                                xtype: 'highchart',
                                loadMask: true,
                                chartConfig: {
                                    chart: {
                                        zoomType: 'xy'
                                    },
                                    title: {
                                        text: 'Average Monthly Weather Data for Tokyo'
                                    },
                                    subtitle: {
                                        text: 'Source: WorldClimate.com'
                                    },
                                    xAxis: [{
                                            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                                                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                                        }],
                                    yAxis: [{// Primary yAxis
                                            labels: {
                                                formatter: function() {
                                                    return this.value + '°C';
                                                },
                                                style: {
                                                    color: '#89A54E'
                                                }
                                            },
                                            title: {
                                                text: 'Temperature',
                                                style: {
                                                    color: '#89A54E'
                                                }
                                            },
                                            opposite: true
    
                                        }, {// Secondary yAxis
                                            gridLineWidth: 0,
                                            title: {
                                                text: 'Rainfall',
                                                style: {
                                                    color: '#4572A7'
                                                }
                                            },
                                            labels: {
                                                formatter: function() {
                                                    return this.value + ' mm';
                                                },
                                                style: {
                                                    color: '#4572A7'
                                                }
                                            }
    
                                        }, {// Tertiary yAxis
                                            gridLineWidth: 0,
                                            title: {
                                                text: 'Sea-Level Pressure',
                                                style: {
                                                    color: '#AA4643'
                                                }
                                            },
                                            labels: {
                                                formatter: function() {
                                                    return this.value + ' mb';
                                                },
                                                style: {
                                                    color: '#AA4643'
                                                }
                                            },
                                            opposite: true
                                        }],
                                    tooltip: {
                                        shared: true
                                    },
                                    legend: {
                                        layout: 'vertical',
                                        align: 'left',
                                        x: 120,
                                        verticalAlign: 'top',
                                        y: 80,
                                        floating: true,
                                        backgroundColor: '#FFFFFF'
                                    },
                                    series: [{
                                            name: 'Rainfall',
                                            color: '#4572A7',
                                            type: 'column',
                                            yAxis: 1,
                                            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                                            tooltip: {
                                                valueSuffix: ' mm'
                                            }
    
                                        }, {
                                            name: 'Sea-Level Pressure',
                                            type: 'spline',
                                            color: '#AA4643',
                                            yAxis: 2,
                                            data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
                                            marker: {
                                                enabled: false
                                            },
                                            dashStyle: 'shortdot',
                                            tooltip: {
                                                valueSuffix: ' mb'
                                            }
    
                                        }, {
                                            name: 'Temperature',
                                            color: '#89A54E',
                                            type: 'spline',
                                            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                                            tooltip: {
                                                valueSuffix: ' °C'
                                            }
                                        }]
                                }
                            }],
                        buttons: [{
                                text: 'Close',
                                handler: function() {
                                    win.hide();
                                }
                            }]
                    }).show();
                });
            </script>
        </head>
        <body>
            <div id="chart-win"></div>
        </body>
    </html>

  6. #426
    Sencha User
    Join Date
    Apr 2007
    Posts
    91
    Vote Rating
    0
    marcing is on a distinguished road

      0  

    Default


    Thanks for your reply, I would still need it without jquery as we do not use it in our cms and it would be too much overhead to use it just for highcharts. Thanks anyway!

  7. #427
    Sencha User
    Join Date
    Mar 2010
    Posts
    20
    Vote Rating
    0
    jackygurui is on a distinguished road

      0  

    Default


    Quote Originally Posted by marcing View Post
    Thanks for your reply, I would still need it without jquery as we do not use it in our cms and it would be too much overhead to use it just for highcharts. Thanks anyway!
    There is a bit issue with using the adapter from this post. When you have a line chart with multiple axes and have little data. When chart is zoomed in, the scale of the axes can become a mess.

    The problem seems to be related to the animate method in the adapter. You may have to rewrite the method if you want to keep away from jquery.

    Plus, I don't think jquery is too much overhead anyway. If you use Ext base adapter with ExtJS, the ext is totally independent to jquery. Highchart will use it only when it needs to.

  8. #428
    Sencha User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    30
    Vote Rating
    3
    dgotty is on a distinguished road

      0  

    Default Extjs, Highcharts, and windows touch computers

    Extjs, Highcharts, and windows touch computers


    Hey everyone,

    I was just wondering if anyone had run into a weird issue with using extjs 3.4 and highcharts on a Windows touch capable laptop/desktop. If you look at my attachment you'll see the tooltip that pops up when I hover over a point on the graph but this doesn't work when we use a laptop that is touch enabled. There are a couple other issues as well:

    - clicking on a series in the legend at the bottom of the chart won't toggle the series
    - clicking on the export chart as image button doesn't popup the menu that allows the user to choose what image type to export the file in

    So basically it seems like any interaction the user would normally have with the chart doesn't work properly when on a touch capable laptop or desktop. If anyone has had this issue before any help or insight would be appreciated
    Attached Images

  9. #429
    Sencha User
    Join Date
    Apr 2007
    Posts
    91
    Vote Rating
    0
    marcing is on a distinguished road

      0  

    Default


    It is an overhead to load jquery just for one animation of one library, when otherwise jquery is not needed or wanted.

    So far we are using these, but it does not work with anything above 2.0 beta:
    Maybe someone has updated versions of these?


    Adapter:
    Code:
    /**
     * HighchartsAdapter
     * Updated for Highcharts release 1.2.5
     *
     * grep function added in 1.2.5
     */
    
    HighchartsAdapter = {
    
        each: Ext.each,
    
        map: function(arr, fn){
                var results = [];
                if (arr)
                for (var i = 0, len = arr.length; i < len; i++)
                        results[i] = fn.call(arr[i], arr[i], i, arr);
                return results;
        },
    
        grep: function( elems, callback, inv ) {
                var ret = [];
    
                // Go through the array, only saving the items
                // that pass the validator function
                for ( var i = 0, length = elems.length; i < length; i++ )
                        if ( !inv != !callback( elems[ i ], i ) )
                                ret.push( elems[ i ] );
    
                return ret;
        },
    
        merge: function(){
            var args = arguments;
            /**
             * jQuery extend function
             */
            var jqextend = function() {
                // copy reference to target object
                var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;
    
                // Handle a deep copy situation
                if ( typeof target === "boolean" ) {
                    deep = target;
                    target = arguments[1] || {};
                    // skip the boolean and the target
                    i = 2;
                }
    
                // Handle case when target is a string or something (possible in deep copy)
                if ( typeof target !== "object" && !Ext.isFunction(target) )
                    target = {};
    
                // extend jQuery itself if only one argument is passed
                if ( length == i ) {
                    target = this;
                    --i;
                }
    
                for ( ; i < length; i++ )
                    // Only deal with non-null/undefined values
                    if ( (options = arguments[ i ]) != null )
                            // Extend the base object
                            for ( var name in options ) {
                                    var src = target[ name ], copy = options[ name ];
    
                                    // Prevent never-ending loop
                                    if ( target === copy )
                                            continue;
    
                                    // Recurse if we're merging object values
                                    if ( deep && copy && typeof copy === "object" && !copy.nodeType )
                                            target[ name ] = jqextend( deep,
                                                    // Never move original objects, clone them
                                                    src || ( copy.length != null ? [ ] : { } )
                                            , copy );
    
                                    // Don't bring in undefined values
                                    else if ( copy !== undefined )
                                            target[ name ] = copy;
    
                            }
    
                // Return the modified object
                return target;
            };
            return jqextend(true, null, args[0], args[1], args[2], args[3]);
        },
    
        hyphenate: function (str){
            return str.replace(/([A-Z])/g, function(a, b){
                return '-'+ b.toLowerCase()
            });
        },
    
        addEvent: function (el, event, fn) {
            var xel = Ext.get(el);
            if (xel) {
                xel.addListener(event, fn)
            } else {
                if (!el.addListener){
                    Ext.apply(el, new Ext.util.Observable());
                }
                el.addListener(event, fn)
            }
    
        },
    
        fireEvent: function(el, event, eventArguments, defaultFunction) {
            var o = {
                type: event,
                target: el
            }
            Ext.apply(o, eventArguments)
    
            // if fireEvent is not available on the object, there hasn't been added
            // any events to it above
            if (el.fireEvent) {
                el.fireEvent(event, o);
            }
            
            // fire the default if it is passed and it is not prevented above
            if (defaultFunction) defaultFunction(o);
        },
    
        removeEvent: function(el, event, fn) {
            if (el.removeListener && el.purgeListeners) {
                if (event && fn) {
                    el.removeListener(event, fn)
                }
                else {
                    el.purgeListeners();
                }
            }
            else {
                var xel = Ext.get(el);
                if (xel) {
                    if (event && fn) {
                        xel.removeListener(event, fn)
                    }
                    else {
                        xel.purgeAllListeners();
                    }
                }
            }
        },
    
        stop: function (el) {
        // no animation exists in the animate Ext adapter method, so we don't need to stop anything
        },
    
        animate: function (eli, params, options){
            var el = eli;
            var isSVGElement = eli.attr;
    
            if (isSVGElement) {
                el = Ext.get(eli.element);
                //el.element = el.dom;
                //el.setStyle = el.getStyle = eli.attr;
            }
        	if(options){
        		if(options.duration==undefined || options.duration==0){
            		options.duration=1;
            	}
            	else{
            		options.duration=options.duration/1000;
            	}
            } else {
                options = {};
            }
    
            // Width
            if (params.width!==undefined) {
                if (isSVGElement){
                    if (Ext.isIE){
                        eli.attr('width', params.width);
                    } else {
                        eli.element.setAttributeNS(null, 'width', params.width)
                    }
                } else {
                    el.setWidth(params.width);
                }
            }
    
            // Height
            else if (params.height!==undefined) {
                if (isSVGElement){
                    if (Ext.isIE){
                        eli.attr('height', params.height);
                    } else {
                        eli.element.setAttributeNS(null, 'height', params.height)
                    }
                } else {
                    el.setHeight(params.height);
                }
            }
    
            // Left
            else if (params.left!==undefined) {
                if (isSVGElement){
                    if (Ext.isIE){
                        eli.attr('left', params.left);
                    } else {
                        eli.element.setAttributeNS(null, 'left', params.left)
                    }
                } else {
                    el.setLeft(params.left);
                }
            }
            // Top
            else if (params.top){
                if (isSVGElement){
                    if (Ext.isIE){
                        eli.attr('top', params.left);
                    } else {
                        eli.element.setAttributeNS(null, 'top', params.top)
                    }
                } else {
                    el.setTop(params.top);
                }
    
            // Transform
            } else if (params.translateX && params.translateY){
                if (isSVGElement){
                    if (Ext.isIE){
                        eli.attr('transform', 'translate(' + params.translateX + ',' + params.translateY + ' )');
                    } else {
                        eli.element.setAttributeNS(null, 'transform', 'translate(' + params.translateX + ',' + params.translateY + ' )');
                    }
                }
            }
    
            // Opacity
            if (params.opacity!==undefined) {
                if (!isSVGElement){
                    el.setOpacity(parseInt(params.opacity),{
                        duration:options.duration,
                        callback:options.complete
            });
        }
    }
    
            // Callback
            if (options.complete!=undefined)
                options.complete();
        },
    
        getAjax: function (url, callback) {
            Ext.Ajax.request({
                url: url,
                success: function(response){
                    callback(response.responseText);
                }
            });
        }
    }
    Component:
    Code:
    /**
     * @author Daniel Kloosterman
     * @email buz.i286@gmail.com
     * @version 0.3.1
     * @examples {@link http://www.i286.org/examples/}
     * @requires HighChart 1.2.5+, HighCharts-ExtJS-adapter
     *
     * Todo:
     * setSerieStyle, setStyle, Multiple datastores (0.4.0)
     *
     * 08-05-2010
     * + Small fix in refresh function
     *
     * 28-04-2010
     * + Added class: Ext.ux.HighChart.Serie, Ext.ux.HighChart.LineSerie, Ext.ux.HighChart.PieSerie, etc... :)
     * - Fixed: Wait for the panel to be resized to its correct size (Instead of 0,0)
     * after that create the chart.
     *
     * Updates:
     * 24-04-2010
     * - Fixed: setTitle/setSubTitle
     * + removeSerie, removeAllSeries
     * + loadMask
     *
     * 23-04-2010
     * - Fixed: Chart rendering (bindComponent was binding to itself not the parent)
     * + update: Added delay for rendering/updating the chart.
     *
     * 20-04-2010
     * - Fixed: Chart without store/series
     * - Fixed: addSeries (thx to buergi)
     *
     * 19-04-2010
     * - Fixed: Series keep hidden after resize.
     * + bindComponent - Fixes the issue with the fitlayout.
     * + setTitle, setSubTitle - Change the title/subtitle of the chart
     * + addSeries - Add new series to the chart
     */
    /**
     * @class Ext.ux.HighChart
     * @extends Ext.BoxComponent
     * The Ext.chart package provides the capability to visualize data with javascript based charting.
     * Each chart binds directly to an Ext.data.Store enabling automatic updates of the chart.
     * To change the look and feel of a chart, see the {@link http://www.highcharts.com/ref/#chart} config options.
     * @constructor
     * @xtype highchart
     */
    Ext.ux.HighChart = Ext.extend(Ext.BoxComponent, {
    
        /**
         * @cfg {Object} defaultSerieType
         * Sets styles for this chart. This contains default styling, so modifying this property will <b>override</b>
         * the built in styles of the chart. Use {@link #extraStyle} to add customizations to the default styling.
         */
        defaultSerieType: null,
    
        /**
         * @cfg {Boolean} resizable
         * True to allow resizing, false to disable resizing (defaults to true).
         */
        resizable: true,
    
        /**
         * @cfg {Integer} updateDelay
         * (defaults to 0)
         */
        updateDelay: 0,
    
        /**
         * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the chart while
         * loading. Defaults to false.
         */
        loadMask: false,
         
        /**
         * Add one or more series to the chart
         * @param {Array} series An array of series
         * @param {Boolean} append the serie. Defaults to true
         */
        addSeries: function(series, append){
            append = (append == null) ? true : false;
            var n = new Array(), c = new Array(), cls, serieObject;
            // Add empty data to the serie or just leave it normal. Bug in HighCharts?
            for (var i = 0; i < series.length; i++){
                var serie = series[i];
                if (!serie.serieCls){
                    if (serie.type!=null || this.defaultSerieType!=null){
                        cls = Ext.ux.HighChart.Series.get(serie.type!=null ? serie.type : this.defaultSerieType)
                    } else {
                        cls = Ext.ux.HighChart.Serie;
                    }
                    serieObject = new cls(serie)
                } else {
                    serieObject = serie;
                }
                c.push(serieObject.config);
                n.push(serieObject);
            }
    
            // Show in chart
            if (this.chart){
                if (!append){
                    this.removeAllSeries();
                    this.series = n;
                    this.chartConfig.series = c;
                } else {
                    this.chartConfig.series = this.chartConfig.series ? this.chartConfig.series.concat(c) : c;
                    this.series = this.series ? this.series.concat(n) : n;
                }
                for (var i = 0; i < c.length;i++){
                    this.chart.addSeries(c[i],true);
                }
                this.refresh();
    
            // Set the data in the config.
            } else {
                if (append){
                    this.chartConfig.series = this.chartConfig.series ? this.chartConfig.series.concat(c) : c;
                    this.series = this.series ? this.series.concat(n) : n;
    
                } else {
                    this.chartConfig.series = c;
                    this.series = n;
                }
            }
        },
    
        /**
         *
         */
        removeSerie: function(id, redraw){
            redraw = redraw || true;
            if (this.chart){
                this.chart.series[id].remove(redraw);
                this.chartConfig.series.splice(id, 1);
            }
            this.series.splice(id, 1);
        },
    
        /**
         * Remove all series
         */
        removeAllSeries: function(){
            var sc=this.chartConfig.series.length;
            for (var i=0;i<sc;i++){
                this.removeSerie(0);
            }
        },
    
        /**
         * Set the title of the chart
         * @param {String} title Text to set the subtitle
         */
        setTitle: function(title) {
            if (this.chartConfig.title)
                this.chartConfig.title.text = title;
            else
                this.chartConfig.title = { 
                    text: title
                }
    
            if (this.chart && this.chart.titleLayer)
                this.chart.titleLayer.div.firstChild.innerHTML = title;
        },
    
        /**
         * Set the subtitle of the chart
         * @param {String} title Text to set the subtitle
         */
        setSubTitle: function(title){
            if (this.chartConfig.subtitle)
                this.chartConfig.subtitle.text = title;
            else
                this.chartConfig.subtitle = { 
                    text: title
                }
    
            if (this.chart && this.chart.titleLayer)
                this.chart.titleLayer.div.lastChild.innerHTML = title;
        },
    
        initComponent: function(){
            if (this.store)
                this.store = Ext.StoreMgr.lookup(this.store);
            
            Ext.ux.HighChart.superclass.initComponent.call(this);
        },
    
        initEvents: function(){
            if(this.loadMask){
                this.loadMask = new Ext.LoadMask(this.el,
                    Ext.apply({
                        store:this.store
                        }, this.loadMask));
            }
        },
    
        afterRender: function(){
    
            if (this.store)
                this.bindStore(this.store, true);
    
            Ext.ux.HighChart.superclass.afterRender.call(this);
            
            this.bindComponent(true);
            
            Ext.applyIf(this.chartConfig.chart, {
                renderTo: this.el.dom,
                events: {
                    load: function(){
                        //this.updatePosition();
                    }
                }
            });
    
            Ext.applyIf(this.chartConfig, {
                xAxis: [{}]
            });
    
            if (this.xField && this.store){
                this.updatexAxisData();
            }
    
            if (this.series){
                this.addSeries(this.series, false);
            } else
                this.series = [];
       
            this.initEvents();
            // Make a delayed call to update the chart.
            this.update(500);
        },
    
        onMove: function(){
            //if (this.chart)
                //this.chart.updatePosition();
        },
    
        draw: function(){
            /**
             * Redraw the chart
             */
            if(this.chart && this.rendered) {
                if (this.resizable){
                    for (var i = 0; i < this.series.length;i++){
                        this.series[i].visible = this.chart.series[i].visible;
                    }
    
                    // Destroy
                    this.chart.destroy();
                    delete this.chart;
    
                    // Create a new chart
                    this.chart = new Highcharts.Chart(this.chartConfig);
                }
    
            /**
             * Create the chart
             */
            } else if (this.rendered){
                // Create the chart
                this.chart = new Highcharts.Chart(this.chartConfig);
            }
    
            for (i=0; i < this.series.length; i++){
                if (!this.series[i].visible)
                    this.chart.series[i].hide();
            }
    
            // Refresh the data
            this.refresh();
            //this.chart.updatePosition();
        },
    
        // @deprecated
        onContainerResize: function(){
            this.draw();
        },
    
        //private
        updatexAxisData: function(){
            var data = [], items = this.store.data.items;
    
            if (this.xField && this.store){
                for (var i=0; i < items.length; i++){
                    data.push(items[i].data[this.xField])
                }
                if (this.chart)
                    this.chart.xAxis[0].setCategories(data, true);
                else
                    this.chartConfig.xAxis[0].categories = data;
            }
        },
    
        bindComponent: function(bind){
            /**
             * Make the chart update the positions
             * positions are based on the window object and not on the
             * owner object.
             */
            var getWindow = function(parent){
                if (parent.ownerCt)
                    return getWindow(parent.ownerCt)
                else
                    return parent;
            }
            var w = getWindow(this);
    
            if (bind) {
                w.on('move', this.onMove, this);
    
                if (this.ownerCt)
                    this.ownerCt.on('render', this.update, this);
            }
            else {
                if (this.ownerCt)
                    this.ownerCt.un('render', this.update, this);
                w.un('move', this.onMove, this)
            }
        },
    
        /**
         * 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 && this.store){
                if(store !== this.store && this.store.autoDestroy){
                    this.store.destroy();
                } else {
                    this.store.un("datachanged", this.onDataChange, this);
                    this.store.un("load", this.onLoad, this);
                    this.store.un("add", this.onAdd, this);
                    this.store.un("remove", this.onRemove, this);
                    this.store.un("update", this.onUpdate, this);
                    this.store.un("clear", this.onClear, this);
                }
            }
    
            if(store){
                store = Ext.StoreMgr.lookup(store);
                store.on({
                    scope: this,
                    load: this.onLoad,
                    datachanged: this.onDataChange,
                    add: this.onAdd,
                    remove: this.onRemove,
                    update: this.onUpdate,
                    clear: this.onClear
                });
            }
    
            this.store = store;
            if(store && !initial){
                this.refresh();
            }
        },
    
        /**
         * Complete refresh of the chart
         */
        refresh: function(){
            if (this.store&&this.chart){
                var data = new Array(), seriesCount = this.chart.series.length, i;
    
                for (i=0;i<seriesCount;i++)
                    data.push(new Array());
    
                // We only want to go true the data once.
                // So we need to have all columns that we use in line.
                // But we need to create a point.
                var items = this.store.data.items;
                var xFieldData = [];
    
                for (var x = 0; x < items.length;x++){
                    var record = items[x];
                    if (this.xField){
                        xFieldData.push(record.data[this.xField]);
                    }
                    for (i = 0; i < seriesCount; i++){
                        var serie = this.series[i], point;
                        if ((serie.type == 'pie' && serie.useTotals)){
                            if (x == 0)
                                serie.clear();
                            point = serie.getData(record, x);
                        } else {
                            point = serie.getData(record, x);
                            data[i].push(point);
                        }
                    }
                }
    
                // Update the series
                for (i = 0; i < seriesCount; i++) {
                    if (this.series[i].useTotals) {
                        this.chart.series[i].setData(this.series[i].getTotals())
                    }
                    else if (data[i].length > 0)
                        this.chart.series[i].setData(data[i], true); // true == redraw.
                }
    
                if (this.xField){
                    this.updatexAxisData();
                }
                
                this.chart.redraw();
            }
        },
    
        /**
         * Update a selected row.
         */
        refreshRow: function(record){
            var index = this.store.indexOf(record);
            if (this.chart){
            for (var i = 0; i < this.chart.series.length; i++){
                var serie = this.chart.series[i];
                var point = this.series[i].getData(record, index);
                if (this.series[i].type == 'pie' && this.series[i].useTotals){
                    this.series[i].update(record);
                    this.chart.series[i].setData(this.series[i].getTotals());
                } else
                    serie.data[index].update(point);
            }
    
            if (this.xField){
                this.updatexAxisData();
            }
            }
        },
    
        /**
         * A function to delay the updates
         * @param {Integer} delay Set a custom delay
         */
        update: function(delay){
            var cdelay = delay||this.updateDelay;
            if(!this.updateTask){
                this.updateTask = new Ext.util.DelayedTask(this.draw, this);
            }
            this.updateTask.delay(cdelay);
        },
    
        // private
        onDataChange : function(){
            this.refresh();
        },
    
        // private
        onClear : function(){
            this.refresh();
        },
    
        // private
        onUpdate : function(ds, record){
            this.refreshRow(record);
        },
    
        // private
        onAdd : function(ds, records, index){
            var redraw = false, xFieldData = [];
    
            for (var i = 0; i < records.length; i++){
                var record = records[i];
                if (i==records.length-1) redraw = true;
                if (this.xField){
                    xFieldData.push(record.data[this.xField]);
                }
    
                for (var x = 0; x < this.chart.series.length; x++){
                    var serie = this.chart.series[x], s = this.series[x];
                    var point = s.getData(record, index+i);
                    if (!(s.type == 'pie' && s.useTotals)){
                        serie.addPoint(point, redraw);
                    }
                }
            }
            if (this.xField){
                this.chart.xAxis[0].setCategories(xFieldData, true);
            }
     
        },
    
    
        //private
        onResize: function(){
            Ext.ux.HighChart.superclass.onResize.call(this);
            this.update();
        },
    
        // private
        onRemove : function(ds, record, index, isUpdate){
            for (var i = 0; i < this.series.length; i++){
                var s = this.series[i];
                if (s.type == 'pie' && s.useTotals){
                    s.removeData(record, index);
                    this.chart.series[i].setData(s.getTotals())
                } else {
                    this.chart.series[i].data[index].remove(true)
                }
            }
            Ext.each(this.chart.series, function(serie){
                serie.data[index].remove(true);
            })
            if (this.xField){
                this.updatexAxisData();
            }
        },
    
        // private
        onLoad : function(){
        	this.fireEvent('storeload', this);
            this.refresh();
        },
    
        destroy: function(){
            delete this.series;
            if(this.chart) {
                this.chart.destroy();
                delete this.chart;
            }
            
            this.bindStore(null);
            this.bindComponent(null);
    
            Ext.ux.HighChart.superclass.destroy.call(this);
        }
    });
    Ext.reg('highchart', Ext.ux.HighChart);
    
    /**
     * @class Ext.ux.HighChart.Series
     * This class registers all available series, and provide backward compatibility
     * @constructor
     */
    Ext.ux.HighChart.Series = function(){
        var items = new Array(),
        values = new Array();
    
        return {
            reg: function(id, cls){
                items.push(cls); values.push(id);
            },
    
            get: function(id){
                return items[values.indexOf(id)];
            }
        }
    }();
    
    /**
     * @class Ext.ux.HighChart.Serie
     * Series class for the highcharts widget.
     * @constructor
     */
    Ext.ux.HighChart.Serie = function(config){
        config.type = this.type;
        if (!config.data){
            config.data = [];
        }
        Ext.apply(this, config); this.config = config;
    }
    Ext.ux.HighChart.Serie.prototype = {
    
        type: null,
    
        /**
         * The field used to access the x-axis value from the items from the data source.
         *
         * @property xField
         * @type String
         */
        xField: null,
    
        /**
         * The field used to access the y-axis value from the items from the data source.
         *
         * @property yField
         * @type String
         */
        yField: null,
    
        /**
         * The field used to hide the serie initial. Defaults to true.
         *
         * @property visible
         * @type boolean
         */
        visible: true,
    
        clear: Ext.emptyFn,
        
        getData: function(record, index){
            var yField = this.yField || this.dataIndex, xField = this.xField,
            point = {
                data: record.data,
                y: record.data[yField]
            };
    		if (record.data['color'] != undefined) point.color = record.data['color']; // added by mg
            if (xField) point.x = record.data[xField];
            return point;
        },
    
        serieCls: true
    };
    
    /**
     * @class Ext.ux.HighChart.SplineSerie
     * @extends Ext.ux.HighChart.Serie
     * SplineSerie class for the charts widget.
     * @constructor
     */
    Ext.ux.HighChart.SplineSerie = Ext.extend(Ext.ux.HighChart.Serie, {
        type: 'spline'
    });
    Ext.ux.HighChart.Series.reg('spline', Ext.ux.HighChart.SplineSerie);
    
    /**
     * @class Ext.ux.HighChart.ColumnSerie
     * @extends Ext.ux.HighChart.Serie
     * ColumnSerie class for the charts widget.
     * @constructor
     */
    Ext.ux.HighChart.ColumnSerie = Ext.extend(Ext.ux.HighChart.Serie, {
        type: 'column'
    });
    Ext.ux.HighChart.Series.reg('column', Ext.ux.HighChart.ColumnSerie);
    
    /**
     * @class Ext.ux.HighChart.BarSerie
     * @extends Ext.ux.HighChart.Serie
     * BarSerie class for the charts widget.
     * @constructor
     */
    Ext.ux.HighChart.BarSerie = Ext.extend(Ext.ux.HighChart.Serie, {
        type: 'bar'
    });
    Ext.ux.HighChart.Series.reg('bar', Ext.ux.HighChart.BarSerie);
    
    /**
     * @class Ext.ux.HighChart.SplineSerie
     * @extends Ext.ux.HighChart.Serie
     * LineSerie class for the charts widget.
     * @constructor
     */
    Ext.ux.HighChart.LineSerie = Ext.extend(Ext.ux.HighChart.Serie, {
        type: 'line'
    });
    Ext.ux.HighChart.Series.reg('line', Ext.ux.HighChart.LineSerie);
    
    /**
     * @class Ext.ux.HighChart.SplineSerie
     * @extends Ext.ux.HighChart.Serie
     * AreaSerie class for the charts widget.
     * @constructor
     */
    Ext.ux.HighChart.AreaSerie = Ext.extend(Ext.ux.HighChart.Serie, {
        type: 'area'
    });
    Ext.ux.HighChart.Series.reg('area', Ext.ux.HighChart.AreaSerie);
    
    /**
     * @class Ext.ux.HighChart.SplineSerie
     * @extends Ext.ux.HighChart.Serie
     * AreasplineSerie class for the charts widget.
     * @constructor
     */
    Ext.ux.HighChart.AreaSplineSerie = Ext.extend(Ext.ux.HighChart.Serie, {
        type: 'areaspline'
    });
    Ext.ux.HighChart.Series.reg('areaspline', Ext.ux.HighChart.AreaSplineSerie);
    
    /**
     * @class Ext.ux.HighChart.ScatterSerie
     * @extends Ext.ux.HighChart.Serie
     * ScatterSerie class for the charts widget.
     * @constructor
     */
    Ext.ux.HighChart.ScatterSerie = Ext.extend(Ext.ux.HighChart.Serie, {
        type: 'scatter'
    });
    Ext.ux.HighChart.Series.reg('scatter', Ext.ux.HighChart.ScatterSerie);
    
    /**
     * @class Ext.ux.HighChart.PieSerie
     * @extends Ext.ux.HighChart.Serie
     * PieSerie class for the charts widget.
     * @constructor
     */
    Ext.ux.HighChart.PieSerie = Ext.extend(Ext.ux.HighChart.Serie, {
    
        type: 'pie',
    
        /**
         * Categoriefield
         */
        categorieField: null,
    
        /**
         * Datafield
         */
        dataField: null,
    
        /**
         *
         */
        useTotals: false,
        
        /**
         * Columns
         */    
        columns: [],
        
        constructor: function(config){
            Ext.ux.HighChart.PieSerie.superclass.constructor.apply(this, arguments);
            if (this.useTotals){
                this.columnData = {};
                var length = this.columns.length;
                for (var i = 0; i<length;i++){
                    this.columnData[this.columns[i].field] = 100 / length;
                }
            }
        },
        
        //private
        addData: function(record){
            for (var i = 0; i<this.columns.length;i++){
                var c = this.columns[i].field;
                this.columnData[c] = this.columnData[c] + record.data[c];
            }
        },
    
        //private
        update: function(record){
            for (var i = 0; i<this.columns.length;i++){
                var c = this.columns[i].field;
                if (record.modified[c])
                    this.columnData[c] = this.columnData[c] + record.data[c] - record.modified[c];
            }
        },
    
        //private
        removeData: function(record, index){
            for (var i = 0; i<this.columns.length;i++){
                var c = this.columns[i].field;
                this.columnData[c] = this.columnData[c] - record.data[c];
            }
        },
    
        //private
        clear: function(){
            for (var i = 0; i<this.columns.length;i++){
                var c = this.columns[i].field;
                this.columnData[c] = 0;
            }
        },
    
        //private
        getData: function(record, index){
            if (this.useTotals){
                this.addData(record);
                return [];
            }
            return [record.data[this.categorieField], record.data[this.dataField]];
        },
    
    
        getTotals: function(){
            var a = new Array();
            for (var i = 0; i<this.columns.length;i++){
                var col = this.columns[i];
                a.push([col.name, this.columnData[col.field]]);
            }
            return a;
        }
    });
    Ext.ux.HighChart.Series.reg('pie', Ext.ux.HighChart.PieSerie);

Thread Participants: 125

  1. mystix (1 Post)
  2. medusadelft (5 Posts)
  3. marcing (3 Posts)
  4. sj137 (3 Posts)
  5. lossendae (1 Post)
  6. brookd (4 Posts)
  7. ccquiles (1 Post)
  8. jmass (1 Post)
  9. robin30 (2 Posts)
  10. Hemlock (1 Post)
  11. vahid4134 (1 Post)
  12. Sesshomurai (1 Post)
  13. pawelb1973 (1 Post)
  14. tonedeaf (2 Posts)
  15. mm_202 (1 Post)
  16. PTG (2 Posts)
  17. buergi (18 Posts)
  18. dorgan (18 Posts)
  19. mitchellsimoens (5 Posts)
  20. BlueCamel (1 Post)
  21. ganchsg (1 Post)
  22. Shaguar (5 Posts)
  23. enpasos (2 Posts)
  24. Eitschman (1 Post)
  25. Remy (1 Post)
  26. Urkman (4 Posts)
  27. bdunkin (1 Post)
  28. gthe (4 Posts)
  29. ttbgwt (1 Post)
  30. nathand (1 Post)
  31. Scorpie (1 Post)
  32. soulgen (6 Posts)
  33. leonardb (13 Posts)
  34. christophe67 (4 Posts)
  35. wki01 (1 Post)
  36. wemerson.januario (1 Post)
  37. nego2 (1 Post)
  38. tolichsvs (1 Post)
  39. xstegner (2 Posts)
  40. Alex84 (2 Posts)
  41. nxminh (1 Post)
  42. edykstra (3 Posts)
  43. neuralys (1 Post)
  44. r_honey (13 Posts)
  45. tvik (1 Post)
  46. xiongzhijian51 (1 Post)
  47. plaak (1 Post)
  48. meroy (1 Post)
  49. tryingextjs (2 Posts)
  50. talha06 (4 Posts)
  51. stephen.friedrich (1 Post)
  52. lpastor (1 Post)
  53. Manoharan (9 Posts)
  54. f.wolfsjaeger (2 Posts)
  55. shinkenno (2 Posts)
  56. asagala (2 Posts)
  57. DirkWei (1 Post)
  58. ralphmyers420 (12 Posts)
  59. ChiefDanGeorge (7 Posts)
  60. dvuja2 (1 Post)
  61. tripEXITo (1 Post)
  62. dr1811 (4 Posts)
  63. ljankowski (1 Post)
  64. robindel (1 Post)
  65. lj2008 (1 Post)
  66. ipebaikbanget (1 Post)
  67. cq.yangyu@gmail.com (1 Post)
  68. suntaek (1 Post)
  69. kurt schrauwen (1 Post)
  70. lalllall (1 Post)
  71. bdom (2 Posts)
  72. jackygurui (4 Posts)
  73. MeeMMeeM (6 Posts)
  74. denise (5 Posts)
  75. prabhu_patil (1 Post)
  76. araiczyk (1 Post)
  77. ferns (1 Post)
  78. yvestan (2 Posts)
  79. BigSeanDawg (1 Post)
  80. fabads (19 Posts)
  81. babaqga123 (1 Post)
  82. Mayus (1 Post)
  83. Christiand (3 Posts)
  84. greenst (2 Posts)
  85. SpinoWeb (4 Posts)
  86. vanessa_ng (2 Posts)
  87. toma (1 Post)
  88. 4fan (1 Post)
  89. donp (1 Post)
  90. karthik085 (7 Posts)
  91. aminaq (1 Post)
  92. fabiojpoli (8 Posts)
  93. sosy (1 Post)
  94. ericsmith66 (2 Posts)
  95. rebeccapeltz (4 Posts)
  96. kyrillos52 (2 Posts)
  97. guessit (7 Posts)
  98. israel.galan (5 Posts)
  99. Joe Kuan (12 Posts)
  100. Erci (5 Posts)
  101. liechtir (1 Post)
  102. wump (2 Posts)
  103. jprakash (1 Post)
  104. smkkiran (1 Post)
  105. framazz (4 Posts)
  106. pauldugas (1 Post)
  107. ToddJB (2 Posts)
  108. kaendsle (2 Posts)
  109. epimerde (1 Post)
  110. muralikr (1 Post)
  111. logon68 (1 Post)
  112. x0ner (1 Post)
  113. agus.delonge (1 Post)
  114. wuming444 (3 Posts)
  115. willigogs (4 Posts)
  116. Nicodemuz (1 Post)
  117. cmhampton (3 Posts)
  118. es3analytics (5 Posts)
  119. dgotty (2 Posts)
  120. spradeepv (1 Post)
  121. AshNathan (2 Posts)
  122. hassane (1 Post)
  123. Mr.Solomon (1 Post)
  124. senRsl (2 Posts)
  125. lbrutti (1 Post)