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

      0  

    Default Unanswered: Chart Holes

    Unanswered: Chart Holes


    I'm trying to get our area charts to work but for some reason there are big empty spaces in it and I'm not sure why. It's always on the grey parts of the chart and it only seems to effect our area charts. The Line chart seems to be immune. Has anyone seen this behavior before? I've been trying to fix it but I'm not really sure what's causing it. I don't think we're doing anything really special with these charts. We add an element to the store every few seconds and then call chart.redrawChart. The only really odd thing we do is we're adjusting the axis's max value every addition in case the biggest number is over our ceiling. Any help would be most appreciated.
    Thanks

    P.S. You may also notice that the X axis has duplicate times. These are not actually duplicates because the second field is different but the selected granularity of the charts does not show seconds.



    BrokenCharts.jpg


    Last edited by darkling235; 3 Apr 2013 at 5:11 AM. Reason: Pic didn't upload properly

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,644
    Answers
    107
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    It looks as though the grid lines are being painted over top of the series items/polygons themselves, but I can't yet be sure as to why. Do you have any custom renderers that you are using? Do you see this in both SVG and VML (i.e. IE 6/7/8)?

    http://www.sencha.com/examples/#ExamplePlace:areachart has the same bands and uses an area series, but doesn't have the z-index difference, at least in ff (which is what you seem to be using). Even after redrawChart() (i.e. clicking "Reload Data") it still seems correct.

    Can you provide a sample that demonstrates this?

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

      0  

    Default


    Thank you for that test, it didn't occur to me. Yes IE has the exact same behavior.

    These are the classes I use. There is another involved that does nothing but manage the ListStore but I assume (correct me if I'm wrong) this should not effect the drawing. I'm including it for completeness but it won't run without many other components. The rest should come together correctly however. The store class will call acceptConsolidatedData every time the graph should update. I appreciate you taking a look at this. Let me know if more code or clarity would help.
    Thanks

    Code:
    package com.scalebase.management.client.charts;
    
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.List;
    
    import com.google.gwt.dom.client.Element;
    import com.google.gwt.user.client.rpc.SerializationException;
    import com.scalebase.api.dto.ChartData;
    import com.scalebase.api.dto.ChartPoint;
    import com.scalebase.api.dto.ConsolidatedChartPojo;
    import com.scalebase.api.dto.ViewTime;
    import com.scalebase.management.client.PropertiesWrapper;
    import com.scalebase.management.client.base.alert.BaseAlertCreator;
    import com.scalebase.management.client.model.TimeModel;
    import com.sencha.gxt.chart.client.chart.Chart;
    import com.sencha.gxt.chart.client.chart.Chart.Position;
    import com.sencha.gxt.chart.client.chart.Legend;
    import com.sencha.gxt.chart.client.chart.axis.CategoryAxis;
    import com.sencha.gxt.chart.client.chart.axis.NumericAxis;
    import com.sencha.gxt.chart.client.chart.axis.TimeAxis;
    import com.sencha.gxt.chart.client.chart.series.AreaSeries;
    import com.sencha.gxt.chart.client.chart.series.LineSeries;
    import com.sencha.gxt.chart.client.chart.series.Primitives;
    import com.sencha.gxt.chart.client.chart.series.SeriesLabelProvider;
    import com.sencha.gxt.chart.client.chart.series.SeriesToolTipConfig;
    import com.sencha.gxt.chart.client.draw.Color;
    import com.sencha.gxt.chart.client.draw.RGB;
    import com.sencha.gxt.chart.client.draw.path.MoveTo;
    import com.sencha.gxt.chart.client.draw.path.PathSprite;
    import com.sencha.gxt.chart.client.draw.sprite.Sprite;
    import com.sencha.gxt.chart.client.draw.sprite.TextSprite;
    import com.sencha.gxt.core.client.ValueProvider;
    import com.sencha.gxt.data.shared.LabelProvider;
    import com.sencha.gxt.data.shared.ListStore;
    import com.sencha.gxt.widget.core.client.ContentPanel;
    import com.sencha.gxt.widget.core.client.form.ComboBox;
    import com.sencha.gxt.widget.core.client.tips.ToolTip;
    
    
    /**
     * Base chart which handles context changes, view changes, and fetching data
     * 
     * The specific chart being built is defered to subclasses
     * @author LENOVO USER
     *
     */
    public abstract class StaticBaseChart extends ContentPanel implements ConsolidateChartDataConsumer
    {
        //used purely for JUNIT
        public static boolean skipFetch = false;
        
    
        protected int currentStepInFetch = 0;
        protected ChartType type;
        protected Chart<ChartPoint> chart;
        protected ListStore<ChartPoint> store;
        protected int storeSize = ViewTime.FIFTEEN_MINUTES.getNumberOfTicks();
        protected ComboBox<TimeModel> view;
        protected List<ExtendableValueProvider> providers;
        protected int currentColor = 0;
        protected List<RGB> colors = new ArrayList<RGB>();
        protected String left;  //String shown on the Left axis
    
        protected  CategoryAxis<ChartPoint, Date> catAxis;
        private ViewTime viewTime;
        private int ceiling = 100;
        protected NumericAxis<ChartPoint> axis;
        private String bottomString;
        private ConsolidateChartDataStore dataStore;
        private List<String> titles;
        public  StaticBaseChart()
        {
    
            Element textElement = this.getHeader().getAppearance().getTextElem(this.getHeader().getElement());
            textElement.getStyle().setProperty("textAlign", "center");
            this.setHeaderVisible(true);
    
            //this.setHeight("100%");
            //this.setWidth("100%");
            
            colors.add(new RGB("#94AD0A")); // muted lime green
            colors.add(new RGB("#115FA6")); //muted blue
            colors.add(new RGB("#A61120")); //muted red
            colors.add(new RGB("#EF9500")); // orange
            colors.add(new RGB("#660066")); //muted purple
            colors.add(new RGB("#0099FF")); //teal
            colors.add(new RGB("#0000FF")); //bright blue
            colors.add(new RGB("#FF3300")); //bright red
            colors.add(new RGB("#BB6000")); //dark orange
            colors.add(new RGB("#FF00FF")); //bright pink
      
        }
        
        public void init(String name, ComboBox<TimeModel> timeView, ChartType type, String left, String bottom, String header, List<String> titles)
        {        
            this.type = type;
            this.view = timeView;
            this.viewTime = getView();
            this.left = left;
            this.titles = titles;
            bottomString = bottom;
            this.setHeadingText(header);
            dataStore = ConsolidateChartDataStore.getDataStore(timeView);
            dataStore.register(this);
    
            
            chart = makeChart();
            store = makeStore();
            //chart.setStore(store);
            chart.bindStore(store);
            add(chart);
            
            ValueProvider<ChartPoint, Date> time = getBottomAxis();
            this.setBottomProvider(time, bottomString);
            
            providers = new ArrayList<ExtendableValueProvider>();
            
            for(int x = 0; x < titles.size(); x++)
            {
                ExtendableValueProvider provider = new ExtendableValueProvider();
                provider.setName(titles.get(x));
                provider.setIndex(x);
                providers.add(provider);
            }
            
             axis = new NumericAxis<ChartPoint>();
            axis.setPosition(Position.LEFT);
            axis.addField(providers.get(0));
            axis.setMinorTickSteps(1);
            axis.setDisplayGrid(true);
            axis.setSteps(5);
            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);
            
            createAreaChart(providers);
        }
        
        public abstract Chart<ChartPoint> makeChart();
        public abstract ListStore<ChartPoint> makeStore();
        
        
    
        public abstract ValueProvider<ChartPoint, Date> getBottomAxis();
        
        
        /**
         * Creates the legend below the chart
         * @param c
         * @param series
         * @param providers
         */
        protected void setLegend(Chart<ChartPoint> c,AreaSeries<ChartPoint> series, List<ExtendableValueProvider> providers)
        {
            List<String> legendTitles = new ArrayList<String>();
            for(int x = 0; x < providers.size(); x++)
            {                
                legendTitles.add(providers.get(x).getName());
            }
            Legend<ChartPoint> legend = new Legend<ChartPoint>();
            legend.setPosition(Position.BOTTOM);
            legend.setItemHighlighting(true);
            legend.setItemHiding(true);
            c.setLegend(legend);
            series.setLegendTitles(legendTitles);
        }
    
        
        
    
        
        
    
        
    
        
    
        
        
    
    
        @Override
        public ListStore<ChartPoint> getStore() {
            return store;
        }
        
        
        
        
        
        public void createLineChart(List<ExtendableValueProvider> provider)
        {
            
            LineSeries<ChartPoint> series;
            
            for(int x = 0; x < chart.getSeries().size(); x++)
            {
                chart.removeSeries(x);
                x--;
            }
            chart.removeAxis(Position.LEFT);
            chart.removeLegend();
            
            for(int x = 0; x < provider.size(); x++)
            {
                if(currentColor >= colors.size())
                    currentColor = 0;            
                RGB color = colors.get(currentColor);
                currentColor++;
                series = new LineSeries<ChartPoint>();
                series.setYAxisPosition(Position.LEFT);            
                series.setYField(provider.get(x));
                series.setStroke(color);
                series.setShowMarkers(true);
                Sprite marker = Primitives.circle(0, 0, 3);
                marker.setFill(color);
                series.setMarkerConfig(marker);
                series.setHighlighting(true);
                
                series.setLegendTitle(provider.get(x).getName());
                
                SeriesToolTipConfig<ChartPoint> toolTip = new SeriesToolTipConfig<ChartPoint>();
                toolTip.setTrackMouse(true);
                toolTip.setHideDelay(0);
                toolTip.setLabelProvider(new SeriesLabelProvider<ChartPoint>() {
             
                  @Override
                  public String getLabel(ChartPoint item, ValueProvider<? super ChartPoint, ? extends Number> valueProvider) 
                  {
                    ExtendableValueProvider p = (ExtendableValueProvider) valueProvider;
                    if(item.getValues() != null && item.getValues().size() > p.getIndex())
                        return p.getName() + " - " + item.getTime() + "- " + item.getValues().get(p.getIndex());
                    else
                        return null;
                  }
                });
                series.setToolTipConfig(toolTip);
                
                
                chart.addSeries(series);
            }
            
            final Legend<ChartPoint> legend = new Legend<ChartPoint>();
            legend.setPosition(Position.BOTTOM);
            legend.setItemHighlighting(true);
            legend.setItemHiding(true);
            chart.setLegend(legend);
        }
        
        
        
        public void setLeftProvider(ValueProvider<ChartPoint, Double> provider, String term)
        {
             NumericAxis<ChartPoint> axis = new NumericAxis<ChartPoint>();
                axis.setPosition(Position.LEFT);
                axis.addField(provider);
                //TextSprite title = new TextSprite(term);
               // title.setFontSize(18);
               // title.setFont("arial");
                //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(100);
                chart.addAxis(axis);
        }
        
        public void setBottomProvider(ValueProvider<ChartPoint, Date> provider, String term)
        {
                catAxis = new CategoryAxis<ChartPoint, Date>();
                catAxis.setPosition(Position.BOTTOM);
                catAxis.setField(provider);
                TextSprite sprite = new TextSprite();
                sprite.setRotation(315);
                catAxis.setLabelPadding(-10);
                catAxis.setLabelConfig(sprite);
                catAxis.setLabelTolerance(50);
                catAxis.setLabelProvider(new LabelProvider<Date>() {
                  @Override
                  public String getLabel(Date item) 
                  {
                    /*int current = currentStepInFetch;
                    int size = store.size();
                    currentStepInFetch++;
                    if(currentStepInFetch % 4 != 0)
                    {
                        if(currentStepInFetch >= store.size() -1)
                            currentStepInFetch = -1;
                        return null;
                    }
                    else
                        if(currentStepInFetch >= store.size() -1)
                            currentStepInFetch = -1;*/
                    
                    /**
                     * Label is based on viewTime. If less than fifteen minutes show minutes and seconds
                     * if the time range is larger show minutes and hours
                     */
                    if(viewTime == ViewTime.FIFTEEN_MINUTES)
                    {
                        int hours = item.getHours();
                        int min = item.getMinutes();
                        int secs = item.getSeconds();
                        StringBuffer buffer = new StringBuffer();
                        //if(lastWholeTimeUnit == -1 || min != lastWholeTimeUnit)
                        //{
                        
                        if(hours < 10)
                            buffer.append("0");
                        buffer.append(hours);
                        buffer.append(":");
                            if(min < 10)
                                buffer.append("0");
                            buffer.append(min);
                            
                        //}
                        buffer.append(":");
                        if(secs < 10)
                            buffer.append("0");
                        buffer.append(secs);
                        return buffer.toString();
                    }
                    else
                    {
                        int hours = item.getHours();
                        int min = item.getMinutes();
                        
                        StringBuffer buffer = new StringBuffer();
                        //if(lastWholeTimeUnit == -1 || hours != lastWholeTimeUnit)
                        //{
                        
                            if(hours < 10)
                                buffer.append("0");
                            buffer.append(hours);
                        //}
                        buffer.append(":");
                        if(min < 10)
                            buffer.append("0");
                        buffer.append(min);
                        return buffer.toString();
                    }
                  }
                });
                chart.addAxis(catAxis);
                
        }
    
        
    
        
    
    
        public void createAreaChart(List<ExtendableValueProvider> providers)
        {
            AreaSeries<ChartPoint> series = new AreaSeries<ChartPoint>();;
            
            
            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) 
                  {
                    for(int x = 0; x < chart.getSeries().size(); x++)
                        chart.getSeries().get(x).getToolTip().hideToolTip();
                    ExtendableValueProvider p = (ExtendableValueProvider) valueProvider;
                    return p.getName() + " - " + item.getTime() + "- " + item.getValues().get(p.getIndex());
                  }
                });
                series.setToolTipConfig(toolTip);
            }
            chart.addSeries(series);
            setLegend(chart, series, providers);
        }
    
        public int getStoreSize() {
            return storeSize;
        }
    
        public void setStoreSize(int storeSize) {
            this.storeSize = storeSize;
        }
    
    
        protected long getViewSeconds()
        {
            return viewTime.getLength_min() * 60;
        }
        
    
    
        public Chart<ChartPoint> getChart() {
            return chart;
        }
    
        public void setChart(Chart<ChartPoint> chart) {
            this.chart = chart;
        }
    
        
        public void handleException(SerializationException e)
        {
            
        }
        
        public void handleException(Throwable t)
        {
            BaseAlertCreator.makeAlert(PropertiesWrapper.properties.general_error(), PropertiesWrapper.properties.charts_fetch_error());
        }
        
        private void setCeiling()
        {
            double max = 0;
            for(int x = 0; x < store.size(); x++)
            {
                ChartPoint p = store.get(x); 
                for(int y = 0; y < p.getValues().size(); y++)
                {
                    if(p.getValues().get(y) > max)
                        max = p.getValues().get(y);
                }
            }
            
            ceiling = (int)Math.floor(max+1);
            
            if(ceiling < 100)
                ceiling = 100;
                    
            axis.setMaximum(ceiling);
                
        }
        
        //new data was provided. Store was already updated and now we need to modify our
        //providers in case the number of elements has changed
        public void acceptConsolidatedData(ConsolidatedChartPojo pojo)
        {
            setCeiling();
            chart.redrawChart();
            currentStepInFetch = -1;
        }
    
        public ConsolidateChartDataStore getDataStore() {
            return dataStore;
        }
    
    
        protected ViewTime getView()
        {
            if(view.getValue().getID() == 1)
                viewTime = ViewTime.FIFTEEN_MINUTES;
            if(view.getValue().getID() == 2)
                viewTime = ViewTime.ONE_HOURS;
            if(view.getValue().getID() == 3)
                viewTime = ViewTime.THREE_HOURS;
            if(view.getValue().getID() == 4)
                viewTime = ViewTime.SIX_HOURS;
            if(view.getValue().getID() == 5)
                viewTime = ViewTime.TWELVE_HOURS;
            if(view.getValue().getID() == 6)
                viewTime = ViewTime.TWENTY_FOUR_HOURS;
            return viewTime;
        }
        
        public ViewTime setView(int x)
        {
            if(x == 1)
                viewTime = ViewTime.FIFTEEN_MINUTES;
            if(x == 2)
                viewTime = ViewTime.ONE_HOURS;
            if(x == 3)
                viewTime = ViewTime.THREE_HOURS;
            if(x == 4)
                viewTime = ViewTime.SIX_HOURS;
            if(x == 5)
                viewTime = ViewTime.TWELVE_HOURS;
            if(x == 6)
                viewTime = ViewTime.TWENTY_FOUR_HOURS;
            return viewTime;
        }
        
    }
    
    
    
    
    
    package com.scalebase.management.client.charts;
    
    import java.sql.Timestamp;
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.List;
    
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.user.client.rpc.AsyncCallback;
    import com.scalebase.api.dto.ChartData;
    import com.scalebase.api.dto.ChartPoint;
    import com.scalebase.api.dto.ChartPojo;
    import com.scalebase.api.dto.ChartRequestObject;
    import com.scalebase.api.dto.ConsolidatedChartPojo;
    import com.scalebase.api.dto.ReadWriteChartObject;
    import com.scalebase.management.client.PropertiesWrapper;
    import com.scalebase.management.client.base.BaseEditWindow;
    import com.scalebase.management.client.interfaces.ChartAsync;
    import com.scalebase.management.client.model.TimeModel;
    import com.sencha.gxt.chart.client.chart.Chart;
    import com.sencha.gxt.core.client.ValueProvider;
    import com.sencha.gxt.data.shared.ListStore;
    import com.sencha.gxt.data.shared.ModelKeyProvider;
    import com.sencha.gxt.widget.core.client.form.ComboBox;
    
    public class AreaChart extends StaticBaseChart 
    {
        
    
        
        public  AreaChart(String name, ComboBox<TimeModel> timeView, String header)
        {
            super();
            init(name, timeView, ChartType.AREA, PropertiesWrapper.properties.charts_readChart_Left(), PropertiesWrapper.properties.charts_readChart_Bottom(), header, getTitles());
        }
        
        public List<String> getTitles()
        {
            List<String> titles = new ArrayList<String>();
            titles.add("Reads");
            titles.add("Writes");
            titles.add("Others");
            return titles;
        }
    
    
        @Override
        public ValueProvider<ChartPoint, Date> getBottomAxis() {
            
            ValueProvider<ChartPoint, Date> time = new ValueProvider<ChartPoint, Date>(){
    
                @Override
                public Date getValue(ChartPoint object) {
                    // TODO Auto-generated method stub
                    return object.getTime();
                }
    
                @Override
                public void setValue(ChartPoint object, Date value) {
                    object.setTime(value);
                    
                }
    
                @Override
                public String getPath() {
                    // TODO Auto-generated method stub
                    return "date";
                }};
                return time;
        }
    
        
    
        @Override
        public Chart makeChart() {
            return new Chart<ReadWriteChartObject>();
        }
    
    
        @Override
        public ListStore makeStore() {
            return this.getDataStore().getReadWriteStore();
        }
    
    
    
    
    
    }
    
    
    
    
    
    package com.scalebase.management.client.model;
    
    public class TimeModel 
    {
        private int ID;
        private int hours;
        private String name;
        
        public TimeModel(int x, int y, String n)
        {
            setID(x);
            setHours(y);
            setName(n);
        }
        
        public int getID() {
            return ID;
        }
        public void setID(int iD) {
            ID = iD;
        }
        public int getHours() {
            return hours;
        }
        public void setHours(int hours) {
            this.hours = hours;
        }
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        
        
    }
    
    
    package com.scalebase.api.dto;
    
    import java.io.Serializable;
    
    import com.google.gwt.user.client.rpc.IsSerializable;
    
    public enum ViewTime implements Serializable, IsSerializable
    {
        FIFTEEN_MINUTES(15, 30), ONE_HOURS(60, 120), THREE_HOURS(180, 300), SIX_HOURS(360, 600), TWELVE_HOURS(720, 900), TWENTY_FOUR_HOURS(1440, 1800);
        
        private int interval_sec;
        private int length_min;
        
        private ViewTime(int length_min, int interval_sec) {
            this.interval_sec = interval_sec;
            this.length_min = length_min;
        }
        
        public int getInterval_sec() {
            return interval_sec;
        }
    
        public int getLength_min() {
            return length_min;
        }
    
        public int getNumberOfTicks() {
            return length_min*60/interval_sec;
        }
    
    }
    
    
    
    package com.scalebase.api.dto;
    
    import java.io.Serializable;
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.List;
    
    import com.google.gwt.user.client.rpc.IsSerializable;
    
    public class ChartPoint implements Serializable, IsSerializable
    {
        private Date time;
        private List<Double> values;
        
        public ChartPoint()
        {
            values = new ArrayList<Double>();
        }
    
        public Date getTime() {
            return time;
        }
    
        public void setTime(Date time) {
            this.time = time;
        }
    
        public List<Double> getValues() {
            return values;
        }
    
        public void setValues(List<Double> values) {
            this.values = values;
        }
    }
    
    
    package com.scalebase.api.dto;
    
    import java.io.Serializable;
    
    import com.google.gwt.user.client.rpc.IsSerializable;
    
    public class ConsolidatedChartPojo implements Serializable, IsSerializable
    {
        private ChartPojo readWrite;
        private ChartPojo statement;
        private ChartPojo shardsGlobal;
        public ChartPojo getReadWrite() {
            return readWrite;
        }
        public void setReadWrite(ChartPojo readWrite) {
            this.readWrite = readWrite;
        }
        public ChartPojo getStatement() {
            return statement;
        }
        public void setStatement(ChartPojo statement) {
            this.statement = statement;
        }
        public ChartPojo getShardsGlobal() {
            return shardsGlobal;
        }
        public void setShardsGlobal(ChartPojo shardsGlobal) {
            this.shardsGlobal = shardsGlobal;
        }
        
        
    }
    
    
    
    package com.scalebase.api.dto;
    
    import java.io.Serializable;
    import java.util.List;
    
    import com.google.gwt.user.client.rpc.IsSerializable;
    
    public class ChartPojo implements Serializable, IsSerializable
    {
        private int ID;
        private List<ChartData> data;
        public int getID() {
            return ID;
        }
        public void setID(int iD) {
            ID = iD;
        }
        public List<ChartData> getData() {
            return data;
        }
        public void setData(List<ChartData> data) {
            this.data = data;
        }
        
        
        
    }
    
    
    //This class has a lot of dependencies but I thought it might be useful to see it
    
    
    package com.scalebase.management.client.charts;
    
    import java.sql.Timestamp;
    import java.util.ArrayList;
    import java.util.List;
    
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.user.client.rpc.AsyncCallback;
    import com.google.gwt.user.client.rpc.SerializationException;
    import com.scalebase.api.dto.ChartPoint;
    import com.scalebase.api.dto.ChartRequestObject;
    import com.scalebase.api.dto.ConsolidatedChartPojo;
    import com.scalebase.api.dto.TreeNode;
    import com.scalebase.api.dto.TreeType;
    import com.scalebase.api.dto.ViewTime;
    import com.scalebase.management.client.PropertiesWrapper;
    import com.scalebase.management.client.ScaleBaseLogger;
    import com.scalebase.management.client.base.ScaleBaseTimer;
    import com.scalebase.management.client.base.ScaleBaseTimerCallback;
    import com.scalebase.management.client.base.Screen;
    import com.scalebase.management.client.base.alert.BaseAlertCreator;
    import com.scalebase.management.client.base.context.ContextBus;
    import com.scalebase.management.client.base.context.ContextListener;
    import com.scalebase.management.client.interfaces.ChartAsync;
    import com.scalebase.management.client.model.TimeModel;
    import com.scalebase.management.shared.GlobalData;
    import com.sencha.gxt.chart.client.chart.Chart.Position;
    import com.sencha.gxt.data.shared.ListStore;
    import com.sencha.gxt.data.shared.ModelKeyProvider;
    import com.sencha.gxt.widget.core.client.form.ComboBox;
    
    public class ConsolidateChartDataStore implements ContextListener
    {
        protected List<ConsolidateChartDataConsumer> charts;
        protected int storeSize = ViewTime.FIFTEEN_MINUTES.getNumberOfTicks();
        protected ChartRequestObject request;
        protected Timestamp lastEnd;
        protected Timestamp lastStart;
        private ScaleBaseTimer timer;
        private ScaleBaseTimerCallback callback;
        private ViewTime viewTime;
        protected ComboBox<TimeModel> view;
        protected int fetchID = 0;
        protected ConsolidatedChartPojo pojo;
        
        protected ListStore<ChartPoint> readWriteStore;
        protected ListStore<ChartPoint> statementStore;
        protected ListStore<ChartPoint> shardGlobalStore;
        
        
        //singleton
        private static ConsolidateChartDataStore dataStore;
        
        private ConsolidateChartDataStore(ComboBox<TimeModel> timeView)
        {        
            shardGlobalStore = new ListStore<ChartPoint>(new ModelKeyProvider<ChartPoint>(){
    
                @Override
                public String getKey(ChartPoint item) {
                    return ""+item.getTime().getHours() + ":" + item.getTime().getMinutes() + ":" + item.getTime().getSeconds();
                }});;
            
            readWriteStore =new ListStore<ChartPoint>(new ModelKeyProvider<ChartPoint>(){
    
                @Override
                public String getKey(ChartPoint item) {
                    return ""+item.getTime().getHours() + ":" + item.getTime().getMinutes() + ":" + item.getTime().getSeconds();
                }});
            
            statementStore = new ListStore<ChartPoint>(new ModelKeyProvider<ChartPoint>(){
    
                @Override
                public String getKey(ChartPoint item) {
                    return ""+item.getTime().getHours() + ":" + item.getTime().getMinutes() + ":" + item.getTime().getSeconds();
                }});
            
            this.view = timeView;
            charts = new ArrayList<ConsolidateChartDataConsumer>();
            request = new ChartRequestObject();
            TreeNode dummy = new TreeNode();
            dummy.setType(TreeType.ShardRoot);
            setRequestOptions(dummy);
            this.fetchData();
            
            /**
             * Create a chron for the fetches
             */
            callback = new ScaleBaseTimerCallback(){
    
                @Override
                public void onCall(ScaleBaseTimer t) 
                {
                    
                        fetchData(request, false);
                    
                }};
            timer = new ScaleBaseTimer(callback, true, 10000, false);
        }
        
        public static ConsolidateChartDataStore getDataStore(ComboBox<TimeModel> timeView)
        {
            if(dataStore ==null)
            {
                dataStore = new ConsolidateChartDataStore(timeView);
                ContextBus.addReloadListener("ConsolidatedChartDataStore", dataStore);
            }
            return dataStore;
        }
        
        public void register(ConsolidateChartDataConsumer consumer)
        {
            charts.add(consumer);
            if(pojo != null)
                consumer.acceptConsolidatedData(pojo);
        }
        
        public void fetchData(ChartRequestObject request, final boolean firstFetch)
        {
            ChartAsync service = (ChartAsync)GWT.create(com.scalebase.management.client.interfaces.Chart.class);
            request = this.getRequest(request, firstFetch);
    
            service.getConsolidatedChartData(request, new AsyncCallback<ConsolidatedChartPojo>(){
    
                @Override
                public void onFailure(Throwable arg0) 
                {
                    
                    handleException(arg0);
                }
    
                @Override
                public void onSuccess(ConsolidatedChartPojo arg0) 
                {
                    
                    if(arg0.getStatement().getID() == getLastFetchID())
                    {
                        ScaleBaseLogger.info("Got chart data");
                        pojo= arg0;
                        
                        updateChartStore(readWriteStore, pojo.getReadWrite().getData().get(0).getPoints(), pojo.getReadWrite().getData().get(0).getNames(), firstFetch);
                        updateChartStore(statementStore, pojo.getStatement().getData().get(0).getPoints(), pojo.getReadWrite().getData().get(0).getNames(), firstFetch);
                        updateChartStore(shardGlobalStore, pojo.getShardsGlobal().getData().get(0).getPoints(), pojo.getReadWrite().getData().get(0).getNames(), firstFetch);
                        
                        
                        for(int x = 0; x < charts.size(); x++)
                        {
                            ConsolidateChartDataConsumer chart = charts.get(x);                        
                            chart.acceptConsolidatedData(arg0);    
                            chart.getChart().getAxis(Position.BOTTOM).clear();
                            chart.getChart().redrawChart();
                        }
                    }
                    else
                        ScaleBaseLogger.info("Got stale chart data");
                }});
        }
        
        /**
         * Data is organized by time. If we query at an inopportune interval, we may have an incomplete item in our store.
         * If any ChartPoints are returned that match this time, update the point
         * We assume you'll never have more than one incomplete node.
         * @param points
         * @param store
         */
        public void purge(List<ChartPoint> points, ListStore<ChartPoint> store)
        {
            for(int y = 0; y < points.size(); y++)
            {
                for(int x = store.size() -1; x > -1; x--)
                {                
                        if(store.get(x).getTime().getHours() == points.get(y).getTime().getHours() && store.get(x).getTime().getMinutes() == points.get(y).getTime().getMinutes() && store.get(x).getTime().getSeconds() == points.get(y).getTime().getSeconds())
                        {
                            store.update(points.get(y));
                            points.remove(y);
                            y--;
                            break;
                        }
                        
                        
                        if(store.get(x).getTime().getHours() < points.get(y).getTime().getHours() && store.get(x).getTime().getMinutes() < points.get(y).getTime().getMinutes() && store.get(x).getTime().getSeconds() < points.get(y).getTime().getSeconds())
                            break;
                }
            }
        }
        
        
        protected void updateChartStore(ListStore<ChartPoint> store, List<ChartPoint> list, List<String> names, boolean firstFetch)
        {
            //if context change or first time grab all data and update entire list
            if(firstFetch)
            {
                store.replaceAll(list);
                ScaleBaseLogger.fine("Full chart Fetch. Restarting chron");
                restartChron();    
            }
            else //if called on chron throw away any matching nodes, 
            {
                ScaleBaseLogger.fine("Incremental chart Fetch. Incrementing chart");
                if(list.size() > 0)
                {
                    purge(list, store);
                    for(int x = 0; x < list.size(); x++)
                    {
                        store.remove(0);
                    }
                    store.addAll(list);    
                    
                    //while(store.size() > 15)
                        //store.remove(0);
                }
            }
        }
        
        /**
         * This method restarts the Chron after a change context, change view event cancels it
         */
        public void restartChron()
        {
            if(timer != null)
            {
                if(timer.isRunning() == false)
                {
                    ScaleBaseLogger.fine("Starting chart chron");
                    timer.init(timer, callback, true, 10000, false);
                }
                else
                {
                    ScaleBaseLogger.warn("Tried to start chart chron but chart chron already running");
                }
            }
            else
                ScaleBaseLogger.warn("Tried to start chart chron but chart chron is not yet instantiated");
        }
        
        
        /**
         * Manage request parameters (start and end time)
         * @param request
         * @param firstFetch
         * @param currentTime
         * @param view
         * @return
         */
        public ChartRequestObject setTime(ChartRequestObject request, boolean firstFetch, long currentTime, ViewTime view)
        {
            Timestamp start = null;
            Timestamp end = null;
            if(firstFetch == false)
            {
                end = new Timestamp(currentTime);
                end.setNanos(0);
                start = new Timestamp(currentTime);
                start = roundTime(start);
                
                if(end.getTime() == start.getTime())
                    start = new Timestamp(start.getTime() - (view.getInterval_sec() * 1000));
                //start = roundTimeUp(start);
    
                //Timestamp last = getLastEndTime();
                //Timestamp rounded1 = roundTime(end);
                //Timestamp rounded2 = roundTime(getLastEndTime());
                //if(rounded1.compareTo(rounded2) != 0)
                //{
                    start = new Timestamp(start.getTime() - (view.getInterval_sec() * 1000));                
                //}
                start.setNanos(0);
                //roundTimeUp(start);
            }
            else
            {
                end = new Timestamp(currentTime);
                //end = this.roundTime(end);
                long temp = roundTime(end).getTime();
                temp = temp - view.getLength_min() * 60*1000;
                start = new Timestamp(temp);
                start.setNanos(0);
                end.setNanos(0);
            
            }
            request.setStart(start);
            request.setEnd(end);    
            setLastEndTime(end);
            setLastStartTime(start);
            return request;
        }
        
        protected ChartRequestObject getRequest(ChartRequestObject request, boolean firstFetch)
        {
            return setTime(request, firstFetch, System.currentTimeMillis(), viewTime);
        }
        
        
        public Timestamp roundTime(Timestamp t)
        {
            
            Timestamp s = (Timestamp)t.clone();
            if(viewTime != ViewTime.FIFTEEN_MINUTES)
            {
                int min = s.getMinutes();
                int viewMin = (viewTime.getInterval_sec() / 60);
                int mod = min % viewMin;
                s.setMinutes(t.getMinutes() - mod);
                s.setSeconds(0);
            }
            else
            {
                if(s.getSeconds() >= 30)
                    s.setSeconds(30);
                else
                    s.setSeconds(0);
            }
            s.setNanos(0);
            return s;
        }
        
        public Timestamp roundTimeUp(Timestamp t)
        {
            t.setSeconds(0);
            t.setNanos(0);
            if(viewTime != ViewTime.FIFTEEN_MINUTES)
            {
                int min = t.getMinutes();
                int viewMin = (viewTime.getInterval_sec() / 60);
                int mod = min % viewMin;
                t.setMinutes(t.getMinutes() + mod);
            }
            return t;
        }
    
        
        public Timestamp getLastEndTime() {
            return lastEnd;
        }
    
        public void setLastEndTime(Timestamp lastTime) {
            this.lastEnd = lastTime;
        }
    
        
        public Timestamp getLastStartTime() {
            return lastStart;
        }
    
        public void setLastStartTime(Timestamp lastStart) {
            this.lastStart = lastStart;
        }
        
        public void handleException(SerializationException e)
        {
            
        }
        
        public void handleException(Throwable t)
        {
            ScaleBaseLogger.severe("Error fetching chart data");
            ScaleBaseLogger.logError(t);
            BaseAlertCreator.makeAlert(PropertiesWrapper.properties.general_error(), PropertiesWrapper.properties.charts_fetch_error());
        }
        
        /**
         * main method used by contextlistener, eventListener, and any other external to force the data refetched
         */
        public void fetchData()
        {
            if(timer != null)
            {
                ScaleBaseLogger.fine("Killing chart Chron");
                timer.cancel();  //cancel the timer. We don't want it to keep fetching using old criteria and overwriting new data
            }
            //viewTime = getView();
            request.setView(viewTime);
            storeSize = viewTime.getNumberOfTicks();        
            fetchData(request, true);        
        }
    
        
        
        /**
         * Sets up the request options
         * @param type
         */
        public void setRequestOptions(TreeNode type)
        {
            request.setID(getFetchID());
            request.setAppId(type.getAppId());
            request.setShardSequence(null);
            request.setNodeSequence(null);
            if(type.getType() == TreeType.Application || type.getType() == TreeType.ShardRoot)
            {
                request.setShardSequence(null);
                request.setNodeSequence(null);
            }
            else if(type.getType() == TreeType.Shard)
            {
                request.setShardSequence(type.getSequence());
                request.setNodeSequence(null);
            }
            else if(type.getType() == TreeType.ReadWrite || type.getType() == TreeType.Read || type.getType() == TreeType.Write || type.getType() == TreeType.None)
            {
                request.setNodeSequence(type.getSequence());
                request.setShardSequence(GlobalData.getShardById(type.getRawParentId()).getSequenceOrder());
            }
            request.setView(getView());
        }
    
        
    
        
        
        public int getFetchID()
        {
            return ++fetchID;
        }
        
        public int getLastFetchID()
        {
            return fetchID;
        }
    
        
    
        
        protected ViewTime getView()
        {
            if(view.getValue().getID() == 1)
                viewTime = ViewTime.FIFTEEN_MINUTES;
            if(view.getValue().getID() == 2)
                viewTime = ViewTime.ONE_HOURS;
            if(view.getValue().getID() == 3)
                viewTime = ViewTime.THREE_HOURS;
            if(view.getValue().getID() == 4)
                viewTime = ViewTime.SIX_HOURS;
            if(view.getValue().getID() == 5)
                viewTime = ViewTime.TWELVE_HOURS;
            if(view.getValue().getID() == 6)
                viewTime = ViewTime.TWENTY_FOUR_HOURS;
            return viewTime;
        }
        
        public ViewTime setView(int x)
        {
            if(x == 1)
                viewTime = ViewTime.FIFTEEN_MINUTES;
            if(x == 2)
                viewTime = ViewTime.ONE_HOURS;
            if(x == 3)
                viewTime = ViewTime.THREE_HOURS;
            if(x == 4)
                viewTime = ViewTime.SIX_HOURS;
            if(x == 5)
                viewTime = ViewTime.TWELVE_HOURS;
            if(x == 6)
                viewTime = ViewTime.TWENTY_FOUR_HOURS;
            return viewTime;
        }
    
        protected long getViewSeconds()
        {
            return viewTime.getLength_min() * 60;
        }
    
        public ChartRequestObject getRequest() {
            return request;
        }
    
        public ListStore<ChartPoint> getReadWriteStore() {
            return readWriteStore;
        }
    
        public ListStore<ChartPoint> getStatementStore() {
            return statementStore;
        }
    
        public ListStore<ChartPoint> getShardGlobalStore() {
            return shardGlobalStore;
        }
    
        @Override
        public String getName() {
            // TODO Auto-generated method stub
            return null;
        }
    
        @Override
        public void onContextChange(TreeNode type) 
        {
            this.setRequestOptions(type);
            this.fetchData();
            
        }
    
        @Override
        public void onPageChange(Screen screen) {
            if(screen == Screen.Monitoring)
            {
                restartChron();
            }
            
            if(screen == Screen.System)
            {
                if(timer != null)
                {                
                    timer.cancel();
                    ScaleBaseLogger.warn("Stopped chart chron");
                }
                else
                    ScaleBaseLogger.warn("Tried to stop chart chron but chart chron was not instantiated");
            }
        }
    
        @Override
        public boolean preContextChange(TreeNode type) {
            // TODO Auto-generated method stub
            return true;
        }
    
        @Override
        public boolean prePageChange(Screen screen) {
            // TODO Auto-generated method stub
            return true;
        }
    
        @Override
        public void deRegister() {
            // TODO Auto-generated method stub
            
        }
    
        
        
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    package com.scalebase.management.client.charts;
    
    import com.scalebase.api.dto.ChartPoint;
    import com.sencha.gxt.core.client.ValueProvider;
    
    
    /**
     * Provider which takes its name and values from the provided list of ChartPoint data
     * @author LENOVO USER
     *
     */
    public class ExtendableValueProvider implements ValueProvider<ChartPoint, Double>
    {
        private int index;
        private String name;
        @Override
        public Double getValue(ChartPoint object) {
            if(index >= object.getValues().size())
            {
                Double d = new Double(0);
                return d;
            }
            return object.getValues().get(index);
        }
    
        @Override
        public void setValue(ChartPoint object, Double value) {
            // TODO Auto-generated method stub
            
        }
    
        @Override
        public String getPath() {
            // TODO Auto-generated method stub
            return name;
        }
    
        public int getIndex() {
            return index;
        }
    
        public void setIndex(int index) {
            this.index = index;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
        
        
    
    }
    
    
    
    package com.scalebase.management.client.charts;
    
    import com.scalebase.api.dto.ChartPoint;
    import com.scalebase.api.dto.ConsolidatedChartPojo;
    import com.sencha.gxt.chart.client.chart.Chart;
    import com.sencha.gxt.data.shared.ListStore;
    
    public interface ConsolidateChartDataConsumer {
        public void acceptConsolidatedData(ConsolidatedChartPojo pojo);
        public Chart<ChartPoint> getChart();
        public ListStore<ChartPoint> getStore();
    }
    Last edited by darkling235; 4 Apr 2013 at 5:17 AM. Reason: added more code and documentation

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,644
    Answers
    107
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    Yikes, that's pretty big as samples go. I'll try to get it running today to at least confirm if I can reproduce it, but even if I can, that's 14 hundred lines (plus or minus imports and whitespace) to find a bug in. any chance this can be slimmed down to chart+data+a mechanism to add data?

    At a glance, missing classes:
    PropertiesWrapper
    BaseAlertCreator
    ChartAsync (and Chart)
    ChartData
    ExtendableValueProvider

    Not all of those look essential, but since the Chart is generic on ChartPoint and ChartData is nested in there. ExtendableValueProvider seems to be the main valueprovider, and that uses the ChartData objects, so I'm pretty sure that is a fatal missing piece.

    Two ideas, rather than having you slowly upload your entire codebase: start with the area chart sample I linked and add more of your specific needs until it breaks, or try breaking your sample down until less than, say 300 lines and still has an issue. Or, consider a zipped up simple project, either in a standard Eclipse format or a maven project with a pom so that I can run it out of the box.

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

      0  

    Default


    Well you can't say I didn't warn you. =)

    I'll try to rebuild some of the stuff over the weekend and see if I can lock down where things start to break
    Thanks

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

      0  

    Default


    While working on it I believe I managed to find a solution.........or a hack. One or the other.

    When ever the store is updated it tells my chart code. My chart responds by calling redrawChart just like in the example.

    Before it redrawsChart I added chart.clearSurface

    and so far that seems to have fixed the problem. I need to do more testing however

Thread Participants: 1

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