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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar