1. #1
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    20
    Vote Rating
    0
    onentwoo is on a distinguished road

      0  

    Default Unanswered: scatter chart adding multiple value on the same x-axis category

    Unanswered: scatter chart adding multiple value on the same x-axis category


    In scatter graph i am trying to display multiple point on the same x-axis value
    (in example value 3 ,5 ,7) is on the same x-axis date (28/4).
    all the values belong to one series (there are more series on the graph)

    however i cannot find a way to do that.
    to the store i am adding a ModelKeyProvider

    ModelKeyProvider<ModelItem> mkp = new ModelKeyProvider<ModelItem>() {
    @Override
    public String getKey(ModelItem item) {
    return String.valueOf(item.getKey());
    }
    };
    private ListStore<ModelItem> store = new ListStore<ModelItem>(mkp);

    in the series i am adding
    ((ScatterSeries<ModelItem>)currentSeries).setYField(new MapValueProvider(name));
    and also in the axis (category axis)
    axis.addField(new MapValueProvider(name));

    when adding a value :
    ModelItem item = store.get(index); (index is the date 24-Apr, 25-Apr, 28-Apr)
    item.put(seriesName, valueNumber);

    this means that in the store every date is a category and every category is a map of a series name, and a value.
    the model is about:
    date 24
    series1, 4
    series2, 5
    date 25
    series1,3
    series2 ,4

    however when i need to add more than one value for a series on a date
    date 28
    series1, 3
    series1, 4
    series2, 3

    i cannot do it because it's map with single key

    if i add two category (i.e date 28) to the store i see the same date twice on the x-axis

    how should i handle the store correctly.

    Thanx

  2. #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


    Without seeing the full code, it is a little hard to say what is wrong, but this is indeed possible. http://www.sencha.com/examples/#Exam...ce:filterchart is filled with random data, but should show at least one or two items in the same series sharing a x value.

    Are you seeing that the order of the items along the axis is based only on the order of the items in the store? If so, the series is not correctly configured to use the same field as the axis is using, or is not configured to use the right axis to represent that data.

    Can you share a working sample that demonstrates this?

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    20
    Vote Rating
    0
    onentwoo is on a distinguished road

      0  

    Default


    Hi,
    I think that my issue is dynamic number of series.
    Since in all the scatter examples they have finite number of series i can't build my code according to it.
    I am trying to use 'MapValueProvider' example , but it seems that i dont know how to configure the series, axis etc. to use it right.
    The best thing, if you can give small example of how to use scatter graph, but with unknown/ dynamic number of series, using x and y axis.
    or help me get to the solution.

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    20
    Vote Rating
    0
    onentwoo is on a distinguished road

      0  

    Default


    Another additional issue is that the X-axis is a category type (String labels).
    so
    1. graph can contain dynamic number of series
    2. x-axis is a category type
    3. in the same series i can have points with different y value but same x axis label.

  5. #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


    For an example of a chart with a dynamic number of series that share the axes, look at http://www.sencha.com/examples/#Exam...namiclinechart instead. This is using a LineSeries instead of a ScatterSeries, but remember that LineSeries is a subclass of ScatterSeries. We don't have any examples presently using more than one scatter series, but having built them myself in the past, I know that there isn't a problem with them.

    What have you tried? Look at the example I listed and change it to a ScatterSeries - does it work as you'd expect it to? Notice also please that this example uses the MapValueProvider.

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    20
    Vote Rating
    0
    onentwoo is on a distinguished road

      0  

    Default


    Well that's what i have started with , however I think i've reduced the problem to the issue i've listed above.
    meaning i want to display scatter graph (or line graph in your example) where the x axis is of category type, y axis is number type and i want to display two point with same x value but different y value (or if line graph , a straight vertical line).

  7. #7
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    20
    Vote Rating
    0
    onentwoo is on a distinguished road

      0  

    Default


    Attaching code two parts (the main logic and a small data object.
    notice that i am trying to add to the store two items with same x-axis category (test3) and different y-axis (2 and 5) and i just get multiplication in the x-axis ticks.

    Code:
    /**
     * Entry point classes define <code>onModuleLoad()</code>.
     */
    public class Gxt3test implements EntryPoint {
    	/**
    	 * The message displayed to the user when the server cannot be reached or
    	 * returns an error.
    	 */
    	 public interface DataPropertyAccess extends PropertyAccess<MyData> {
    		    ValueProvider<MyData, Double> data1();
    		    
    		    ValueProvider<MyData, Double> data2();
    		    
    		    ValueProvider<MyData, Double> data3();
    		    
    		    ValueProvider<MyData, Double> data4();
    		 
    		    ValueProvider<MyData, String> name();
    		 
    		    @Path("name")
    		    ModelKeyProvider<MyData> nameKey();
    		  }
    		 
    		  private static final DataPropertyAccess dataAccess = GWT.create(DataPropertyAccess.class);
    		  
    		  
    		  public Widget asWidget() {
    			    final ListStore<MyData> store = new ListStore<MyData>(dataAccess.nameKey());
    			    store.add(new MyData("test", 1, 2, 2 , 2));
    			    store.add(new MyData("test2", 2, 3 , 2, 5));
    			    store.add(new MyData("test3", 2, 4 , 4, 2));
    			    store.add(new MyData("test3", 5, 4 , 4, 2));
    			 
    			 
    			    final Chart<MyData> chart = new Chart<MyData>();
    			    chart.setStore(store);
    			    chart.setShadowChart(false);
    			 
    			    NumericAxis<MyData> axis = new NumericAxis<MyData>();
    			    axis.setPosition(Position.LEFT);
    			    axis.addField(dataAccess.data1());
    			    //axis.addField(dataAccess.data3());
    			    axis.setMinimum(0);
    			    axis.setMaximum(10);
    			    TextSprite title = new TextSprite("Number of Hits");
    			    title.setFontSize(18);
    			    axis.setTitleConfig(title);
    			    chart.addAxis(axis);
    			 
    			    CategoryAxis<MyData, String> axis2 = new CategoryAxis<MyData, String>();
    			   
    			    axis2.setPosition(Position.BOTTOM);
    			    axis2.setField(dataAccess.name());
    			    //axis2.addField(dataAccess.data2());
    			    //axis2.addField(dataAccess.data4());
    			    chart.addAxis(axis2);
    			 
    			    final ScatterSeries<MyData> series = new ScatterSeries<MyData>();
    			    series.setYAxisPosition(Position.LEFT);
    			    //series.setXAxisPosition(Position.BOTTOM);
    			    series.setYField(dataAccess.data1());
    			    
    			   // series.setXField(dataAccess.name());
    			    //series.setXField(dataAccess.name());
    			    
    			    series.setToolTipConfig(new SeriesToolTipConfig<MyData>());
    			    Sprite marker = Primitives.cross(0, 0, 8);
    			    marker.setFill(RGB.GREEN);
    			    series.setMarkerConfig(marker);
    			    series.setHighlighting(true);
    			    chart.addSeries(series);
    			    
    			  /*  final ScatterSeries<MyData> series2 = new ScatterSeries<MyData>();
    			   series2.setYAxisPosition(Position.LEFT);
    			   series2.setXAxisPosition(Position.BOTTOM);
    			    series2.setYField(dataAccess.data3());
    			    series2.setXField(dataAccess.data4());
    			    series2.setToolTipConfig(new SeriesToolTipConfig<MyData>());
    			    Sprite marker2 = Primitives.cross(0, 0, 8);
    			    marker2.setFill(RGB.RED);
    			    series2.setMarkerConfig(marker2);
    			    series2.setHighlighting(true);
    			   chart.addSeries(series2);*/
    			   
    			    ContentPanel panel = new FramedPanel();
    			  
    			    panel.setCollapsible(true);
    			    panel.setHeadingText("Scatter Chart");
    			    panel.setPixelSize(620, 500);
    			    panel.setBodyBorder(true);
    			     
    			    final Resizable resize = new Resizable(panel, Dir.E, Dir.SE, Dir.S);
    			    resize.setMinHeight(400);
    			    resize.setMinWidth(400);
    			     
    			    panel.addExpandHandler(new ExpandHandler() {
    			      @Override
    			      public void onExpand(ExpandEvent event) {
    			        resize.setEnabled(true);
    			      }
    			    });
    			    panel.addCollapseHandler(new CollapseHandler() {
    			      @Override
    			      public void onCollapse(CollapseEvent event) {
    			        resize.setEnabled(false);
    			      }
    			    });
    			     
    			    new Draggable(panel, panel.getHeader()).setUseProxy(false);
    			     
    			    ToolBar toolBar = new ToolBar();
    			   
    			 
    			    VerticalLayoutContainer layout = new VerticalLayoutContainer();
    			    panel.add(layout);
    			 
    			    toolBar.setLayoutData(new VerticalLayoutData(1, -1));
    			    layout.add(toolBar);
    			 
    			    chart.setLayoutData(new VerticalLayoutData(1, 1));
    			    layout.add(chart);
    			 
    			    return panel;
    			 
    			  }
    		  
    	
    
    
    	/**
    	 * This is the entry point method.
    	 */
    	public void onModuleLoad() {
    		RootPanel.get().add(asWidget());
    	}
    }
    The data object:

    Code:
    package gxt3test.client;
    
    
    public class MyData {
    	 private String name;
    	  private double data1;
    	  private double data2;
    	  
    	  private double data3;
    	  private double data4;
    	  
    	  public MyData(String name, double data1, double data2, double data3, double data4) {
    		  this.name = name;
    		    this.data1 = data1;
    		    this.data2 = data2;
    		    this.data3 = data3;
    		    this.data4 = data4;
    	  }
    	  
    	  public double getData1() {
    		    return data1;
    		  }
    	  
    	  public double getData2() {
    		    return data2;
    		  }
    	  
    	  public double getData3() {
    		    return data3;
    		  }
    	  
    	  public double getData4() {
    		    return data4;
    		  }
    		 
    		  public String getName() {
    		    return name;
    		  }
    		  
    		  public void setData1(double data1) {
    			    this.data1 = data1;
    			  }
    		  
    		  public void setData2(double data2) {
    			    this.data2 = data2;
    			  }
    			 
    			  public void setName(String name) {
    			    this.name = name;
    			  }
    }

  8. #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


    First obvious bug:
    Code:
        store.add(new MyData("test", 1, 2, 2 , 2));
        store.add(new MyData("test2", 2, 3 , 2, 5));
        store.add(new MyData("test3", 2, 4 , 4, 2));
        store.add(new MyData("test3", 5, 4 , 4, 2));
    Two items with the same key means that they are the same item as far as the store is concerned. GXT 3.0.3 or so and beyond will throw an exception is you attempt to do this.

    With that corrected (changed the second to test4), here is what I get. I'm not sure what you mean by "multiplication in the x-axis ticks", but I can't reproduce it. This is what I see in both GXT 3.0.1 and 3.0.6:
    Screen Shot 2013-09-16 at 12.57.18 PM.png

  9. #9
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    20
    Vote Rating
    0
    onentwoo is on a distinguished road

      0  

    Default


    Hi
    However i would like to have two points under test3
    test3 on x axis and 2 on y axis
    and test3 on x axis and 5 on y axis

    what should i change to support that ?

  10. #10
    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


    They can both have the same x-value without having the same key. There must *never* be more than one item with the same key.

    Use a different property for the key (so that it can be unique) from the x-value.