Refreshing a rallychart

Question

I have a Rally SDK 2.0p5 app that displays a chart. When the user selects an option, the data will be updated and I would like to refresh the chart. But instead of redrawing, it will place a new chart beneath. What is the proper syntax?

                // Configure and Add the chart
                this.add(
                    {
                        xtype: 'rallychart',
                        height: 400,
                        id: 'chart',
                        chartConfig: {
                            chart: {
                            },
                            title: {
                                text: 'My Chart',
                                align: 'center'
                            },
                            xAxis: [
                                {
                                    categories: ['M0','M1','M2','M3','M4','M5'],
                                    title: {
                                        text: 'Interval'
                                    }
                                }
                            ],
                            yAxis: {
                                title: {
                                    text: yText
                                }
                            },
                            series: [ { type: 'column',
                                        name: yText,
                                        data: mCount } ],
                            plotOptions : {
                                column: {
                                    color: '#F00'
                                },
                                series : {
                                    animation : {
                                        duration : 2000,
                                        easing : 'swing'
                                    }
                                }
                            }
                        }
                    }
                );

Answer 1

You need to remove the 1st chart before adding the new one.

redrawChart: function() {
    this.remove('#chart');
    this.add({...});
}

Answer 2

It's often better to just update the chart in place. HighCharts is the charting library that's included in the App SDK. HighCharts will even animate your changes. Cool!!! Look here for the list of methods that operate on charts. You can add series, change data, change axis limits, control the zoom, etc.