Updating a chart with new data in App SDK 2.0

问题:

I am using a chart to visualize data in a TimeboxScopedApp, and I want to update the data when scope changes. The more brute-force approach of using remove() then redrawing the chart as described here leaves me with an overlaid "Loading..." mask, but otherwise works. The natural approach of using the Highchart native redraw() method would be my preference, only I don't know how to access the actual Highchart object and not the App SDK wrapper.

Here's the relevant part of the code:

var chart = Ext.getCmp('componentQualityChart');
if (chart) {
    var chartCfg = chart.getChartConfig();
    chartCfg.xAxis.categories = components;
    chart.setChartConfig(chartCfg);
    chart.setChartData(data);
    chart.redraw(); // this doesn't work with the wrapper object
} else { // draw chart for the first time

How do I go about redrawing the chart with the new data?

回答1:

Assuming chart (componentQualityChart) is an instance of Rally.ui.chart.Chart, you can access the HighCharts instance like this:

var highcharts = chart.down('highchart').chart;

// Now you have access to the normal highcharts interface, so
// you could change the xAxis
highcharts.xAxis[0].setCategories([...], true);

// Or you could change the series data
highcharts.series[0].data.push({ ... });  //Add a new data point

// Or pretty much anything else highcharts lets you do

回答2:

Using _unmask() removes the overlaid "Loading.." mask

if (this.down('#myChart')) {
    this.remove('myChart');
}
 this.add(
                    {
                        xtype: 'rallychart',
                        height: 400,
                        itemId: 'myChart',
                        chartConfig: {
                            //....
                        },            
                        chartData: {
                            categories: scheduleStateGroups, 
                            series: [ 
                                {   
                                    //...
                                }
                            ]
                        }
                    }
                );
        this.down('#myChart')._unmask();