hledger/hledger-web/templates/chart.hamlet

<label #register-chart-label style=""><br>
<div #register-chart style="height:150px; margin-bottom:1em; display:block;">
<script type=text/javascript>
 \$(document).ready(function() {
   var $chartdiv = $('#register-chart');
   if ($chartdiv.is(':visible')) {
     \$('#register-chart-label').text('#{charttitle}');
     var seriesData = [
      $forall (c,items) <- percommoditytxnreports
       /* we render each commodity using two series:
        * one with extra data points added to show a stepped balance line */
       {
        data: [
          $forall i <- reverse items
           [
            #{dayToJsTimestamp $ triDate i},
            #{simpleMixedAmountQuantity $ triCommodityBalance c i}
           ],
        ],
        label: '#{shownull $ T.unpack c}',
        color: #{colorForCommodity c},
        lines: {
          show: true,
          steps: true,
        },
        points: {
          show: false,
        },
        clickable: false,
        hoverable: false,
       },
       /* and one with the original data, showing one clickable, hoverable point per transaction */
       {
        data: [
          $forall i <- reverse items
           [
            #{dayToJsTimestamp $ triDate i},
            #{simpleMixedAmountQuantity $ triCommodityBalance c i},
            '#{showZeroCommodity $ triCommodityAmount c i}',
            '#{showZeroCommodity $ triCommodityBalance c i}',
            '#{concat $ intersperse "\\n" $ lines $ T.unpack $ showTransaction $ triOrigTransaction i}',
            #{tindex $ triOrigTransaction i}
           ],
          /* [] */
        ],
        label: '',
        color: #{colorForCommodity c},
        lines: {
          show: false,
        },
        points: {
          show: true,
        },
       },
     ]
     var plot = registerChart($chartdiv, seriesData);
     \$chartdiv.bind("plotclick", registerChartClick);
     plot.setSelection({ xaxis: { from: 500, to: 700 } });
     \$chartdiv.bind("plotselected", function(event, ranges) {
       console.log("selected", ranges.xaxis.from, ranges.xaxis.to);
       /* Round down for the 'from' day: */
       var from = new Date(ranges.xaxis.from);
       /* Round up for the 'to' day: */
       var to = new Date(ranges.xaxis.to + (24 * 60 * 60 * 1000) - 1);
       var range =
         from.getFullYear() + "/" + (from.getMonth() + 1) + "/" + from.getDate() + "-" +
         to.getFullYear() + "/" + (to.getMonth() + 1) + "/" + to.getDate();
       var baselink = "@?{nodatelink}";
       if (baselink.endsWith("?q")) {
         document.location = baselink + "=date:" + range;
       } else {
         document.location = baselink + "%20date:" + range;
       }
     });
   };
 });