[% nr = uniqnumber() %]
<div id="flotgraph[% nr %]" class="flotgraph"></div>
<script>
  var d1 = {
      label: "[% loc("Availability") %]",
      color: "rgb(82, 167, 82)",
      bars: { show: true },
      data: [% encode_json_obj(data.values) %]
  }
  var d2 = {
      color: "rgb(236, 193, 77)",
      lines: { show: true },
      data: [[0, [% param.sla %]], [9999, [% param.sla %]]]
  }
  $.plot($("#flotgraph[% nr %]"), [d1, d2], {
      series: {
          bars: {
            show: false,
            barWidth: 0.9,
            align: 'center',
            fillColor: { colors: [ { opacity: 1.0 }, { opacity: 0.6 } ] }
          },
          lines: { show: false, fill: false }
      },
      xaxis: {
        min:   0.5,
        max:   [% data.values.size + 0.5 %],
        [% IF param.breakdown == 'months' %]
          ticks: [ [% FOREACH m = data.keys %][[%loop.index+1%] , '[% get_month_name(m.1, monthNames) %]'][% UNLESS loop.last %],[% END %][% END %] ]
        [% ELSIF param.breakdown == 'weeks' %]
          ticks: [ [% FOREACH m = data.keys %][[%loop.index+1%] , '[% get_week_name(m.1, weekAbbr) %]'][% UNLESS loop.last %],[% END %][% END %] ]
        [% ELSIF param.breakdown == 'days' %]
          ticks: [ [% FOREACH m = data.keys %][[%loop.index+1%] , '[% get_day_name(m.1, monthNames) %]'][% UNLESS loop.last %],[% END %][% END %] ]
        [% END %]
      },
      yaxis: {
        ticks: 10,
        min:   [% param.graph_min_sla %],
        max:  100,
        tickFormatter: function(val, axis) { return val + '%'}
      },
      legend: { position: 'se' }
  });
</script>
