web: show points and zero/today lines on chart

hledger-web/Handler/RegisterR.hs

@@ -105,55 +105,26 @@ registerChartHtml percommoditytxnreports =
 <div#register-chart style="width:85%; height:150px; margin-bottom:1em; display:block;">
 <script type=text/javascript>
  \$(document).ready(function() {
-   /* render chart with flot, if visible */
    var chartdiv = $('#register-chart');
    if (chartdiv.is(':visible')) {
      \$('#register-chart-label').text('#{charttitle}');
-     /* https://github.com/flot/flot/blob/master/API.md */
+     registerChart(
-     \$.plot(chartdiv,
+       chartdiv,
        [
          $forall (comm,(_,items)) <- percommoditytxnreports
           {
-                label: '#{comm}',
-                color: #{colorForCommodity comm},
            data: [
              $forall i <- reverse items
               [#{dayToJsTimestamp $ triDate i}, #{triSimpleBalance i}],
-                 [] ],
+             /* [] */
-               },
            ],
-             {
+           label: '#{comm}',
-              series: {
+           color: #{colorForCommodity comm},
-               points: { 
-                show: false,
           },
-               lines: {
+       ]
-                show: true,
-                steps: true,
-               },
-               bars: {
-                show: false,
-                barWidth: 10,
-               },
-              },
-              yaxis: {
-               /* mode: "time", */
-               /* timeformat: "%y/%m/%d", */
-               /* ticks: 6, */
-              },
-              xaxis: {
-               mode: "time",
-               timeformat: "%Y/%m/%d"
-               /* ticks: 6, */
-              },
-             }
      );
-   }
+   };
  });
-               //clickable: true,
-               //hoverable: true,
-               //minTickSize: 3,
-  //var plot = $("#placeholder").plot(data, options).data("plot");
 |]
  where
    charttitle = case maybe "" (fst.snd) $ headMay percommoditytxnreports

hledger-web/static/hledger.js

@@ -28,6 +28,69 @@ $(document).ready(function() {
 
 });
 
+//----------------------------------------------------------------------
+// REGISTER CHART
+
+function registerChart($container, series) {
+	// https://github.com/flot/flot/blob/master/API.md
+	return $container.plot(
+    series,
+    { /* general chart options */
+      series: {
+        points: { 
+          show: true,
+        },
+        lines: {
+          show: true,
+          steps: true,
+        },
+        bars: {
+          // show: true,
+          // barWidth: 1000 * 60 * 60, // ms
+        },
+      },
+      yaxis: {
+        /* mode: "time", */
+        /* timeformat: "%y/%m/%d", */
+        /* ticks: 6, */
+      },
+      xaxis: {
+        mode: "time",
+        timeformat: "%Y/%m/%d"
+        /* ticks: 6, */
+      },
+      grid: {
+        // clickable: true,
+        // hoverable: true,
+        // autoHighlight: true,
+        markings:
+         function (axes) {
+          // console.log(axes);
+          // var markings = [];
+          // for (var x = Math.floor(axes.xaxis.min); x < axes.xaxis.max; x += 2)
+          //   markings.push({ xaxis: { from: x, to: x + 1 } });
+          // midx = Math.floor(axes.xaxis.min + (axes.xaxis.max - axes.xaxis.min) / 2);
+					var now = Date.now();
+          var markings = [
+            {
+              xaxis: { from: now, to: now }, 
+							color: '#888',
+							lineWidth:1
+            },
+            {
+              yaxis: { from: 0, to: 0 },
+							color: '#bb0000',
+							lineWidth:1
+            },
+          ];
+          // console.log(markings);
+          return markings;
+        }
+      },
+    }
+  ).data("plot");
+}
+
 //----------------------------------------------------------------------
 // ADD FORM