Updating Chart with New Data in App SDK 2.0

Question

I am using a chart to visualize data in TimeboxScopedApp , and I want to update the data when the area changes. A rougher approach to using remove() , and then redrawing the diagram as described here , leaves me with the "Loading ..." mask attached, but it works otherwise. A natural approach to using the highchart native redraw() method would be my preference, but I don’t know how to access the real Highchart object, and not the App SDK shell.

Here's the relevant piece of 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 redraw a chart with new data?

Answer 1

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

 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 

Answer 2

Using _unmask () removes the "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();