1. #41
    Sencha User
    Join Date
    Jun 2008
    Posts
    43
    Vote Rating
    0
    soulgen is on a distinguished road

      0  

    Default


    LOL

    Do I ask for a wrong thing? Or I just made incorrect term?

    Sorry for making you misunderstanding, but I mean I want the other members to post the solution plus its example codes, so I am not misperception.

  2. #42
    Sencha User
    Join Date
    Oct 2009
    Posts
    17
    Vote Rating
    0
    ralphmyers420 is on a distinguished road

      0  

    Default User input?

    User input?


    I'm using HighCharts pretty sucessfully when I have a known (static) set of data. What I need is to be able to load the data dynamically according to a user's input.
    My normal method of getting user data is:
    ComboBox choice -> DataStore.load -> PHP script that takes the combobox data as an input to perform a MySQL SELECT statement. The script then formats the output as a JSON object and passes it back to the Ext JS framework.
    Is it possible to do this same thing, but take the JSON object that is returned and use it as the JSON input into a chart?
    Any help on this would be fantastic.
    Thanks

  3. #43
    Sencha User
    Join Date
    Sep 2008
    Location
    Netherlands
    Posts
    106
    Vote Rating
    1
    buz is on a distinguished road

      0  

    Default


    I've been working on an implementation with a Store. I've been on a small vacation so havent completed it yet. I hopefully will complete the extension today/tomorrow.

    Daniël

  4. #44
    Ext User tonedeaf's Avatar
    Join Date
    Dec 2007
    Posts
    137
    Vote Rating
    1
    tonedeaf is on a distinguished road

      0  

    Default


    Will the Highcharts adapter work with ext-core? Don't need the ux.HighchartPanel, just the adapter with ext-core as the base library.

  5. #45
    Sencha User
    Join Date
    Sep 2008
    Location
    Netherlands
    Posts
    106
    Vote Rating
    1
    buz is on a distinguished road

      0  

    Default


    Sure, the adapter-extjs.js is only required to make the charts work. The Ext.ux.HighchartPanel is only for convenience.

    When using the adapter without the panel just use:
    Code:
            <!-- ExtJS includes -->
            <script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="ext-3.1.1/ext-all-debug.js"></script>
            <link rel="stylesheet" type="text/css" href="ext-3.1.1/resources/css/ext-all.css" />
    
            <!-- ExtJS adapter for Highcharts -->
            <script type="text/javascript" src="adapter-extjs.js"></script>
    
            <!-- Highcharts includes -->
            <script type="text/javascript" src="highcharts.src.js"></script>
            <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->
    After this you can use all samples used at highcharts.com (See the scatter example in de demo files)

  6. #46
    Sencha User
    Join Date
    Sep 2008
    Location
    Netherlands
    Posts
    106
    Vote Rating
    1
    buz is on a distinguished road

      0  

    Default


    Allright, i've uploaded a simple " demo " of the new flexible (Ext.data.Store + Highcharts) version. I've only tested this with basic data and not with things like a piechart. Lets say it is in an Alpha stage (Tested in FireFox/Chrome only).

    Row-editor (Same as the examples but uses Ext.ux.ChartPanel)

    ExtJS Visits/Views (Using Ext.data.JsonStore)

    Just let me know what you think and report the bugs .

  7. #47
    Ext User tonedeaf's Avatar
    Join Date
    Dec 2007
    Posts
    137
    Vote Rating
    1
    tonedeaf is on a distinguished road

      0  

    Default


    Quote Originally Posted by buz View Post
    Sure, the adapter-extjs.js is only required to make the charts work. The Ext.ux.HighchartPanel is only for convenience.

    When using the adapter without the panel just use:
    Code:
            <!-- ExtJS includes -->
            <script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="ext-3.1.1/ext-all-debug.js"></script>
            <link rel="stylesheet" type="text/css" href="ext-3.1.1/resources/css/ext-all.css" />
    
            <!-- ExtJS adapter for Highcharts -->
            <script type="text/javascript" src="adapter-extjs.js"></script>
    
            <!-- Highcharts includes -->
            <script type="text/javascript" src="highcharts.src.js"></script>
            <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->
    After this you can use all samples used at highcharts.com (See the scatter example in de demo files)
    You have included ext-all-debug.js which I'm trying to replace with ext-core.

    Can the ext-all-debug (or ext-all.js) be replaced with ext-core (if I don't want to use the HighChartsPanel ux) for displaying just the charts in a div?

    I think the answer is yes, just need some confirmation before I start using it in my project.

  8. #48
    Sencha User
    Join Date
    Sep 2008
    Location
    Netherlands
    Posts
    106
    Vote Rating
    1
    buz is on a distinguished road

      0  

    Default


    It should work with the core too. The required classes (Like Ext.Element and Ext.Observable) are in the core lib.

    So it should be no problem, but I did not test it yet.

  9. #49
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Lightbulb


    Hi everyone,

    First of all I want to learn that can I use this extension with data from DB? If I can, here's my configuration; can someone help me to explore my mistake :

    Code:
    Ext.onReady(function() {
    			var chartRecord = new Ext.data.Record.create([{
    			    name: 'sayi',
    			    type: 'int',
    			    allowBlank: false
    			}]);
    			var chartStore = new Ext.data.JsonStore({
    				record : chartRecord,
    				fields : [{		
    					name : 'sayi'
    				}],
    				url : 'chartStoreDoldur',
    				//autoDestroy : true,
    				autoLoad : true,
    				root : 'data',
    				idProperty : 'sayi'
    			});
    			Ext.override(Ext.data.Record, {
    		        getJson: function () {
    		            return Ext.util.JSON.encode(Ext.apply(this.data));
    		        }
    		    });
    		    
    			var data;
    			Ext.Ajax.request({
    				url : 'chartStoreDoldur',
    				method : 'GET',
    				//success : function(response, options) {
    				//	data = eval("(" + response.responseText + ")");
    				//}  
    				success : function(result, request) {
    					data = result.responseText;
    				}
    			});      
    			
    			var highPanel = new Ext.ux.HighchartPanelJson({
    				renderTo : document.body,
    				frame : true,
    				title : 'Personel Yaş Dağılım Grafiği',
    				layout : 'fit',
    				border : true,
    				id : 'myChart',
    				chartConfig: {
                        chart: {
                            defaultSeriesType: 'spline'
                        },
                        title: {
                            text: 'Personel Yaş Dağılımı'
                        },
                        subtitle: {
                            text: 'Source: google.com'                        
                        },
                        xAxis: {
                            categories: ['15-20', '20-25', '25-30', '35-40', '40-45', '45+'],
                            title: {
                                text: 'Yaş Aralıkları'
                            }
                        },
                        yAxis: {
                            title: {
                                text: 'Kişi Sayısı'
                            }
                        },
                        tooltip: {
                            formatter: function() {
                                return '<b>' + this.x +'</b> aralığında <br/><b>'+
                                    							this.y + '</b> kişi var.';
                            }
                        },
                        legend: {
                            enabled : true
                        },
                        series: [
                            {
                                name: 'Kişi Sayısı',
                                //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]
                                //dataURL : 'chartStoreDoldur',
                                data : chartStore
                            }
                        ]
                    }
    			});
    The data that I take from chartStore servlet is like this : (copy&paste from Firebug)

    Code:
    {"data":[{"sayi":2},{"sayi":17},{"sayi":2},{"sayi":2},{"sayi":3},{"sayi":3},{"sayi":0}]}
    Thanx in advance,
    With regards,
    Talha

  10. #50
    Sencha User
    Join Date
    Oct 2009
    Posts
    17
    Vote Rating
    0
    ralphmyers420 is on a distinguished road

      0  

    Default


    @Buz
    This looks great. Is it possible to get the JsonStore to work with a chart like the 'line-time-series' example?
    Thanks

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)