openproject/app/views/rb_burndown_charts/_burndown.html.erb

<%= stylesheet_link_tag 'jqplot.css', :plugin => 'redmine_backlogs' %>

<%= javascript_include_tag 'lib/jquery-1.5.1.min.js',
                           :plugin => 'redmine_backlogs' %>
<!--[if IE]><%= javascript_include_tag 'lib/jquery.flot/excanvas.js',
                                       :plugin => 'redmine_backlogs' %>
<![endif]-->

<%= javascript_include_tag 'lib/jquery.cookies.2.2.0.min.js',
                           'lib/jquery.flot/jquery.flot.js',
                           :plugin => 'redmine_backlogs' %>

<script type="text/javascript" language="javascript">
  jQuery(function ($) {
    var Burndown = {
      datasets: { <%= dataseries(burndown).join(', ') %> },
      previousPoint: null,

      setDatasetColor: function () {
        var i = 0;

        $.each(Burndown.datasets, function (key, val) {
          val.color = i;
          val.points = {show: true, radius: 2};
          val.lines = {show: true};
          ++i;
        });
      },

      plotAccordingToChoices: function () {
        var data = [];

        $('.burndown_control').find("input:checked").each(function () {
          var key = $(this).attr('value');

          if (key && Burndown.datasets[key]) {
            data.push(Burndown.datasets[key]);
          }
        });

        if (data.length === 0) { //in order to render an empty graph if no data is selected
          data.push({data : []});
        }

        Burndown.plot(data);
      },

      plot: function (data) {
        if (data.length > 0) {
          $.plot($(".burndown_chart"), data, {
            yaxis: { min: 0,
              ticks: [ <%= yaxis_labels(burndown) %> ] },
            xaxis: {
              ticks: [<%= xaxis_labels(burndown) %>],
              tickDecimals: 0,
              max: <%= burndown.days.length + 1 %>,
              min: 1
            },
            grid: { hoverable: true, clickable: true }
          });
        }
      },

      showTooltip: function(x, y, contents) {
         $('<div id="tooltip">' + contents + '</div>').css( {
             position: 'absolute',
             display: 'none',
             top: y + 5,
             left: x + 5,
             border: '1px solid #fdd',
             padding: '2px',
             'background-color': '#fee',
             opacity: 0.80
         }).appendTo("body").css('z-index', 2000).fadeIn(200);
      },


      showTooltipOnHover: function (event, pos, item) {

        if (item) {
          if (Burndown.previousPoint != item.dataIndex) {
            Burndown.previousPoint = item.dataIndex;

            $("#tooltip").remove();
            var x = item.datapoint[0].toFixed(0),
                y = item.datapoint[1].toFixed(0);

            Burndown.showTooltip(item.pageX, item.pageY,
                                 item.series.label + ": " + y);
          }
        }
        else {
          $("#tooltip").remove();
          Burndown.previousPoint = null;
        }
      },

      init: function () {
        Burndown.setDatasetColor();

        $('.burndown_control input').click(Burndown.plotAccordingToChoices);
        $(".burndown_chart").bind("plothover", Burndown.showTooltipOnHover);

        Burndown.plotAccordingToChoices();
      }
    };

    Burndown.init();
  });
</script>