Highstock Charts - Knopf für Datumsbereich

Question

In meiner Anwendung verwende ich eckigen Highstock für Diagramme. Ich habe viele Daten (viele Millionen), und jetzt möchte ich die vorhandenen Schaltflächen für den festgelegten Datumsbereich (1 Woche, 1 Monat, 3 Monate, 1 Jahr, alle) setzen, aber auch auf eine beliebige Schaltfläche klicken, um eine neue Anfrage zu senden an den Server, um keine Daten zu sammeln. Beispiel, wenn Taste "eine Woche" gedrückt wird, dass nur der Server die Daten für eine Woche abruft, wenn Sie auf eine Schaltfläche auf einen Monat klicken, um Daten für einen einzelnen Monat zu erfassen. Ich möchte keine unnötigen Daten aufrufen, und dass der Server langsamer wird, wenn ich nach Daten für einen Monat suche, und der Server mir alle Daten zurückbringt. Hier ist der Code. Vielen Dank im Voraus

> https://jsfiddle.net/tf7pr1ft/ 

Answer 1

Thnx zu @Grzegorz Blachliński ich dieses Problem beheben. hier ist der Code

$scope.chartConfig1 = { 


      xAxis: { 
       ordinal: false, 
       //za dodat date range postavit events i range selectors 
       events : { 
       afterSetExtremes: getDateRange //here i add my custom function 
      } 

      }, 
      yAxis: { 
       plotLines: [{ 
         color: '#FF0000', 
         width: 1, 
         value: 11.50, 
         label: {text: '11.50'} 
        }] 

      }, 
      options: { 
       chart: { 
        zoomType: 'x', 
        backgroundColor: 'rgba(255, 255, 255, 1)', 
        polar: true, 
        type: 'line', 
        borderRadius: 5 

       }, 
       legend: { 
        enabled: true 
       }, 
       rangeSelector: { 
      selected : 0, //here i defined default range 
      enabled: true, 
        inputStyle: { 
      color: 'black' 
     } 
       }, 
       navigator: { 
        enabled: true 
       } 
      }, 
      series: [], 
      title: { 
       text: 'Solar and Battery voltage average' 
      }, 
      useHighStocks: true 
     }, 
     $scope.chartConfig1.series.push({ 
      id: 1, 
      name: "Solar voltage average", 
      data: $scope.data[0], 
      tooltip: { 
       valueDecimals: 2 
      } 
     },   { 
      id: 2, 
      name: "Battery voltage average", 
      data: $scope.data[1], 
      tooltip: { 
       valueDecimals: 2 
      } 
     } 
     ); 

und hier ist meine eigene Funktion

getDateRange = function (e) { 
         var date1 = new Date(e.min); 
         var date2 = new Date(e.max); 
         var timeDiff = Math.abs(date2.getTime() - date1.getTime()); 
         var diffDays = Math.ceil(timeDiff/(1000 * 3600 * 24)); 

         $http.get(serviceBase + 'aaaaa/aaaaaa/' + $stateParams.klupaID + '/aaaaaaa?days=' + diffDays, function(data){ 
        //ukoliko buden dodavat još koji config obavezno dodat broj koliko ih ima na i<=8 
        for (i=1; i<=8; i++){ 
         $scope.chartConfigString = 'chartConfig' + i; 
        $scope.chartConfigString.series[0].setData(data); 
        $scope.chartConfigString.hideLoading(); 

        } 
       }); 
      }; 

Jetzt habe ich eine andere Probleme, ich möchte vier Selektoren haben (Tasten), 1 Monat, 3 Monate, 1 Jahr und ALL. Ich setze Standardbereich, wenn App geöffnet, auf 1 Monat, und hier ist ein Problem. Schaltflächen für einen anderen Bereich sind deaktiviert, da ich Daten nur für einen Monat von der URL abrufe. Ich möchte alle Tasten aktiviert haben, um einen beliebigen Bereich auszuwählen. Thnx