title: displaying highchart in button click
body: <p>i have a problem regarding this highcharts. I am using Laravel as my framework. My problem is this: I have a button that has an on click event to get my data and plot it in highcharts. Now my first problem is this: When i click the button, the chart will appear and my data won't show, when i press the button again, then my data shows. Precisely my problem is this: I need to double click the button to show my data from highcharts and whenever i will hit it in three clicks, then my data in highchart will duplicate.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;button class="btn btn-danger form-control" onclick="aw();"&gt;&lt;i class="fa fa-bar-chart" &gt;&lt;/i&gt; View&lt;/button&gt;
  </code></pre>
  
  <p>Javascript code:</p>
  
  <pre><code>function aw(){
  
       strat = $('#reservationtime').data('daterangepicker').startDate.format('YYYY-MM-DD');
       dend  = $('#reservationtime').data('daterangepicker').endDate.format('YYYY-MM-DD');
       sec = $('#repsec').val();
  
       diff(strat,dend);    
  }
  
  function diff(from, to) {
  
      var datFrom = new Date(from);
      var datTo = new Date(to);
      var fromYear =  datFrom.getFullYear();
      var toYear =  datTo.getFullYear();
      var diffYear = (12 * (toYear - fromYear)) + datTo.getMonth();
  
      for (var i = datFrom.getMonth(); i &lt;= diffYear; i++) {
          arr.push(monthNames[i%12] + " " + Math.floor(fromYear+(i/12)));
          $.ajax({         
          url: "{{ url('user/get-report') }}/" +sec+"/"+strat+"/"+dend+"/"+monthNames[i%12]+"/"+Math.floor(fromYear+(i/12)),        
          type: "GET",
          dataType: "JSON",        
          success: function(data) { 
  
              if (data[0]['data'].length&gt;0){
                for(i=0; i&lt;data[0]['data'].length; i++){   
                  datas.push(data[0]['data'][0].count);
                }
              }
              else{
                datas.push(0);
              }
  
              if (data[1]['data2'].length&gt;0){
                for(i=0; i&lt;data[1]['data2'].length; i++){   
                  datas2.push(data[1]['data2'][0].count);
                }
              }
              else{
                datas2.push(0);
              }
  
              if (data[2]['data3'].length&gt;0){
                for(i=0; i&lt;data[2]['data3'].length; i++){   
                  datas3.push(data[2]['data3'][0].count);
                }
              }
              else{
                datas3.push(0);
              }
          }   
        });
      }  
  
      Highcharts.chart('container', {
          chart: {
              type: 'column'
          },
          title: {
              text: 'Monthly Attendance Report'
          },
          subtitle: {
              text: ''
          },
          xAxis: {
              categories:arr,
              crosshair: true
          },
          yAxis: {
              min: 0,
              title: {
                  text: 'No of students'
              }
          },
          tooltip: {
              headerFormat: '&lt;span style="font-size:10px"&gt;{point.key}&lt;/span&gt;&lt;table&gt;',
              pointFormat: '&lt;tr&gt;&lt;td style="color:{series.color};padding:0"&gt;{series.name}: &lt;/td&gt;' +
                  '&lt;td style="padding:0"&gt;&lt;b&gt;{point.y} student(s)&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;',
              footerFormat: '&lt;/table&gt;',
              shared: true,
              useHTML: true
          },
          plotOptions: {
              column: {
                  pointPadding: 0.2,
                  borderWidth: 0
              }
          },
          series: [{
              name: 'Present',
              data:datas
  
              }
              , {
                  name: 'Absent',
                  data: datas2
  
              }, {
                  name: 'Late',
                  data: datas3
              }
          ]
      });    
  
      $('#report').show();
  }
  </code></pre>