1. #311
    Sencha User
    Join Date
    Sep 2010
    Posts
    17
    Vote Rating
    0
    israel.galan is on a distinguished road

      0  

    Default


    Can anyone post an example of a chart other than pie using a JSONStore? the pie chart works fine, but I can't figure out how to do the same with other chart types.
    Thanks in advance

  2. #312
    Ext User
    Join Date
    Aug 2009
    Location
    Nilgiris, Tamilnadu, India
    Posts
    12
    Vote Rating
    0
    Manoharan is on a distinguished road

      0  

    Default


    Here is an example of a chart that can generate column or line chart. There are three series. The first is a column one, the other two are line right now. You can see the commented out line.

    Code:
                win = desktop.createWindow({
                    id: 'graphreport',
                    title:'Graphical Report',
                    width:500,
                    height:450,
                    minimizable:false,
                    maximizable:false,
                    resizable:false,
                    iconCls: 'graphreport',
                    shim:false,
                    animCollapse:false,
                    constrainHeader:true,
                    layout: 'border',
                    modal:true,
                    items: [
                            {
                            xtype: 'highchart',
                            region:'center',
                            id: 'thechart',
                           store : new Ext.data.Store({
                              proxy: new Ext.data.HttpProxy({
                              url: 'php/membersummary.php'
                              }),
                              reader: new Ext.data.JsonReader({
                                     root:'rows'
                                     }, [
                                       {name:'membername', type:'string'},
                                       {name:'deposittotal', type:'float'},
                                       {name:'withdrawntotal', type:'float'},
                                       {name:'balance', type:'float'}
                               ]),
                               autoLoad:true
                            }),
                            series: [
                                {
                                    type: 'column',
                                    name: 'Balance',
                                    dataIndex: 'balance'
                                },
                                {
    //                              type: 'column',
                                    name: 'Deposited',
                                    dataIndex: 'deposittotal'
                                },
                                {
                                    name: 'Withdrawn',
                                    dataIndex: 'withdrawntotal'
                                }
                            ],
                            xField: 'membername',
                            chartConfig: {
                                chart: {
                                    defaultSeriesType: 'line',
                                    zoomType:'x'
                                },
                                title: {
                                    text: 'Summary of Savings by Children',
                                    style: {
                                        margin: '10px 100px 0 0' // center it
                                    }
                                },
                                subtitle: {
                                    text: 'Vidyodaya',
                                    style: {
                                        margin: '0 100px 0 0' // center it
                                    }
                                },
                                xAxis: [{}],
                                yAxis: [{
                                    title: {
                                        text: 'Rs.'
                                    },
                                    labels: {
                                        formatter: function() {
                                            return this.value;
                                        }
                                    }
                                }],
                                tooltip: {
                                    formatter: function() {
                                        return '<b>'+ this.series.name +'</b><br/>'+
                                            'Rs.'+ this.y;
                                    }
                                },
                                legend: {
                                    layout: 'vertical',
                                    style: {
                                        position:'absolute',
                                        left: 'auto',
                                        bottom: 'auto',
                                        right: 'auto',
                                        top: 'auto'
                                    }
                                }
                                }
                            }
                ]
            });
    Actually, I am having some problems with pie charts. Only the first pie is showing. So, if you can post your code where pie chart works fine, it will be helpful.

    Thanks.

  3. #313
    Sencha User
    Join Date
    Sep 2010
    Posts
    17
    Vote Rating
    0
    israel.galan is on a distinguished road

      0  

    Default


    Quote Originally Posted by Manoharan View Post
    Actually, I am having some problems with pie charts. Only the first pie is showing. So, if you can post your code where pie chart works fine, it will be helpful.

    Thanks.
    Here's my code:
    Code:
        var store = new Ext.data.JsonStore({
          url: MyJSON.json',
          fields: [{name:'COUNTRY', type:'string'}, {name:'COUNT', type:'int'}],
          autoLoad:true
        });
        chart = new Ext.ux.HighChart({
            store: store,
            series: [{
                    type: 'pie',
                    categorieField: 'COUNTRY',
                    dataField: 'COUNT'
                    }
            ],
            chartConfig: {
                 chart:  {},
                 title:  {text: 'Title'},
                 legend: {layout: 'horizontal'},
                 tooltip: {
                      formatter: function() {return '<b>'+ this.point.name +'</b>: '+ this.y, '+Math.round(this.percentage,1)+' %';}
                 },                        
                 plotOptions: {
                       pie: {
                              allowPointSelect: true,
                              cursor: 'pointer'
                       }
                }
             }    
        });

  4. #314
    Ext User
    Join Date
    Aug 2009
    Location
    Nilgiris, Tamilnadu, India
    Posts
    12
    Vote Rating
    0
    Manoharan is on a distinguished road

      0  

    Default Problems while exporting

    Problems while exporting


    While exporting a line graph, there is a problem. The adapter generates the graph fine, but while exporting it into a jpg file, the x-axis values are replaced by 0, 1 and 2, instead of the values generated in the store i.e., membername. The code is given below :

    Code:
                            {
                            xtype: 'highchart',
                             store : new Ext.data.Store({
                                proxy: new Ext.data.HttpProxy({
                                    url: 'php/membersummary.php'
                                }),
                                reader: new Ext.data.JsonReader({
                                    root:'rows'
                                    }, [
                                         {name:'membername', type:'string'},
                                         {name:'deposittotal', type:'float'},
                                         {name:'withdrawntotal', type:'float'},
                                         {name:'balance', type:'float'}
                                    ]),
                                   autoLoad:true
                             }),
                            series: [
                                {
                                    type: 'column',
                                    name: 'Balance',
                                    dataIndex: 'balance'
                                },
                                {
                                    name: 'Deposited',
                                    dataIndex: 'deposittotal'
                                },
                                {
                                    name: 'Withdrawn',
                                    dataIndex: 'withdrawntotal'
                                }
                            ],
                            xField: 'membername',
                            chartConfig: {
                                chart: {
                                    defaultSeriesType: 'line',
                                    zoomType:'x',
                                    margin: [50, 50, 60, 80]
                                },
                                title: {
                                    text: 'Summary of Savings by Children',
                                    style: {
                                        margin: '10px 100px 0 0'
                                    }
                                },
                                subtitle: {
                                    text: 'Vidyodaya',
                                    style: {
                                        margin: '0 100px 0 0'
                                    }
                                },
                                xAxis: [{}],
                                yAxis: [{
                                    title: {
                                        text: 'Rs.'
                                    },
                                    labels: {
                                        formatter: function() {
                                            return this.value;
                                        }
                                    }
                                }],
                                tooltip: {
                                    formatter: function() {
                                        return '<b>'+ this.series.name +'</b><br/>'+
                                            'Rs.'+ this.y;
                                    }
                                },
                                legend: {
                                    layout: 'horizontal',
                                    style: {
                                        position:'absolute',
                                        left: 'auto',
                                        bottom: 'auto',
                                        right: 'auto',
                                        top: 'auto'
                                    }
                                }
                                }
                            }
    Can someone help please ? The image is attached for your information.
    Attached Images

  5. #315
    Ext User
    Join Date
    Aug 2009
    Location
    Nilgiris, Tamilnadu, India
    Posts
    12
    Vote Rating
    0
    Manoharan is on a distinguished road

      0  

    Default Legends in pie chart

    Legends in pie chart


    I have a curious problem.

    In my pie chart, the legends overlap each other when I see the chart in the screen. But, when I export it, the saved file displays the legends properly.

    Attaching both the images.

    The code is given below :

    Code:
                    {
                            xtype: 'highchart',
                            store : new Ext.data.Store({
                                proxy: new Ext.data.HttpProxy({
                                   url: 'php/membersummary.php'
                                }),
                                reader: new Ext.data.JsonReader({
                                    root:'rows'
                                    }, [
                                       {name:'membername', type:'string'},
                                       {name:'deposittotal', type:'float'}
                                ]),
                                autoLoad:true
                            }),
                            series: [{
                                    type: 'pie',
                                    name: 'Savings',
                                    categorieField:'membername',
                                    dataField:'deposittotal'
                                }
                            ],
                            chartConfig: {
                                chart: {
                                    margin: [50, 50, 60, 80]
                                },
                                title: {
                                    text: 'Summary of Savings by Children',
                                    style: {
                                        margin: '10px 100px 0 0'
                                    }
                                },
                                subtitle: {
                                    text: 'Vidyodaya',
                                    style: {
                                        margin: '0 100px 0 0'
                                    }
                                },
                                tooltip: {
                                    formatter: function() {
                                        return '<b>'+ this.point.name +'</b><br/>'+
                                            'Rs.'+ this.y;
                                    }
                                },
                        plotArea: {
                         shadow: null,
                         borderWidth: null,
                         backgroundColor: null
                        },
                            legend: {
                                layout: 'horizontal',
                                style: {
                            position: 'absolute',
                                    left: 'auto',
                                    bottom: 'auto',
                                    right: 'auto',
                                    top: 'auto'
                                }
                            },
                        plotOptions: {
                         pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                               enabled: true,
                               color: '#000000',
                               connectorColor: '#000000',
                               formatter: function() {
                                       return '<b>'+ this.point.name +'</b>';
                               }
                            },
                            showInLegend:true
                         }
                      }
                   }
              }
    Can someone help please?
    Attached Images

  6. #316
    Ext User
    Join Date
    Apr 2010
    Posts
    91
    Vote Rating
    0
    fabads is on a distinguished road

      0  

    Question


    Why I cannot set my yAxis max value ?

    If I use

    PHP Code:
    this.hcDay.chartConfig.yAxis[0].max 3000
    it's working, but if i affect a variable like in the example below, the max seems to be set to 0 (and it's not true because the alert give me the good value)


    PHP Code:
    this.storeDay.on('load', function(storerecoptions){       
                var 
    seriesStatus this.storeDay.reader.jsonData.message.split(";");
                var 
    series = [];
                                      var 
    mymax 0;
                for (var 
    0seriesStatus.lengthi++) {
                    var 
    serie seriesStatus[i].split(",");
                    var 
    dt = new Date(serie[0]);
                    
                    
    series.push({yField'w' + (i+1), xField't'
                        
    namedt.format('l d F Y') + ' / ' serie[1] + 
                        
    ' EUR / Total: ' serie[2] + ' Wh / Min: </text>' serie[3] + ' Wh / Max: ' serie[4] + ' Wh / Avg: ' serie[5] + ' Wh'colorcolors[i]}); 
                    
                    if (
    serie[7]*mymax) {
                        
    mymax serie[7]*1;
                    }
                }
                                      
    alert(mymax);
                
    this.hcDay.chartConfig.yAxis[0].max mymax;
                
    this.hcDay.addSeries(seriesfalse);    
            },
    this); 

  7. #317
    Ext User
    Join Date
    Nov 2010
    Posts
    3
    Vote Rating
    0
    ToddJB is on a distinguished road

      0  

    Default


    I can't get a basic chart to work with a jsonStore. I get an error 'too much recursion' line 81 adapter-extjs.js
    Thx,
    Todd

    Code:
    Code:
      Ext.onReady(function(){
    
         var revenueJson = new Ext.data.JsonStore({
            fields: ['month','revenue'],
            data: [{"month":"MAY-08","revenue":"456"},{"month":"JUN-08","revenue":"509"},{"month":"JUL-08","revenue":"356"},
                {"month":"AUG-08","revenue":"459"}],
            autoLoad: true
        })  // End Json Store
    
       var chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          defaultSeriesType: 'line',
          zoomType: 'x'
        },
        store: revenueJson,
        series: [{
            name: 'Revenue',
            yField: 'revenue'
        }],
        xField: 'month'
      });  // End chart
    
    });  // End OnReady

  8. #318
    Ext User
    Join Date
    Aug 2009
    Location
    Nilgiris, Tamilnadu, India
    Posts
    12
    Vote Rating
    0
    Manoharan is on a distinguished road

      0  

    Default


    Hi ToddJB,

    When I tried your code, it worked and it displayed a graph. So, problem may be with the adapter file?

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

      0  

    Default Highcharts 2.1

    Highcharts 2.1


    Has anyone tried to use the adapter with Highcharts 2.1? I know its only been out for a couple of days, but it is supposed to fix some bugs that I've been having (huge memory usage and flickering/blinking graphs).
    Thanks

  10. #320
    Ext User
    Join Date
    Nov 2010
    Posts
    3
    Vote Rating
    0
    ToddJB is on a distinguished road

      0  

    Default


    Thanks, I'm using v. 0.4 of the adapter and Ext.ux.HighChart.js from the first page of this thread. High Charts version is 2.0.5.

    Here's my html:
    Code:
            <!-- ExtJs Libraries and CSS -->
              <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
              <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"> </script>
              <script type="text/javascript" src="../extjs/ext-all.js"> </script>
            <!-- ExtJS-Highcharts Stuff-->
              <script type="text/javascript" src="charts/adapter-extjs.js"></script>
              <script type="text/javascript" src="charts/highcharts.src.js"></script>
              <script type="text/javascript" src="charts/Ext.ux.HighChart.js"></script>
                      <!-- Page specific js -->
              <script type="text/javascript" src="js/test_chart3.js"> </script>

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)