2013-07-31 37 views
0

我正在開發一個自定義拉力賽應用程序。我正在使用lookback api提取數據並使用圖表進行繪製。在數據全部檢索之前繪製圖表。因此,我有一個命令按鈕,它將觸發圖表被重新加載或刷新或刪除並再次插入。使用拉力賽的圖表

但是我無法弄清楚如何重新加載/刷新按鈕。

我已經看過

  1. Refreshing a rallychart

  2. Updating a chart with new data in App SDK 2.0

但他們沒有我的情況下工作。

任何替代方法,以使其工作也是受歡迎的。

我附加了用於拉力賽應用程序sdk的app.js。 請幫忙!

var year = 2013; 
var month = "07"; 
var date = 10; 
var hh = "17"; 
var mm = "08"; 
var ss = "00"; 
var dates = []; 
var array1 = []; 
var arraySWQA = []; 

//var a3= [1, 2, 3]; 
//console.log(a3.length); 

var chartConfig; 

var date1 = year + "-" + month + "-" + date + "T" + hh + ":" + mm + ":" + ss + "Z"; 
console.log(date1); 

var date2 = year + "-" + month + "-" + (date + 10) + "T" + hh + ":" + mm + ":" + ss + "Z"; 
console.log(date2); 


date1 = "2013-06-10T15:48:58Z"; 



Ext.define('CustomApp', { 
    extend: 'Rally.app.App', 
    componentCls: 'app', 
    id: 'appid', 

    launch: function() { 


     //Write app code here 
     console.log('hello world'); 
     for (date = 10; date < 21;) { 
      date1 = year + "-" + month + "-" + date + "T" + hh + ":" + mm + ":" + ss + "Z"; 
      var dispdate = month + "-" + date; 
      dates.push(dispdate); 
      date = date + 1; 
      date2 = year + "-" + month + "-" + date + "T" + hh + ":" + mm + ":" + ss + "Z"; 

      console.log(date1); 

      //date1 = "2013-07-16T12:00:58Z"; 
      //date2 = "2013-07-17T12:00:58Z"; 
      //getting defect count from Parent project ie. all inclusive of SWQA for orbis 
      //------------------------------------------------------------------------------------------------- 

      //pasted in last one 
      var snapshotStore = Ext.create('Rally.data.lookback.SnapshotStore', { 
       context: { 
        workspace: '/workspace/3274954442' 
       }, 
       find: { 
        //_ProjectHierarchy: 12280411247, 
        //__At: "2013-07-22T17:10:00Z", 
        __ValidFrom: date1, 
        __ValidTo: date2, 
        //FormattedID : 'DE12612', 
        //__ValidFrom: {$lte: "current"}, 
        //__ValidTo:{$gt: "current"}, 
        //__At:date1, 
        __TypeHierarchy: 'Defect' 
       }, 
       listeners: { 
        load: function (store, data, success) { 
         //process data 
         var x = snapshotStore.getCount(); 
         console.log(x); 

         //setTimeout(_loadChart(), 3000) 
        } 
       }, 
       fetch: ['Name', 'State', 'FormattedID', 'OpenedDate'], 
       order: 'OpenedDate DESC', 
       hydrate: ['State', 'FormattedID'], 
       filters: [ 

       { 
        property: '_TypeHierarchy', 
        operator: '=', 
        value: 'Defect' 
       }, { 
        property: '_ProjectHierarchy', 
        operator: '=', 
        value: 10883100246 //orbis 12280416678 // regicam que  9114502819: regicam exdg 
       }, { 
        property: 'OpenedDate', 
        operator: '>', 
        value: date1 
       }, { 
        property: 'OpenedDate', 
        operator: '<=', 
        value: date2 
       } 
       ] 
      }); 



      snapshotStore.load({ 
       callback: function (records, operation) { 
        if (operation.wasSuccessful()) { 
         //process records 

         var listofdefects = []; 
         for (var i = 0; i < records.length; i++) { 
          //console.log(records[i].data.ObjectID); 
          var found = listofdefects.indexOf(records[i].data.ObjectID); 
          if (found == -1) { 
           listofdefects.push(records[i].data.ObjectID); 
          } 
         } 
         console.log("date = " + date1 + "original: " + records.length + " unique" + listofdefects.length); 
         array1.push(listofdefects.length); 
         console.log("list: " + listofdefects); 
         console.log("All Orbis:" + array1); 

        } 


       } 
      }); 

      //getting defect count from Parent project ie. SWQA only for orbis 
      var snapshotStoreSWQA = Ext.create('Rally.data.lookback.SnapshotStore', { 
       context: { 
        workspace: '/workspace/3274954442' 
       }, 
       find: { 
        //_ProjectHierarchy: 12280411247, 
        //__At: "2013-07-22T17:10:00Z", 
        __ValidFrom: date1, 
        __ValidTo: date2, 
        //FormattedID : 'DE12612', 
        //__ValidFrom: {$lte: "current"}, 
        //__ValidTo:{$gt: "current"}, 
        //__At:date1, 
        __TypeHierarchy: 'Defect' 
       }, 

       listeners: { 
        load: function (store, data, success) { 
         //process data 
         var x = snapshotStoreSWQA.getCount(); 
         console.log(x); 

         //setTimeout(_loadChart(), 3000) 
        } 
       }, 
       fetch: ['Name', 'State', 'FormattedID', 'OpenedDate'], 
       order: 'OpenedDate DESC', 
       hydrate: ['State', 'FormattedID'], 
       filters: [ 

       { 
        property: '_TypeHierarchy', 
        operator: '=', 
        value: 'Defect' 
       }, { 
        property: '_ProjectHierarchy', 
        operator: 'in', 
        value: [12226454553, 12829981291, 12226458054, 12280417123, 12226539592] // 10883100246 //orbis 12280416678 // regicam que  9114502819: regicam exdg 
       }, { 
        property: 'OpenedDate', 
        operator: '>', 
        value: date1 
       }, { 
        property: 'OpenedDate', 
        operator: '<=', 
        value: date2 
       } 

       ] 
      }); 



      snapshotStoreSWQA.load({ 
       callback: function (records, operation) { 
        if (operation.wasSuccessful()) { 
         //process records 

         var listofdefects = []; 
         for (var i = 0; i < records.length; i++) { 
          //console.log(records[i].data.ObjectID); 
          var found = listofdefects.indexOf(records[i].data.ObjectID); 
          if (found == -1) { 
           listofdefects.push(records[i].data.ObjectID); 
          } 
         } 
         console.log("date = " + date1 + "original: " + records.length + " unique" + listofdefects.length); 
         arraySWQA.push(listofdefects.length); 
         console.log("list: " + listofdefects); 
         console.log("SWQA:" + arraySWQA); 


        } 


       } 
      }); 
     } //endfor 


     this._loadChart(); 
     this.redrawChart(); 

    }, 
    redrawChart: function() { 
     this.remove('chart'); 
     console.log('redrawing'); 
     this.add(chart); 
    }, 
    _loadChart: function() { 
     chartConfig = { 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: 'Defect Kill Rate' 
      }, 
      subtitle: { 
       text: 'From Date1 to Date2' 
      }, 
      xAxis: { 
       categories: dates 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Defect count (no)' 
       } 
      }, 
      tooltip: { 
       headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
       pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
       footerFormat: '</table>', 
       shared: true, 
       useHTML: true 
      }, 
      plotOptions: { 
       column: { 
        pointPadding: 0.2, 
        borderWidth: 0 
       } 
      }, 
      series: [{ 
       name: 'SWQA defects', 
       data: arraySWQA 

      }, { 
       name: 'Orbis Defects', 
       data: array1 

      }] 
     }; 

     chart = { 
      xtype: 'rallychart', 
      height: 300, 
      width: 400, 
      id: 'chart1', 
      chartConfig: chartConfig 
     }; 

     button = { 
      xtype: 'rallybutton', 
      text: 'Click me', 
      handler: function() { 
       //Ext.Msg.alert('Button', 'You clicked me'); 
       console.clear(); 
       console.log("SWQA:" + arraySWQA); 
       console.log("ORBIS Rest:" + array1); 


       var a = Ext.getCmp('appid'); 
       //a.remove(chart); 
       //a.add(chart); 
       //a.redrawChart(); 
       console.log('callback'); 

       Ext.create('Rally.ui.chart.Chart', { 
       chartConfig: { 
        chart: { 
         zoomType: "xy" 
        }, 
        xAxis: { 
         title: { 
          text: "Date" 
         } 
        }, 
        yAxis: [ 
         { 
          title: { 
           text: "Points" 
          } 
         } 
        ], 
        plotOptions: { 
         line: { 
          color: "#000" 
         }, 
         column: { 
          stacking: null, 
          color: "#6AB17D", 
          lineColor: "#666666", 
          lineWidth: 1, 
          marker: { 
           lineWidth: 1, 
           lineColor: "#666666" 
          }, 
          shadow: false 
         } 
        }, 
        series: [{ 
          name: 'SWQA defects', 
          data: arraySWQA 

         }, { 
          name: 'Orbis Defects', 
          data: array1 

         }] 
       } 
       //remaining configuration omitted for brevity 
      }); 






      }, 
      callback: function(){ 

      } 
     }; 


     this.add(button); 
     this.add(chart); 



    } 
}); 

回答

2

,你可能會看到一個完整的代碼示例,其中一個圖表基於在發行下拉here選擇新的數據更新的應用程序。在該代碼中,我檢查圖表是否存在,並在重新創建之前刪除它:

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