Questions : Creating charts with dynamic data & Stacked/Grouped column chart stack names

[novaxii]

Hello !

I'm very new to using HighCharts and the moxie wrapper. I have searched high and low here and on google for answers but could not find much. So here goes : I have two questions as of now :

1. Creating a chart using dynamic data

Using RPC calls to retrieve data from a database, I need to create chart structures based on this data. For example, I can retrieve from the database a list of cities, and these cities will be the XAxis categories.

What I was trying to do was create a Basic Column Chart and I would need to set the categories dynamically according to the result I get. If I receive a List<string> categories, I managed to convert it into a String[] that I then pass into </string>

    List<String> cities = new ArrayList<String>();
    cities.add("Paris");
    cities.add("Berlin");
    cities.add("London");
    cities.add("Tokyo");

    String[] categories = null;
    categories = cities.toArray(new String[0]);

    chart.getXAxis()  
        .setCategories(
            categories
            );

If I have a button to change the list of cities, must I recreate a chart in order to have it update with the new List ? Is this the only way to add categories obtained from a List<> ?

1. Stack names displayed on a Stacked and Grouped column chart

Second question is, I have created a GSC chart to list seller proficiency on different aspects : XAxis categories are the sellers, and each has 2 stacks.

Looking around in the docs and in js source codes, I understand I need to change the YAxis options :

    chart.getYAxis()  
        .setAllowDecimals(false)  
        .setMin(0)  
        .setAxisTitleText("Quantité")
        .setStackLabels(new StackLabels()
            .setEnabled(true)
            .setFormatter(new StackLabelsFormatter() {

            @Override
            public String format(StackLabelsData stackLabelsData) {
                return stackLabelsData.getTotalAsLong();
            }
        }))

stackLabelsData can only provide me with Totals, but not the stack name... which is what I would need because knowing what the stack corresponds to rather than having the number 11 on top of it is more interesting for our needs.

What I found out in pure js is people returning the stack itself to obtain the stack name :

    yAxis: {
        stackLabels: {
            enabled: true,
            formatter: function() { return this.stack; }
        }
    },

Am I looking in the wrong place for this information or is there another way ? Other than putting the stack name in the Legend.

Thanks in advance to anyone who can help me :)

[Shawn Quinn]

Regarding your first question, you can simple call "setCategories" on the axis instance, and GWT Highcharts will dynamically change the categories for you - even after the chart has been rendered. Here's a functional example that will change the category names when the chart is clicked on:

    final Chart chart = new Chart()
        .setType(Series.Type.BAR)
        .setBarPlotOptions(new BarPlotOptions()
            .setStacking(PlotOptions.Stacking.NORMAL)
            .setDataLabels(new DataLabels()
                .setEnabled(true)
                .setY(-16)
            )
        );

    final XAxis xAxis = chart.getXAxis()
        .setCategories("Apples", "Oranges", "Pears", "Grapes", "Bananas");

    chart.addSeries(chart.createSeries()
        .setName("John")
        .setPoints(new Number[]{5, 3, 4, 7, 2})
    );
    chart.addSeries(chart.createSeries()
        .setName("Jane")
        .setPoints(new Number[]{2, 2, 3, 2, 1})
    );
    chart.addSeries(chart.createSeries()
        .setName("Joe")
        .setPoints(new Number[]{3, 4, 4, 2, 5})
    );

    chart.setClickEventHandler(new ChartClickEventHandler() {
        public boolean onClick(ChartClickEvent chartClickEvent) {
            xAxis.setCategories("Beans", "Pumpkins", "Corn", "Peas", "Squash");
            return true;
        }
    });

[Shawn Quinn]

Regarding your second question: I don't see a documented way that Highcharts supports retrieving the category name associated with the stack in the formatter (at least I'm assuming that's what you're looking for.) I tried referencing the "this.stack" property that you mentioned in a native formatter, but I just got null back. If you can point out a jsFiddle or somewhere else that points to how you'd do this natively in Highcharts, we may be able to better point you in the right direction for how you could do something similar in GWT.

[novaxii]

Hello Shawn,

Thank you for your very quick response !
I will look into your solution for the first question once I start working with retrieved data rather than fake data.

For the second, I got the code from here : http://jsfiddle.net/6tc6T/1/

It allows the stack name to be shown above the stack.

Thanks again, and great work !

[Shawn Quinn]

Ah, I see. That's an advanced use case GWT Highcharts doesn't currently support, so we'll be rectifying in that the next release by adding the following method to the StackLabelsData class so that you can access native properties that were available to the formatter via JSNI:

~~~~~
/*
* Returns a pointer to the native Highchart's instance data object that this GWT
* instance is wrapping. For advanced JSNI use-cases only.
*
* @return The native Highcharts object instance that this GWT instance is associated with.
* @since 1.4.1
/
public JavaScriptObject getNativeData() {
return this.data;
}
~~~~~~