1. #421
    Sencha User
    Join Date
    Apr 2007
    Posts
    90
    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
    90
    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

Thread Participants: 125

  1. mystix (1 Post)
  2. medusadelft (5 Posts)
  3. marcing (2 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)