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

Answer 1

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;
    }
}