{% macro top_ten(time_series_times, time_series) -%}

<canvas id="top_asns" width="1000" height="400" class='aggregate'></canvas>

<script>
var colors = [
  "rgba(255,0,0,0.5)",
  "rgba(0,255,0,0.5)",
  "rgba(0,0,255,0.5)",
  "rgba(255,255,0,0.5)",
  "rgba(0,255,255,0.5)",
  "rgba(255,0,255,0.5)",
  "rgba(192,192,192,0.5)",
  "rgba(128,0,0,0.5)",
  "rgba(128,128,0,0.5)",
  "rgba(0,128,0,0.5)",
];

var flowData = {
	labels : [ {% for d in time_series_times %}"{{d}}",{% endfor %} ],
	datasets : [

{% for label, data in time_series.iteritems() %}
{
  label : "{{ label }}",
  fillColor : "rgba(0,0,0,0)",
  strokeColor : colors[{{loop.index0}}],
  pointColor : colors[{{loop.index0}}],
  pointStrokeColor : colors[{{loop.index0}}],
  data : [ {% for d in data %}{{ d }}, {% endfor %} ]
},

{% endfor %}
	]
}

var flows = document.getElementById('top_asns').getContext('2d');
new Chart(flows).Line(flowData, {
    animation: false,
    multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
  }
);
</script>

{%- endmacro %}
