title: Backbone : Trigger not working properly
body: <p><strong>First code and Trigger is work</strong></p>
  
  <pre><code> filterPanel.on("form:filter", function(data){
          var criterion = data
          filteredData.filter(criterion)
          data1 = filteredData.filter(criterion)
          if(data1.length === 0){
              $('.warn').finish().slideDown(80,function(){
                  setTimeout(function(){$('.warn').finish().slideUp(80)},3000)
              })
          } else {
              $('.statistic').fadeOut(100,function(){
                 chartPanel.trigger("chart:render") //This Works and call "chart:render"
                 $('.statistic').fadeIn(100) 
              })
          }
      })
  </code></pre>
  
  <p><strong>But when I call in</strong> </p>
  
  <pre><code>filterPanel.trigger("form:filter" ,firstFilter)
  </code></pre>
  
  <p>In the same page above the first code isn't working? I want call the "form:filter"</p>
  
  <p><strong>Here's my full code</strong></p>
  
  <pre><code>programming.module("Program.Chart",function(Chart, programming, Backbone, Marionette, $, _){
      Chart.Controller = {
          getData : function(){
  
              var data1 = programming.request("data:entities");
  
  
  
              if(data1 !== undefined){
                  var filteredData = programming.Program.FilteredCollection({
                      collection : data1,
                      filterFunction : function(criterion){
                          return function(data){
                              var dateModel = moment(data.get("tanggal"),'DD/MM/YYYY');
                              var startDate = moment(criterion.date1,'DD/MM/YYYY')
                              var endDate = moment(criterion.date2,'DD/MM/YYYY')
  
                              if(dateModel.isSameOrAfter(startDate)){
                                  if(dateModel.isSameOrBefore(endDate)){
                                      return data 
                                  }
                              }
                          }
                      }
                  })
  
                  filterPanel = new Chart.filterPanel()
                  chartLayout = new Chart.chartLayout()
                  emptyView = new Chart.emptyView();
  
                  var firstFilter = {
                      date1 : "10/08/2016",    
                      date2 : "10/08/2016"   
                  }
  
                  filterPanel.trigger("form:filter" ,firstFilter)
  
                  chartPanel = new Chart.chartPanel({
                      collection: filteredData
                  })
  
  
                  filterPanel.on("form:filter", function(data){
                      var criterion = data
                      filteredData.filter(criterion)
                      data1 = filteredData.filter(criterion)
                      if(data1.length === 0){
                          $('.warn').finish().slideDown(80,function(){
                              setTimeout(function(){$('.warn').finish().slideUp(80)},3000)
                          })
                      } else {
                          $('.statistic').fadeOut(100,function(){
                             chartPanel.trigger("chart:render")
                             $('.statistic').fadeIn(100) 
                          })
                      }
                  })
  
                  filterPanel.on("filter:render", function(){
                      //DatePicker
                      var format = "DD/MM/YYYY"
  
                      var date1 = new Pikaday({
                              field : $("#date1",this.el)[0],
                              format : format
                          })
                      $("#date1",this.el)[0].value = moment().add('days').format(format)
  
                      var date2 = new Pikaday({
                          field : $("#date2",this.el)[0],
                          format : format
                      })
                      $("#date2",this.el)[0].value = moment().add('days').format(format)
  
  
                      var selectdate = $('#publicdate',this.el)[0];
                      selectdate.addEventListener("change",function(){
                          var value = selectdate.value;
                          var date1 = $('#date1',this.el)[0];
                          var date2 = $('#date2',this.el)[0];
                          if(value==="today"){
                              date1.value = moment().add('days').format(format)
                              date2.value = moment().add('days').format(format)
                              $(date1).attr('disabled',true);
                              $(date2).attr('disabled',true);
                          } else if(value==="yesterday"){
                              date1.value = moment().add(-1,'days').format(format)
                              date2.value = moment().add(-1,'days').format(format)
                              $(date1).attr('disabled',true);
                              $(date2).attr('disabled',true);
                          } else if(value==="thismonth"){
                              date1.value = moment().add('month').startOf('month').format(format)
                              date2.value = moment().add('month').endOf('month').format(format)
  
                              $(date1).removeAttr('disabled',true);
                              $(date2).removeAttr('disabled',true);
                          } else if(value==="lastmonth"){
                              date1.value = moment().add(-1,'month').startOf('month').format('DD/MM/YYYY')
                              date2.value = moment().add(-1,'month').endOf('month').format('DD/MM/YYYY')
                              $(date1).attr('disabled',true);
                              $(date2).attr('disabled',true);
                          }
                      })
                  })
  
                  chartPanel.on("chart:render",function(){
                      //Chartist JS           
                      var tanggal = []
                      var label = data1.models.map(function(model,index){
                          return model.get("tanggal")
                      })
  
                      function unique(list) {
                          var result = [];
                          $.each(list, function(i, e) {
                              if ($.inArray(e, result) == -1) result.push(e);
                          });
                          return result;
                      }
  
                      var labels = unique(label)
  
                      var tshirtv = [];
                      var casev = [];  
                      var tanggal = [];
  
                      var series = data1.models.map(function(model,index){
                          tanggal[index] = model.get("tanggal");
  
                          if(tanggal[index - 1] === model.get("tanggal")){
                              if(model.get("produk")==="T-Shirt"){
                                  tshirtv[index - 1] = model.get("jumlah");
                              } else if(model.get("produk")==="Case"){
                                  casev[index - 1] = model.get("jumlah");
                              }
                          } else {
                              if(model.get("produk")==="T-Shirt"){
                                  tshirtv[index] = model.get("jumlah");
                                  casev[index] ="0";
                              } else if(model.get("produk")==="Case"){
                                  casev[index] = model.get("jumlah");
                                  tshirtv[index] ="0";
                              }
                          }
                      })
  
                      tshirtv = tshirtv.filter(()=&gt;true)
                      casev = casev.filter(()=&gt;true)
  
                      if((tshirtv.length !== 1) &amp;&amp; (casev.length !== 1))  {
                          var series = [
                              {
                                  name : "T-shirt",
                                  data : tshirtv
                              },
                              {
                                  name : "Case",
                                  data : casev
                              }
                          ]
                          //Line Chart
                          var data = {
                              labels : labels,
                              series : series
                          }
                          var option = {
                              showArea : true,
                              lineSmooth : false,
                              showPoint : true,
                              chartPadding : {
                                  bottom:60,
                                  top:60,
                              },
                              axisX : {
                                  showGrid:false,
                              },
                              axisY : {  
                                  onlyInteger : true,
                              },  
                              plugins : [
                                  Chartist.plugins.ctAxisTitle({
                                      axisX: {
                                         axisClass: 'ct-axis-title',
                                         offset: {
                                            x: 0,
                                            y: 50
                                         },
                                         textAnchor: 'middle'
                                      },
                                      axisY: {
                                         axisTitle: 'Jumlah Penjualan',
                                         axisClass: 'ct-axis-title',
                                         offset: {
                                            x: 0,
                                            y: 0
                                         },
                                         textAnchor: 'middle',
                                         flipTitle: false
                                       }
                                  }),
                                  Chartist.plugins.ctPointLabels({
                                      textAnchor : "middle"
                                  }),
                                  Chartist.plugins.legend()
                              ]
                          }
  
                          var responsiveOptions = [
                            [
                                'screen and (max-width: 640px)', {
                                  showLine: false,
                                  showPoint : true,
                                  axisX: {
                                    labelInterpolationFnc: function(value) {
                                      return value.substr(0,2);
                                    }
                                  }
                                }
                            ],
                            [
                                'screen and (max-width: 360px)', {
                                  showLine: false,
                                  showPoint : true,
                                  height:"100%",
                                  axisX: {
                                    labelInterpolationFnc: function(value) {
                                      return value.substr(0,2);
                                    }
                                  }
                                }
                            ]
                          ];
  
  
                          new Chartist.Line($('.statistic',this.el)[0],data,option,responsiveOptions)
                      } else {
                          //Donut Chart
                          var data2 = {
                              labels : ['T-Shirt', 'Case'],
                              series : [tshirtv[0], casev[0]]
                          }
                          var option2 = { 
                              chartPadding : {
                                  top : 0,  
                              },
                              labelInterpolationFnc : function(value,series){
                                  return value + ": " +data2.series[series].value
                              },
                              donut:true,
                              donutWidth : 60,
                              plugins : [
                                  Chartist.plugins.legend()
                              ]
                          }
                          new Chartist.Pie($('.statistic',this.el)[0],data2,option2)
                      }
  
                  })
  
                  chartLayout.on("show", function(){
                      chartLayout.filterRegion.show(filterPanel)
                      chartLayout.chartRegion.show(chartPanel)
                  })
  
                  programming.wrapper.show(chartLayout)
  
              } else {
                  chartPanel = new Chart.notfound()
  
                  programming.wrapper.show(chartPanel)
              }
  
  
          }
      }
  })
  </code></pre>