Page 42 of 43 FirstFirst ... 3240414243 LastLast
Results 411 to 420 of 429

Thread: Highcharts adapter and plugin for ExtJS

  1. #411
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256
    Vote Rating
    1
      0  

    Default

    Sure, I would love to see it!

  2. #412
    Sencha User
    Join Date
    Jan 2011
    Posts
    549
    Vote Rating
    54
      0  

    Default

    I'll look at getting a working example up on Fiddle later, but for now here's a basic breakdown of how I implemented it. Below is a basic column chart, but you can edit the highchart code to display any of the available chart types:

    Assuming the store load returns data in this format:
    Code:
    "records": [
        {"key":"2012-08-08 23:59:59", "value":"2"},
        {"key":"2012-08-07 23:59:59", "value":"4"},
        {"key":"2012-08-06 23:59:59", "value":"5"},
        {"key":"2012-08-05 23:59:59", "value":"3"},
        {"key":"2012-08-04 23:59:59", "value":"7"},
        {"key":"2012-08-03 23:59:59", "value":"3"},
        {"key":"2012-08-02 23:59:59", "value":"1"}
    ]
    Here's a couple of chart specific functions I use in the code later:
    Code:
    function convertChartData(records, name) {
        var arr = [];
        for(i = 0, x = records.length; i < x; i++) {  
            var r = records[i];
            var val = r.get(name);
            arr.push(val)
        };    
        return arr;
    }
    
    
    function resizeChart(containerId, chart) {
        var parent = $('#' + containerId);
        var w = parent.width();
        var h = parent.height();
        chart.setSize(w, h);
    }
    And now the full EXTJS code for adding highcharts to panels:
    Code:
    Ext.ns('MyApp');
    
    
    MyApp.chart_example = Ext.extend(Ext.Panel, {
        
        initComponent:function() {
            
            var thispanel = this;
            
            var chart;
            
            var fields = [
                {name: 'key', mapping:'key', type:'date', dateFormat:'Y-m-d H:i:s'},
                {name: 'value', mapping:'value', type:'float'}    
            ];
                    
            var store = new Ext.data.JsonStore({
                url: URL_GOES_HERE,
                fields: fields,
                root: 'records',
                autoLoad: false,
                listeners: {
                    
                    load: function(thisStore, records, o) 
                            
                        var keys = convertChartData(records, 'key');
                        var values = convertChartData(records, 'value');            
                        
                        chart.xAxis[0].setCategories(keys);
                        chart.series[0].setData(values);
                        resizeChart(thispanel.id, chart)
                        
                    }    
                }
            });
                
            var config = {
                flex:1,
                store: store,
                border: false
            };
    
    
            Ext.apply(this, Ext.apply(this.initialConfig, config));
    
    
            MyApp.chart_example.superclass.initComponent.apply(this, arguments);        
            
            this.on({
                bodyresize: {
                    fn: function() {
                        resizeChart(thispanel.id, chart)
                    }    
                },
                afterrender:{scope:this, single:true, fn:function() {
                                    
                    var renderTo = this.id;
            
                    chart = new Highcharts.Chart({
                        title: false,
                        credits: false,
                        legend: false,
                        chart: {
                            animation: true,
                            type: 'column',
                            renderTo: renderTo,
                            margin:[20, 20, 55, 35]
                        },
                        yAxis: [{
                            allowDecimals: false,
                            title: false,
                            alternateGridColor: '#f9f9f9'
                        }],
                        xAxis: {
                            reversed: true,
                            labels: {
                                formatter: function() {
                                    var formatted = this.value.format('jS M');
                                    return formatted
                                },
                                rotation: -45,
                                style: {
                                    fontWeight: 'normal',
                                    fontSize: '10px'
                                },
                                align:'right',
                                x:5    
                            }
                        },
                        tooltip: {
                            borderWidth: 1,
                              shadow:false,
                              style: {
                                  fontSize: '11px'    
                              },
                            formatter: function() {
                                if(this.y == 0) {
                                    return false;
                                } else {
                                    var formatted = this.x.format('jS M');
                                    return '<b>' + formatted + '</b><br>' + this.y;
                                }
                            }
                        },
                        plotOptions: {
                            column: {
                                borderWidth: 0,
                                animation: {duration: 1000},
                                dataLabels: {
                                    enabled: true,
                                    style: {
                                        color:'#888'
                                    },
                                    y: -8,
                                    formatter: function() {
                                        if(this.y == 0) {
                                            return '';    
                                        } else {
                                            return this.y;
                                        }
                                    }
                                }
                            },
                            series: {
                                color: '#dd5658',
                                shadow: false,   
                                cursor: 'pointer',
                                events: {
                                    click: function(e) {
                                        // CLICK LOGIC HERE
                                    }
                                }        
                            }
                        },
                        series: [{
                            data: []
                        }]
                    });    
                        
                    this.store.load();
                    
                    this.chart = chart;
                    
                }}
            });
            
            
        }    
    });
    Ext.reg('chart_example', MyApp.chart_example);
    Then to add this to your layout, you would simply do something like the following:
    Code:
    var basicPanel = new Ext.Panel({
        title: 'Here is the Chart Container',
        items: {
            xtype: 'chart_example'
        }
    });
    Give me a shout if none of this makes sense...

  3. #413
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256
    Vote Rating
    1
      0  

    Default

    Sweet! Thanks for taking the time to post this. I will test it our over the coming days and let you know how it goes!

  4. #414
    Sencha User
    Join Date
    Jan 2013
    Posts
    8
    Vote Rating
    0
      0  

    Default tabPanel-ExtJS + highcharts

    Dear all, thank you for your great work.
    I am using Highcharts extension with ExtJS, and I just face an issue. I am trying to create a highchart component in a tabpanel using Xtype. The issue is that when I set the ‘activeTab’ of the tabpanel to the tab where highchart component is, the latter works properly. But, when I set the ‘activeTab’ to another tab and then after click the tab where highchart component is, the chart is not created.
    I have also tried to create the chart before the tabpanel using the following way:

    var Hchart = Ext.create(“Chart.ux.Highcharts”, {…});
    and then in the tabpanel
    var tabpanel = Ext.create(‘Ext.tab.Panel’, {
    width: 1000,
    height: 600,
    activeTab: 2,
    renderTo:’paneldom’,
    items: [{
    id:’home’,
    title: ‘Home’,
    },
    {
    title: ‘History’,
    id:’history’,
    layout: ‘border’,
    items:[{
    region:’center’,
    id:’figureId’,
    xtype:’panel’,
    autoScroll:true,
    layout:’fit’,
    items : Hchart,

    this way does not work even if I activate the tab where the chart is.
    could you please tell me what is wrong
    Thank you for your time and consideration

  5. #415
    Ext JS Premium Member
    Join Date
    Oct 2011
    Posts
    42
    Vote Rating
    0
      0  

    Default

    Hi,

    I'm using ExtJS3.4 with high charts and I'm trying an example chart that can have 2 y-axes. Is this possible? If so can I get an example of how to do this? I'm kind of lost looking in the source code for Ext.ux.HighCharts

    Thanks

  6. #416
    Sencha User
    Join Date
    Jan 2011
    Posts
    549
    Vote Rating
    54
      0  

    Default

    How have you currently implemented Highcharts into EXTJS? Are you using the adapter and plugin as referenced in the opening post - or have you gone the way of manually inserting highcharts into panels how I mentioned in post #412?

    I could probably scrape an example together of the later method if required.

  7. #417
    Ext JS Premium Member
    Join Date
    Oct 2011
    Posts
    42
    Vote Rating
    0
      0  

    Default

    willigogs, I have used the adapter and plugin referenced in the opening post.

  8. #418
    Sencha User
    Join Date
    May 2013
    Posts
    2
    Vote Rating
    0
      0  

    Default ?

    ??????????????

  9. #419
    Sencha User
    Join Date
    May 2013
    Posts
    2
    Vote Rating
    0
      0  

    Default

    floow this ban day,run it finnly,3q

  10. #420
    Sencha User
    Join Date
    Jun 2013
    Posts
    1
    Vote Rating
    0
      0  

    Default Sencha Touch Compatibility

    Hello,
    since now i tried to use Joe Kuan Highcharts Extension for Sencha, but i couldn't manage to make it work properly on my series...
    Can i use this plugin also with sencha touch?

    Thanks
    Lorenzo

Page 42 of 43 FirstFirst ... 3240414243 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •