1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    19
    Answers
    4
    Vote Rating
    0
    BionicGeek is on a distinguished road

      0  

    Default Answered: Generate a line chart with a dynamic number of line series fields?

    Answered: Generate a line chart with a dynamic number of line series fields?


    Is it possible to generate a line chart and populate it with a dynamic number of line series fields, and if so, what is the recommended method?

    I understand that multiple series fields can be added to a chart, but the line chart examples (and the other chart examples for that matter) make use of an interface which extends PropertyAccess<?> and the interface specifies a static number of expected fields (e.g. data1(), data2(), data3(), etc.). If the interface is to be used to specify the fields to add to the chart, how could you account for a chart which may require n number of fields (i.e. n number of line series on a given chart)?

  2. New blog post out today with a more fleshed out version of this example: http://www.sencha.com/blog/building-gxt-charts/

  3. #2
    Sencha User PhiLho's Avatar
    Join Date
    Nov 2011
    Location
    Near Paris, France
    Posts
    140
    Answers
    2
    Vote Rating
    1
    PhiLho is on a distinguished road

      0  

    Default


    I am interested by the answer as I was perplexed the first time I saw this: we have to create charts with variable number of series in them, and this rigid organization is puzzling. Are we supposed to declare a high number of series and use only the required number?

    Because of that, and some other limitations (more than 2 axes, among other things), we will probably use Highcharts (the Moxieapps wrapper for GWT) instead.
    The Sencha chart module is fine for most usages, I would use it in a simple application, but our needs go beyond the features it offers.

  4. #3
    Sencha - GXT Dev Team BrendanC's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Answers
    3
    Vote Rating
    3
    BrendanC is on a distinguished road

      0  

    Default


    You can have a dynamic number of lines using the add and remove series call on chart based on the number of value providers. ValueProvider is simply an interface that allows you get data from some other data. Judging from your post you are wanting to use a map or something similar. For example you could make a value provider like this:
    Code:
    class DynamicValueProvider implements ValueProvider<ModelItem, Double> {
    
    
      private String field;
      
      public DynamicValueProvider(String field) {
        this.field = field;
      }
      
      @Override
      public Double getValue(ModelItem object) {
        return object.get(field);
      }
    
    
      @Override
      public void setValue(ModelItem object, Double value) {
        object.put(field, value);
      }
    
    
      @Override
      public String getPath() {
        return field;
      }
      
    }
    And then you could setup your store like so:
    Code:
    class ModelItem {
      private Map<String, Double> data = new HashMap<String, Double>();
      private String name;
      public Double get(Object key) {
        return data.get(key);
      }
      public Double put(String key, Double value) {
        return data.put(key, value);
      }
      public String getName() {
        return name;
      }
      public void setName(String name) {
        this.name = name;
      }
      
    }
    
    ListStore<ModelItem> store = new ListStore<ModelItem>(new ModelKeyProvider<ModelItem>() {
    
    
          @Override
          public String getKey(ModelItem item) {
            return item.getName();
          }
        });
        for(int i = 0; i < 6; i++) {
          ModelItem item = new ModelItem();
          item.setName("name" + i);
          item.put("n", Math.random());
          store.add(item);
        }
    And then when you wanted to dynamically add a new line you would set it to the DynamicValueprovider with the field in the map you wanted to use:
    Code:
    LineSeries<ModelItem> series = new LineSeries<ModelItem>();
    series.setYField(new DynamicValueProvider("n"));
    chart.addSeries(series);

  5. #4
    Sencha User
    Join Date
    May 2011
    Posts
    12
    Vote Rating
    0
    danieljamesscott is on a distinguished road

      0  

    Default


    Could you show how you would setup the axes for the chart in this example?

  6. #5
    Sencha - GXT Dev Team BrendanC's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Answers
    3
    Vote Rating
    3
    BrendanC is on a distinguished road

      1  

    Default


    New blog post out today with a more fleshed out version of this example: http://www.sencha.com/blog/building-gxt-charts/

  7. #6
    Sencha User
    Join Date
    May 2012
    Posts
    19
    Answers
    4
    Vote Rating
    0
    BionicGeek is on a distinguished road

      0  

    Default


    Thank you, this is precisely what I was looking for when I originally posted this question. Much appreciated for the follow up and the blog post!

  8. #7
    Sencha User
    Join Date
    Sep 2012
    Posts
    1
    Vote Rating
    1
    makhijaroma is on a distinguished road

      1  

    Default


    Please tell me how can I have X-axis labels when using this approach?

    Thanks in advance

  9. #8
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    maujee is on a distinguished road

      0  

    Default


    This is good.

    However, without support for X-Axis, it's a bit lacking. Is there a plan to update the example?

  10. #9
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    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


    makhijaroma: Every example on that post has x-axis labels - only the very last image doesn't show labels because it is zoomed in too far. What do you mean by 'have x-axis labels'?

    maujee: The same idea that lets you set any thing that matches the right ValueProvider interface for the Y-axis will work for the X-axis as well. We have no plans to update the post, as the exact same principle follows. Are you having problems? What have you tried?

  11. #10
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    maujee is on a distinguished road

      0  

    Default


    Thanks for the reply.

    Firstly, if you click on the example in the blog post, it takes you to a demo without an x-axis.

    I am revisiting GXT since version 3 in order to evaluate it for use in our company, so I am just trying to see how it all works.

    I was hoping for a full example (not sure why you wouldn't want to provide that, really, as a point of customer service) and the same for grouped bar charts, but I am sure I can figure it out eventually when I have the time.

    The complexity and rigidity of the charting tools are really a big negative point for this framework at the moment. If you compare this with the simplicity of creating a chart from dynamic data with Google Visualisation, it's quite different.

    The rest of the framework is very nice and we do like it a lot, so I would like to understand more before we buy licenses for our global development teams. Again, full examples would help since we have very little time to spend to get too deep while evaluating our choices for web GUIs.