{% macro draw_plot_tooltips(id, graph) -%}
{%- for stop in graph.timeline -%}
<div id="{{ id }}-tooltip-{{ loop.index0 }}" class="peak peak-{{ id }} tooltip-{% if loop.first %}right{% elif loop.last %}left{% else %}top{% endif %}" title="{{ stop|date(graph.format) }}<br><strong>{{ graph.stat[loop.index0]|intcomma }}</strong>"></div>
{%- endfor -%}
{%- endmacro %}

{% macro draw_plot(name, id, max, variables=[], color='#729fcf') -%}
      // Begin drawing graph for {{ id }}
      function {{ name }}() {
        var margin = 12;
        var margin_end = margin * 2;
        var canvas = document.getElementById('{{ id }}');
        var canvas_parent = $(canvas).parent();
        var offset = canvas_parent.offset();
        canvas.width = canvas_parent.width();
        var ctx = canvas.getContext('2d');

        // Guidelines
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#EEEEEE";
        ctx.fillStyle = "#CCC";
		ctx.font = "10pt Helvetica";
        ctx.moveTo(margin, margin + 0.5);
        ctx.lineTo(canvas.width - margin, margin + 0.5);
{%- if max > 0 %}
{%- for line in [25, 50, 75] %}
{%- if max > 3 %}
{% set y_scales = 4 %}
{%- else -%}
{% set y_scales = max %}
{% endif -%}
{% if loop.index < max and loop.index < 4 %}
		{%- set y_label = max - (loop.index / y_scales * max)|int -%}
        y_pos = margin + Math.round((canvas.height - margin_end) * ({{ loop.index }} / {{ max }})) + 0.5;
        ctx.moveTo(margin, y_pos);
        ctx.lineTo(canvas.width - margin, y_pos);
        ctx.fillText("{{ y_label }}", margin + 4, y_pos - 4.5);
        ctx.fillText("{{ y_label }}", margin + Math.round((canvas.width - margin_end) * 0.25), y_pos - 4.5);
        ctx.fillText("{{ y_label }}", margin + Math.round((canvas.width - margin_end) * 0.5), y_pos - 4.5);
        ctx.fillText("{{ y_label }}", margin + Math.round((canvas.width - margin_end) * 0.75), y_pos - 4.5);
{%- endif %}
{%- endfor %}
{%- endif %}
        ctx.stroke();

        // Final guide
        ctx.beginPath();
        ctx.strokeStyle = "#999999";
        ctx.moveTo(margin, canvas.height - margin + 0.5);
        ctx.lineTo(canvas.width - margin, canvas.height - margin + 0.5);
        ctx.fillText("0", margin + 4, canvas.height - margin - 4);
        ctx.fillText("0", margin + Math.round((canvas.width - margin_end) * 0.25), canvas.height - margin - 4);
        ctx.fillText("0", margin + Math.round((canvas.width - margin_end) * 0.5), canvas.height - margin - 4);
        ctx.fillText("0", margin + Math.round((canvas.width - margin_end) * 0.75), canvas.height - margin - 4);
        ctx.stroke();

        // Graph line
        ctx.beginPath();
        ctx.lineWidth = 4;
        ctx.strokeStyle = "{{ color }}";
        step_size = (canvas.width - margin_end) / {{ variables|length - 1 }};
{%- for stop in variables %}
        pos_x = margin + ({{ loop.index0 }} * step_size);
        pos_y = {% if max > 0 %}margin + Math.round((canvas.height - margin_end) * {{ ((max - stop) / max)|round(5) }}) + 0.5{% else %}canvas.height - margin{% endif %};
		$('#{{ id }}-tooltip-{{ loop.index0 }}').offset({ top: offset.top + pos_y - 2, left: offset.left + pos_x - 1 });
        ctx.{% if loop.index0 == 0 %}moveTo{% else %}lineTo{% endif -%}
        (pos_x, pos_y);
{%- endfor %}
        ctx.stroke();
      }

      // Update graphs
      $(function() { {{ name }}(); $(".peak-{{ id }}").css('border-color', '{{ color }}') });
      $(window).resize(function() { {{ name }}(); });
      // End drawing graph for {{ id }}
{%- endmacro %}