Add markings on the border of each year

analyser.js

@@ -197,31 +197,45 @@ $(function() {
   catData.push(series);
  });
 
+ var markings = [];
+
+ var year = new Date(new Date(max).getFullYear(), 0);
+ while (year.getTime() > min) {
+  markings.push({ color: '#000', lineWidth: 1, xaxis: { from: year.getTime(), to: year.getTime() } });
+  year.setFullYear(year.getFullYear() - 1);
+ }
+
  catData.sort(function(a, b) { return a.total - b.total; });
 
+ plots.cathistory = $.plot($('#cathistory'), catData, {
+   xaxis: { mode: 'time', timeformat: '%y/%m' },
+   legend: { noColumns: 2 },
+   series: {
+     stack: true,
+     lines: { show: true, fill: true }
+   },
+   grid: {
+    markings: markings
+   }
+ });
+
+ markings.push({ color: '#000', lineWidth: 1, yaxis: { from: 0, to: 0 } });
+
  plots.history = $.plot($('#history'), transData, {
    xaxis: { mode: 'time', timeformat: '%y/%m' },
    series: {
      lines: { show: true, fill: true },
      points: { show: true }
    },
+   legend: { noColumns: 3, position: 'nw' },
    grid: {
      hoverable: true,
      clickable: true,
-     markings: [{ color: '#000', lineWidth: 1, xaxis: { from: min, to: max }, yaxis: { from: 0, to: 0 } }]
+     markings: markings 
    },
    selection: { mode : "x" }
  });
 
- plots.cathistory = $.plot($('#cathistory'), catData, {
-   xaxis: { mode: 'time', timeformat: '%y/%m' },
-   legend: { noColumns: 2 },
-   series: {
-     stack: true,
-     lines: { show: true, fill: true }
-   },
- });
-
  $("#history").bind("plothover", function (event, pos, item) {
   if (item) {
    var id = {dataIndex: item.dataIndex, seriesIndex: item.seriesIndex};