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
+         $forall (comm,(_,items)) <- percommoditytxnreports
-               {
+          {
-                label: '#{comm}',
+           data: [
-                color: #{colorForCommodity comm},
+             $forall i <- reverse items
-                data: [
+              [#{dayToJsTimestamp $ triDate i}, #{triSimpleBalance i}],
-                 $forall i <- reverse items
+             /* [] */
-                  [#{dayToJsTimestamp $ triDate i}, #{triSimpleBalance i}],
+           ],
-                 [] ],
+           label: '#{comm}',
-               },
+           color: #{colorForCommodity comm},
-             ],
+          },
-             {
+       ]
-              series: {
+     );
-               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
 
@@ -92,7 +155,7 @@ function addformAddPosting() {
   //   //$(this).find(".typeahead").typeahead();
   //   console.log('DOMNodeInserted');
   //  // infinite loop
-	// 	console.log($(this).find('.typeahead'));
+  //  console.log($(this).find('.typeahead'));
   //   //enableTypeahead($(this).find('.typeahead'), accountsSuggester);
   // });
   // setTimeout(function (){
@@ -209,14 +272,14 @@ function sidebarToggle() {
 // MISC
 
 function enableTypeahead($el, suggester) {
-	return $el.typeahead(
+  return $el.typeahead(
-		{
+    {
-			highlight: true
+      highlight: true
-		},
+    },
-		{
+    {
-			source: suggester.ttAdapter()
+      source: suggester.ttAdapter()
-		}
+    }
-	);
+  );
 }
 
 /*