1. #1
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Answers
    2
    Vote Rating
    1
    darkling235 is on a distinguished road

      0  

    Default Answered: AreaSeries Won't clear

    Answered: AreaSeries Won't clear


    We're playing around with charts. We are currently using LineChart and Area chart. The LineChart is thus far behaving properly but we can't seem to get the Area chart to work. We are dealing with different sets of data and when the data set changes and we try to apply the new set, the linechart updates, the areachart does not.

    Example:

    chartBug1.jpg


    This is an example of the set change. The new data was recieved but as you can see, part of the old data was retained as well creating a borked chart on the top and bottom. The data doesn't vanish. As the chart ticks along with its new data set the old data stays forever and can ever build up as I continue changing data sets:

    another example:

    chartBug2.jpg


    This shows several data set changes which kept building up and adding more "ghost data."

    I'm including my code here to see if anyone has any suggestions. My next step will be to remove the dynamically generated providers though I'm reluctant to do so, that may help determine where the bug is. If anyone has any experience working with AreaCharts that change their data sets (and providers) I would greatly appreciate it. Our LineChart class uses 98% of the same code as the AreaChart class but the LineChart works. Any advice would be most welcome.

    This is the relevant code:
    Code:
        @Override
        public void onContextChange(TreeNode type)   //a data set change event
    {
            
            setRequestOptions(type);   //create criteria for FETCH
            this.providers = null;   /*new data could have varying numbers of items. We generate them dynamically*/
    
         //trying tricks here to remove old data
            store.clear();
            store.commitChanges();  
            catAxis.drawLabels();
            chart.redrawChartForced();
            chart.redrawSurfaceForced();
    
            //our update thread is canceled until the fetch completes when it will be restarted
            timer.cancel();
            lastWholeTimeUnit = -1;
    
            fetchData(request, true); //tell system to proceed with the fetch
        }
    Code:
    //called when Data is received
    public void updateData(List<ChartData> data)
        {
            currentBottomIndex = -1;
            lastWholeTimeUnit = -1;
            catAxis.drawLabels();
    
            //dynamically generate Providers based on resulting data
            if(this.providers == null)
            {
                providers = new ArrayList<ExtendableValueProvider>();
    
                for(int x = 0; x < data.size(); x++)
                {
                    for(int y = 0; y < data.get(x).getNames().size(); y++)
                    {
                        ExtendableValueProvider provider = new ExtendableValueProvider();
                        provider.setName(data.get(x).getNames().get(y));
                        provider.setIndex(y);
                        providers.add(provider);
                    }
                }
                createChart(providers, type);
                
                if(axis != null)
                    chart.removeAxis(axis);
                
                     axis = new NumericAxis<ChartPoint>();
                    axis.setPosition(Position.LEFT);
                    for(int x = 0; x < providers.size(); x++)
                        axis.addField(providers.get(x));
                    TextSprite title = new TextSprite(left);
                    title.setFontSize(18);
                    axis.setTitleConfig(title);
                    axis.setMinorTickSteps(1);
                    axis.setDisplayGrid(true);
                    PathSprite odd = new PathSprite();
                    odd.setOpacity(1);
                    odd.setFill(new Color("#ddd"));
                    odd.setStroke(new Color("#bbb"));
                    odd.setStrokeWidth(0.5);
                    axis.setGridOddConfig(odd);
                    axis.setMinimum(0);
                    axis.setMaximum(ceiling);
                    chart.addAxis(axis);
            }
            
            double biggestNumber = 0;
            for(int x = 0; x < data.size(); x++)
            {
                for(int y = 0; y < data.get(x).getPoints().size(); y++)
                {
                    for(int z = 0; z < data.get(x).getPoints().get(y).getValues().size(); z++)
                    {
                        if(data.get(x).getPoints().get(y).getValues().get(z) > biggestNumber)
                            biggestNumber = data.get(x).getPoints().get(y).getValues().get(z);
                    }
                        
                }
            }
            
            if(biggestNumber > ceiling)
            {
                Double d = new Double(biggestNumber);
                ceiling = d.intValue();
                chart.removeAxis(axis);
                if(axis != null)
                    chart.removeAxis(axis);
                 axis = new NumericAxis<ChartPoint>();
                axis.setPosition(Position.LEFT);
                for(int x = 0; x < providers.size(); x++)
                    axis.addField(providers.get(x));
                TextSprite title = new TextSprite(left);
                title.setFontSize(18);
                axis.setTitleConfig(title);
                axis.setMinorTickSteps(1);
                axis.setDisplayGrid(true);
                PathSprite odd = new PathSprite();
                odd.setOpacity(1);
                odd.setFill(new Color("#ddd"));
                odd.setStroke(new Color("#bbb"));
                odd.setStrokeWidth(0.5);
                axis.setGridOddConfig(odd);
                axis.setMinimum(0);
                axis.setMaximum(ceiling);
                chart.addAxis(axis);
                chart.redrawChartForced();
            }
            
            
    
            if(data.size() > 0)
            {
                store.addAll(data.get(0).getPoints());
                if(store.size() > storeSize)
                    trim(storeSize);
                store.commitChanges();
            }
        }

    Code:
    //createChart defers to this
    public void createAreaChart(List<ExtendableValueProvider> providers)
        {
            AreaSeries<ChartPoint> series = new AreaSeries<ChartPoint>();;
            
            for(int x = 0; x < chart.getSeries().size(); x++)
            {
                chart.removeSeries(x);
                x--;
            }
            chart.removeLegend();
            for(int x = 0; x < providers.size(); x++)
            {
                
                series.setYAxisPosition(Position.LEFT);
                series.addYField(providers.get(x));
                if(currentColor >= colors.size())
                    currentColor = 0;
                
                series.addColor(colors.get(currentColor));
                currentColor++;
                PathSprite highlightLine = new PathSprite();
                highlightLine.setHidden(true);
                highlightLine.addCommand(new MoveTo(0, 0));
                highlightLine.setZIndex(1000);
                highlightLine.setStrokeWidth(5);
                highlightLine.setStroke(new RGB("#444"));
                highlightLine.setOpacity(0.3);
                series.setHighlightLineConfig(highlightLine);
                series.setHighlighting(true);
                
                SeriesToolTipConfig<ChartPoint> toolTip = new SeriesToolTipConfig<ChartPoint>();
                toolTip.setTrackMouse(true);
                toolTip.setHideDelay(200);
                toolTip.setLabelProvider(new SeriesLabelProvider<ChartPoint>() {
             
                  @Override
                  public String getLabel(ChartPoint item, ValueProvider<? super ChartPoint, ? extends Number> valueProvider) 
                  {
                    ExtendableValueProvider p = (ExtendableValueProvider) valueProvider;
                    return p.getName() + " - " + item.getTime() + "- " + item.getValues().get(p.getIndex());
                  }
                });
                series.setToolTipConfig(toolTip);
            }
            chart.addSeries(series);
            setLegend(chart, series, providers);
        }

  2. It doesn't look like there is enough code to run the sample you have provided - at a glance, we are missing ExtendableValueProvider, TreeNode, ChartPoint, and ChartData, along with any basic startup wiring to make this work. Missing methods include createChart (though there is a createAreaChart, with different arguments), setLegend, fetchData, setRequestType

    Code:
            for(int x = 0; x < chart.getSeries().size(); x++)
            {
                chart.removeSeries(x);
                x--;
            }
    Is there a reason you are both incrementing and decrementing X in that loop? It keeps X at zero, which makes it always delete the 1st item, but is a little hard to read - why not a while loop?

    Code:
            store.clear();
            store.commitChanges();  
            catAxis.drawLabels();
            chart.redrawChartForced();
            chart.redrawSurfaceForced();
    The commitChanges shouldnt be required - clear is enough to delete the items. When you create the chart, you can either invoke bindStore or setStore to wire the store to the chart - if you use setStore, then redrawChart() is all that is required to clear data normally, not any of those others, but if you use bindStore, then even that will be done automatically.

    Without the ability to run this, and from the fact that the 3.0.1 Area Chart example seems to behave (at http://www.sencha.com/examples/#ExamplePlace:areachart), my guess is that you have two charts draw in the same place - the old one, and the new one. That old one is hidden behind the new one's grid strips, which is why it is half covered, and why clearing the store has no effect on it. And without the certainty about when you create the chart and the store, and that those are only created once, I can't point to anything specifically wrong in your code.

  3. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    It doesn't look like there is enough code to run the sample you have provided - at a glance, we are missing ExtendableValueProvider, TreeNode, ChartPoint, and ChartData, along with any basic startup wiring to make this work. Missing methods include createChart (though there is a createAreaChart, with different arguments), setLegend, fetchData, setRequestType

    Code:
            for(int x = 0; x < chart.getSeries().size(); x++)
            {
                chart.removeSeries(x);
                x--;
            }
    Is there a reason you are both incrementing and decrementing X in that loop? It keeps X at zero, which makes it always delete the 1st item, but is a little hard to read - why not a while loop?

    Code:
            store.clear();
            store.commitChanges();  
            catAxis.drawLabels();
            chart.redrawChartForced();
            chart.redrawSurfaceForced();
    The commitChanges shouldnt be required - clear is enough to delete the items. When you create the chart, you can either invoke bindStore or setStore to wire the store to the chart - if you use setStore, then redrawChart() is all that is required to clear data normally, not any of those others, but if you use bindStore, then even that will be done automatically.

    Without the ability to run this, and from the fact that the 3.0.1 Area Chart example seems to behave (at http://www.sencha.com/examples/#ExamplePlace:areachart), my guess is that you have two charts draw in the same place - the old one, and the new one. That old one is hidden behind the new one's grid strips, which is why it is half covered, and why clearing the store has no effect on it. And without the certainty about when you create the chart and the store, and that those are only created once, I can't point to anything specifically wrong in your code.

  4. #3
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Answers
    2
    Vote Rating
    1
    darkling235 is on a distinguished road

      0  

    Default


    I managed to fix the redraw by simplfying the code. I'm honestly still not sure what the issue was but it's finally fixed

  5. #4
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    13
    Vote Rating
    0
    sws is on a distinguished road

      0  

    Default Sprites left behind?

    Sprites left behind?


    I'm having the same problem however it is very difficult to reproduce in sharable code. I'm certain that there are NOT multiple charts being rendered. It looks like sprites are being left behind.

    The screenshot shows what happens when I refresh the data and then resize the panel containing the chart.
    area-chart-issue.png

    Any suggestions on how to track down the problem would be appreciated.
    Pete

  6. #5
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Do you have custom renderers? Any custom sprites added to the chart? Anything particularly unique about your data? It is very difficult to debug a screenshot - even with the earlier incomplete samples we could offer basic suggestions on things that 'felt' wrong.

    Does it happen only in specific browsers? The entire implementation of the sprite draw engine is different from in ie6-8 than all other browsers. If it is wrong in all browsers, that suggests that the draw code is consistent, and points to it being a bug either in the chart/series/axis itself or in your own code. With more clues about the setup we can possible narrow it down further.

  7. #6
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    13
    Vote Rating
    0
    sws is on a distinguished road

      0  

    Default


    Thanks for your input Colin. I've repeated the issue in my learning project but it still needs to be pared down for bugfix submission.

    The issue happens with Chromium, FireFox, IE10.
    No custom renderers nor sprites.

    The only peculiarities:
    - Numeric x-axis
    - Step plot emulation with data (extra points are added so that the plot appears to step)
    Last edited by sws; 14 Jan 2014 at 7:30 PM. Reason: Fix Formatting

  8. #7
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    13
    Vote Rating
    0
    sws is on a distinguished road

      0  

    Default


    I submitted a bug fix request.

    It seems the Chart.getStore().clear() does not remove sprites and this has knock on effects for charts that progressively change their configuration.

    If the configuration is not changed then 'replace all' causes the sprites to be correctly replaced with updated ones. Unfortunatley, 'replaceAll(empty-list)' doesn't work.

  9. #8
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Thanks for the bug report, and sorry for the delay in getting back to you. I'll follow up in the bug report you filed, but I have a workaround that should get you past this.

Thread Participants: 2

Tags for this Thread

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..."