Using Sencha GXT 3, generate a line chart populated with a dynamic number of line series fields?

Question

Using Sencha GXT 3.0 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 know 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).

Example provided on Sencha's site:

http://www.sencha.com/examples/#ExamplePlace:linechart

score 0 · Accepted Answer · answered May 25 '12 at 10:46

I ran into the same issue. It would be a much nicer design if each series had a store instead of having one store per chart.

I had one long list of metric values in metricDataStore. Each metric value has a description. I wanted all the metric values with the same description displayed on one (and only one) series. I had my value providers for each series return null for both the x and y axis if the value wasn't supposed to be in the series.

This seems like a hack to me but it works for my usage:

    myChart = new Chart<MetricData>();
    myChart.setStore(metricDataStore);

. . .

    for (MetricInfo info : metricInfoData) {
        LineSeries<MetricData> series = new LineSeries<MetricData>();
        series.setChart(myChart);
        series.setSmooth(false);
        series.setShownInLegend(true);
        series.setHighlighting(true);
        series.setYAxisPosition(Chart.Position.LEFT);
        series.setYField(new MetricValueProvider(info.getName()));
        series.setXAxisPosition(Chart.Position.BOTTOM);
        series.setXField(new MetricTimeProvider(info.getName()));
        myChart.addSeries(series);
    }

. . .

private class MetricTimeProvider extends Object implements ValueProvider<MetricData, Long> {
    private String metricName;

    public MetricTimeProvider(String metricName) {
        this.metricName = metricName;
    }

    @Override
    public Long getValue(MetricData m) {
        if (metricName != null && metricName.equals(m.getLongDesc()))
            return m.getId();
        else
            return null;
    }

    @Override
    public void setValue(MetricData m, Long value) {
    }

    @Override
    public String getPath() {
        return null;
    }
}

private class MetricValueProvider extends Object implements ValueProvider<MetricData, Double> {
    private String metricName;

    public MetricValueProvider(String metricName) {
        this.metricName = metricName;
    }

    @Override
    public Double getValue(MetricData m) {
        if (metricName != null && metricName.equals(m.getLongDesc()))
            return m.getMetricValue();
        else
            return null;
    }

    @Override
    public void setValue(MetricData m, Double value) {
    }

    @Override
    public String getPath() {
        return null;
    }
}

It seems like there is no recommended solution for this issue, at least not in the current release of 3.0. I've posted the same question on the Sencha Q&A forums but I haven't seen any other responses from a member of the community or the Sencha Development Team. While this probably isn't the most desirable way to go it is a viable solution so I'm marking it as the answer. Thanks for the response! — Bionic_Geek, May 30 '12 at 17:04

Using Sencha GXT 3, generate a line chart populated with a dynamic number of line series fields?

1 Answers1