Wie flot.js Graph zeigen Graph für aktuellen Monat und archivieren die andere

Question

Script zu bekommen Daten über Ajax aus der Datenbank und die Anzeige in Graph

<script language="javascript" type="text/javascript" src="jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> 
    <script language="javascript" type="text/javascript" src="jquery.flot.time.js"></script> 
    <script type="text/javascript"> 
    var d; 
var arr = []; 

//var d = [[946699200000, 315.71], [949377600000, 317.45], [951969600000, 317.50], [957240000000, 315.86], [952056000000, 314.93], [983592000000, 313.19], [1033617600000, 313.34]]; 

$(function() { 
    var data; 
    $.ajax({ 
     dataType: "json", 
     url: 'query_sales.php', 
     success: function(data){ 
      //alert(data); 
      $.each(data, function(i, item) { 
       arr.push([item.datey, +item.bv]); 
      }); 
      d = arr; //JSON.stringify(arr); 
      console.log(d); // use console.log to debug 

      $.plot("#placeholder", [d], { 
       xaxis: { 
       mode: "time", 
       //timeformat: "%I:%M %p", 
       tickSize: [1, "day"] 
       ///twelveHourClock: true, 
       /*min: 1390780800000, 
       max: 1390863600000*/ 
       }, series: { 
        lines: { show: true }, 
        points: { show: true } 
       }, 
       grid: { 
        hoverable: true, 
        clickable: true 
       }, 
       yaxis:{ 
       min: 0.01, 
       max: 1.12 
       } 
      }); 

     } 
    }); 
    $(document).ready(function() { 
     $("#footer").prepend("Flot " + $.plot.version + " &ndash; ", d); 
    }); 
}); 
    </script> 

HTML

<div id="content"> 

     <div class="demo-container"> 
      <div id="placeholder" class="demo-placeholder"></div> 
     </div> 

    </div> 

Und die Grafik zeigt machen Daten vom 1. Dez. 2015 bis jetzt so: Natürlich gibt es keine Umsatzsteigerung und deshalb ist es flach, aber die Zahlen sind irgendwie chaotisch. Um dies zu vermeiden und ein sauberes Diagramm zu zeigen, möchte ich die Daten des aktuellen Monats im Diagramm und die anderen Monate im Archiv anzeigen können. Wenn sie also einen bestimmten Monat wählen, erscheint das Diagramm für diesen Monat.

Answer 1

Script

<script language="javascript" type="text/javascript" src="jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> 
    <script language="javascript" type="text/javascript" src="jquery.flot.time.js"></script> 
    <script type="text/javascript"> 
    var d; 
var arr = []; 

//var d = [[946699200000, 315.71], [949377600000, 317.45], [951969600000, 317.50], [957240000000, 315.86], [952056000000, 314.93], [983592000000, 313.19], [1033617600000, 313.34]]; 

$(function() { 
var data; 
var date = new Date(); 
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1); 
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0); 

var firstDayWithSlashes = (firstDay.getFullYear()) + '/' + (firstDay.getMonth() + 1) + '/' + firstDay.getDate(); 
var lastDayWithSlashes = (lastDay.getFullYear()) + '/' + (lastDay.getMonth() + 1) + '/' + lastDay.getDate(); 

//prev months 
function monthDiff(d1, d2) { 
    var months; 
    months = (d2.getFullYear() - d1.getFullYear()) * 12; 
    months -= d1.getMonth() + 1; 
    months += d2.getMonth(); 
    return months <= 0 ? 0 : months; 
} 

    d1 = new Date('2015/12/01'); 
    d2 = new Date(firstDayWithSlashes); 
    //alert(monthDiff(d1, d2));//number of months elapsed until current month 


    var data; 
    $.ajax({ 
     dataType: "json", 
     url: 'query_sales.php', 
     success: function(data){ 
      //alert(data); 
      $.each(data, function(i, item) { 
       arr.push([item.datey, +item.bv]); 
      }); 
      d = arr; //JSON.stringify(arr); 
      console.log(d); // use console.log to debug 

      $.plot("#placeholder", [d], { 
       xaxis: { 
       mode: "time", 
       //timeformat: "%I:%M %p", 
       //tickSize: [1, "day"] 
       ///twelveHourClock: true, 
       /*min: 1390780800000, 
       max: 1390863600000*/ 

       min: (new Date(firstDayWithSlashes)).getTime(), 
       max: (new Date(lastDayWithSlashes)).getTime() 
       }, series: { 
        lines: { show: true }, 
        points: { show: true } 
       }, 
       grid: { 
        hoverable: true, 
        clickable: true 
       }, 
       yaxis:{ 
       min: 0.01, 
       max: 1.12 
       } 
      }); 

     } 
    }); 
    $("#firstRec").click(function() { 
      $.plot("#placeholder", [d], { 
       xaxis: { 
        mode: "time", 
        min: (new Date('2015/12/01')).getTime(), 
        max: (new Date('2015/12/31')).getTime() 
       } 
      }); 
     }); 
    $count = 0; 
$("#prevRec").click(function() { 
     $count++; 
     var month = date.getMonth()-$count; 
     var firstDay = new Date(date.getFullYear(), month, 1); 
     var lastDay = new Date(date.getFullYear(), month + 1, 0); 

     var firstDayWithSlashes2 = (firstDay.getFullYear()) + '/' + (firstDay.getMonth() + 1) + '/' + firstDay.getDate(); 
     var lastDayWithSlashes2 = (lastDay.getFullYear()) + '/' + (lastDay.getMonth() + 1) + '/' + lastDay.getDate(); 

     $.plot("#placeholder", [d], { 
       xaxis: { 
        mode: "time", 
        min: (new Date(firstDayWithSlashes2)).getTime(), 
        max: (new Date(lastDayWithSlashes2)).getTime() 
       } 
      }); 
});  
    $("#currentRec").click(function() { 
      $.plot("#placeholder", [d], { 
       xaxis: { 
        mode: "time", 
        min: (new Date(firstDayWithSlashes)).getTime(), 
        max: (new Date(lastDayWithSlashes)).getTime() 
       } 
      }); 
     }); 
    $(document).ready(function() { 
     $("#footer").prepend("Flot " + $.plot.version + " &ndash; ", d); 
    }); 
}); 
    </script> 

HTML

<div id="content"> 

     <div class="demo-container"> 
      <div id="placeholder" class="demo-placeholder"></div> 
     </div> 
     <button id="firstRec">Fist Record</button> 
     <button id="prevRec">Prev Month</button> 
     <button id="currentRec">Current Month</button> 
    </div> 

Und jetzt sieht es aus wie unten mit Navigationstasten: