Results 1 to 5 of 5

Thread: chart with dynamic series

  1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    2

    Default chart with dynamic series

    I need to make a dynamic chart displaying various product selling statistics.
    Dynamic means that the user should be able add a new product to the chart by selecting it from a combobox and clicking on a button.
    It is not documented in ExtJS 3.2.1 API documentation, but I found setSeries() method, so I can add a new product to the chart, but all previous product disappears from the chart.

    Here is the part of the code (store2chart is an xmlstore and colors is an array with some predefined colors):
    Code:
                                              Ext.get('button2').on('click', function() {
                                                  tip=Ext.getCmp('combo2').getValue();
                                                  dfs=Ext.getCmp('datefieldstart2').getValue();
                                                  dfe=Ext.getCmp('datefieldend2').getValue();
                                                  product=Ext.getCmp('combo22').getValue();
                                                  store2chart.load({params:{tipus: tip, start: dfs, end: dfe, product: product}});
                                                  chart=Ext.getCmp('linechart2');
                                                  seriesdef[colorIndex]={type: 'line',displayName: 'Amount', xField: 'xaxis', 
                                                      yField: 'value',style: {color: colors[colorIndex]}};
                                                  chart.setSeries(seriesdef);                                                
                                                  colorIndex++;
                                              });
    I think the problem is that when the store gets refreshed all lines on the chart are refreshed with the same data so they overlap and only the last one can be seen. How is it possible to avoid this?

    Thanks

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Yes, you should use setSeries, but you need to specify all series that need to be visible (so including the ones that are already visible).

  3. #3
    Ext User
    Join Date
    Aug 2010
    Posts
    2

    Default

    I specify all series everytime, they are in seriesdef array. I add the next one to the array and then call setSeries()

  4. #4

    Default

    I try to use 'setSeries()', but have an error. I call this method from 'render' listener on my 'Chart' component. The error is 'this.swf is undefined' (it drops while refreshing chart). Can you tell about dynamic series in detail?

  5. #5

    Default

    Quote Originally Posted by mrg View Post
    I specify all series everytime, they are in seriesdef array. I add the next one to the array and then call setSeries()
    HI, This is my Chart class code how to add series dynamically in this class. and how to get chart class object such a that i can add series in this chart class. Thanks in advance
    Code:
    Ext.create('Ext.chart.Chart', {
    id:'chartId',
    renderTo: Ext.getBody(),
    width: 800,
    height: 600,
    animate: true,
    store: Ext.create('LcaChartStore1'),
    shadow: true,
    theme: 'Category1',
    legend: {
    position: 'right'
                 },
    axes: [{
    type: 'Numeric',
    position: 'left',
    fields:['quantity','volatileMatter','ashContent','loi','afs'],
    label: {
    renderer: Ext.util.Format.numberRenderer('0,0')
       },
        title: 'Values',
         grid: true,
    minimum: 0
    },
    {
    type: 'Category',
    position: 'bottom',
    fields: ['date'],
     //grid: true,
    title: 'Date',
    /*label : {
    rotation : {
    degrees : 45
    },
    renderer:  function(value){
    return value.substring(0,10);//value.dateFormat('m-d-Y');
                }
       }*/
    }  ],
    series: [ {
       type: 'line',
    highlight: {
    size: 7,
    radius: 7
    },
    axis: 'left',
    xField: 'date',
    yField: 'quantity',
    markerConfig: {
    type: 'cross',
    size: 4,
    radius: 4,
    'stroke-width': 0
    },
    tips: {
    trackMouse: true,
    width: 140,
    height: 28,
    renderer: function(storeItem, item) {
    this.setTitle(storeItem.get('date') + ': ' + storeItem.get('quantity') + ' views');
      }
           },
               }]
                   })
    Thanks
    Mayur

Similar Threads

  1. chart! the series of chart refresh
    By yanasdf789 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 13 Jul 2010, 8:29 PM
  2. chart!! the skin of series in chart can't be visible!!!!!
    By yanasdf789 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 11 Jul 2010, 8:58 AM
  3. Time Series Chart
    By bsautner in forum Ext GWT: Discussion
    Replies: 8
    Last Post: 30 Mar 2010, 6:58 AM
  4. Chart Series refresh - best way?
    By Copernicus in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 15 Aug 2009, 2:36 AM
  5. Chart Series
    By a.ti in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 25 Jun 2009, 7:39 AM

Posting Permissions

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