Wicket: ShieldUI Chart disappear on update

Question

I'm currently having an issue with the Wicket/ShieldUI combo with regards to Charting.

On page initialization, charts are displayed fine (i.e. the first time they are rendered). These charts are being rendered as part of a ListView.

I need to be able to update the data in these charts and redraw. I have approached this in two ways so far with no success to my problem.

The problem is that when the/a chart is rerendered via an Ajax call it disappears, effectively not being processed by what voodoo occurs via the Shield UI js when the page loads.

In my app charts are defined by a config. These configs are the driver for the list view. The configs contain a reference to the data collection and the charts, when created utilize this.

A simple code example of what's created in my onInitialize is below.

final WebMarkupContainer visualizationContainer = new WebMarkupContainer(WICKET_ID_VIZ_CONTAINER);
chartConfigListView = new ListView<ChartConfig>(WICKET_ID_CHART_CONTAINER_LIST_VIEW, chartConfigList) {
    @Override
    protected void populateItem(ListItem<ChartConfig> item)
    {
        final ChartPanel chartPanel = new ChartPanel(WICKET_ID_CHART_THE_CHART, config);
        chartPanel.setOutputMarkupId(true);
        item.addOrReplace(chartPanel);
    }
};
visualizationContainer.add(chartConfigListView);

ChartPanel's internals (onInitialize) instantiate a new ShieldUI chart and add it to the ChartPanel component (ChartPanel extends Panel).

So, the first time the ListView populates and creates the charts, everything is fine. Any subsequent time the ListView populates and new chart instances are created with an updated dataset, the Charts disappear, leaving the html elements rendered as completely empty divs.

Does anyone have any idea how I can save my charts from being oblivionated?

Answer 1

While I have not managed to make this work with the ListView approach (as I'm a bit lazy), I have found the solution.

Upon an Ajax request coming in, one can call:

wicketChart.reInitialize(ajaxRequestTarget); 

and the chart will redraw with the data it now contains.

The reInitialize method is part of the WidgetComponentBase class, so I expect that this may be a solution to be used for other Wicket components.