1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    3
    Vote Rating
    0
    cxBrad is on a distinguished road

      0  

    Default Dynamically add series to a chart?

    Dynamically add series to a chart?


    I am trying to add a new series to an existing chart (the existing chart works fine). This was pretty simple in Ext JS 3, but I can't figure it out in 4. Here is what I've got:

    Code:
    var chart = theGraph.getComponent('intakeChart');
    
    var newSeries = Ext.create('Ext.chart.LineSeries', {
    	type: 'line',
    	id: 'series1',
    	axis: 'left',
    	yField: 'jobcount'
    	});
    
    chart.series.add(newSeries);
    
    chart.surface.removeAll();
    chart.redraw(false);
    When I call this code, I get the following error:

    "Uncaught TypeError: Cannot read property 'surface' of undefined"

    Any ideas on what I'm doing wrong?

  2. #2
    Sencha User
    Join Date
    Aug 2010
    Posts
    7
    Vote Rating
    0
    jmitchell.br is on a distinguished road

      0  

    Default


    I too am wondering how this is done. I'd like to avoid re-creating my chart from scratch each time I need to toggle a line. Is this even possible in extjs 4?

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    12
    Vote Rating
    1
    blincv is on a distinguished road

      0  

    Default


    I have the same problem... anyone got a solution yet?

  4. #4
    Sencha User
    Join Date
    Jul 2009
    Posts
    14
    Vote Rating
    0
    tinabucur is on a distinguished road

      0  

    Default


    I need the same thing. I would want to define a serie with is own store . Any ideas?

  5. #5
    Sencha User
    Join Date
    Apr 2010
    Posts
    48
    Vote Rating
    0
    whippersnapper is on a distinguished road

      0  

    Default


    *knock knock*... Anybody found the solution to this yet? I'm stuck with the same problem.

  6. #6
    Sencha User
    Join Date
    May 2010
    Posts
    4
    Vote Rating
    -1
    electronix is an unknown quantity at this point

      0  

    Default partially solved

    partially solved


    Hello all,

    I use the following method to add dynamically series to a chart:
    Code:
    // define the new serie (do not use Ext.create())
    var serie = 
            {
                  type: 'line'
                 ,axis: 'left'
                 ,smooth: true
                 ,xField: 'name'
                 ,yField: 'data3' 
            };
    
    // add the serie to the chart (the variable 'chart' holds the complete chart component)
    chart.add(serie);
    
    // redraw the chart
    chart.redraw();
    This solution works for me, but the next problem is: how to remove a serie dynamically from the chart? I can 'remove()' them from the chart but the .redraw() function does not update the surface...
    I bet the solution will be found by today and I keep you updated...

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Posts
    3
    Vote Rating
    0
    zyliuxing is on a distinguished road

      0  

    Default


    HI, i'm fresh about EXT JS. why can't I find some methods such as chart.redraw and chart.add in the official documentation? This question confuses me a lot.

    Quote Originally Posted by electronix View Post
    Hello all,

    I use the following method to add dynamically series to a chart:
    Code:
    // define the new serie (do not use Ext.create())
    var serie = 
            {
                  type: 'line'
                 ,axis: 'left'
                 ,smooth: true
                 ,xField: 'name'
                 ,yField: 'data3' 
            };
    
    // add the serie to the chart (the variable 'chart' holds the complete chart component)
    chart.add(serie);
    
    // redraw the chart
    chart.redraw();
    This solution works for me, but the next problem is: how to remove a serie dynamically from the chart? I can 'remove()' them from the chart but the .redraw() function does not update the surface...
    I bet the solution will be found by today and I keep you updated...

  8. #8
    Sencha User
    Join Date
    May 2010
    Posts
    4
    Vote Rating
    -1
    electronix is an unknown quantity at this point

      -1  

    Default


    Quote Originally Posted by zyliuxing View Post
    HI, i'm fresh about EXT JS. why can't I find some methods such as chart.redraw and chart.add in the official documentation? This question confuses me a lot.
    You will see, there are a lot of methods that are not (yet) described in the documentation. But - as always - writing a complete documentation takes a lot of time!
    And if everything would be described in the documentation, then this forum would no longer be needed

  9. #9
    Sencha User
    Join Date
    May 2010
    Posts
    4
    Vote Rating
    -1
    electronix is an unknown quantity at this point

      0  

    Default


    I also managed to remove a serie completely from the chart. Here is what I did:

    - I created the function 'removeSerie' as described below.
    - I attribute to every serie an unique ID (with the config option 'seriesId') (example: seriesId: 'serie1')
    - To remove the series from a chart, just call the function 'removeSerie(chart, 'serie1')'

    Code:
        // removes the serie 'serieId' from the chart 'chart'
        //  parameters:    chart        the chart object
        //                seriesId    the ID of the serie
        function removeSerie(chart, seriesId)
        {
            // get the surface 
            var surface = chart.surface;
            
            // get the key of the serie
            for(var serieKey = 0; serieKey < chart.series.keys.length; serieKey++)
            {
                // check for the searched serie
                if(chart.series.keys[serieKey] == seriesId)
                {                
                    // go through all the groups of the surface
                    for(var groupKey = 0; groupKey < surface.groups.keys.length; groupKey++)
                    {
                        // check if the group name contains the serie name
                        if(surface.groups.keys[groupKey].search(seriesId) == 0)
                        {
                            // destroy the group
                            surface.groups.items[groupKey].destroy();
                        }
                    }                    
    
    
                    // get the correct serie
                    var serie = chart.series.items[serieKey];
                    
                    // remove the serie from the chart
                    chart.series.remove(serie);
    
    
                    // redraw the chart
                    chart.redraw();    
                }
            }
        };
    Comments and feedback are welcome on this topic...

  10. #10
    Sencha User
    Join Date
    Apr 2010
    Posts
    48
    Vote Rating
    0
    whippersnapper is on a distinguished road

      0  

    Default


    Thanks, electronix.

    I'll give your implementation a try.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."