{% set months = {1:"Jan", 2:"Feb", 3:"Mar", 4:"Apr", 5:"May", 6:"Jun", 7:"Jul", 8:"Aug", 9:"Sep", 10:"Oct", 11:"Nov", 12:"Dec"} %}
<script>

{% for stat in customer_graph_data %}
	{% if stat['partner_stats']|length > 0 %}
	var line_ctx_{{ stat['id'] }} = $("#lineChart_{{ stat['id'] }}").get(0).getContext("2d");
	var pie_ctx_{{ stat['id'] }} = $("#pieChart_{{ stat['id'] }}").get(0).getContext("2d");
	{% endif %}
{% endfor %}

{% for stat in customer_graph_data %}
	{% if stat['partner_stats']|length > 0 %}
	var line_data_{{ stat['id'] }} = {
		labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
		datasets: [
			{% for partner_stat in stat['partner_stats'] %}
			{
				label: "{{ partner_stat['partner'] }}",
				fillColor: "rgba(220,220,220,0.2)",
				strokeColor: "{{ partner_stat['color'] }}",
				pointColor: "{{ partner_stat['color'] }}",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "{{ partner_stat['color'] }}",
				data: [
					{% for indx in 1..12 %}
						{{ partner_stat['stats'][indx]|number_format(2, '.', '') }},
					{% endfor %}
				],
			},
			{% endfor %}
		]
	};

	var pie_data_{{ stat['id'] }} = [
			{% for key, traffic_stat in stat['traffic_light_stats'] %}
			{
				label: "{{ key }}",
				color: "{{ key }}",
				highlight: "{{ key }}",
				value: {{ traffic_stat }}
			},
			{% endfor %}
	];
	{% endif %}
{% endfor %}


{% for stat in customer_graph_data %}
	{% if stat['partner_stats']|length > 0 %}
	var myLineChart_{{ stat['id'] }} = new Chart(line_ctx_{{ stat['id'] }}).Line(line_data_{{ stat['id'] }}, 
		{
		   responsive : false,
		   animation: true,
		   tooltipFillColor: "rgba(0,0,0,0.8)",                
		   tooltipFontSize: 9,
		   multiTooltipTemplate: "<%= datasetLabel %>: <%= value %>"
		}
	);
	var myPieChart_{{ stat['id'] }} = new Chart(pie_ctx_{{ stat['id'] }}).Pie(pie_data_{{ stat['id'] }}, 
		{
		   responsive : false,
		   animation: true,
		   tooltipFillColor: "rgba(0,0,0,0.8)",                
		   tooltipFontSize: 10,
		   tooltipTemplate: "<%= value %>"
		}
	);
	{% endif %}
{% endfor %}

</script>

<table style="width:100%">
{% for stat in customer_graph_data %}
	{% if stat['partner_stats']|length > 0 %}
	<tr>
		<td>
			<h5>{{ stat['customer'] }}
			{% for partner_stat in stat['partner_stats'] %}
			<code style="background-color: {{ partner_stat['color'] }}; color:#000000">{{ partner_stat['partner'] }}</code>
			{% endfor %}
			</h5>
			<div class="canvas-holder"><canvas id="lineChart_{{ stat['id'] }}" width="600" height="200"></canvas></div>
		</td>
		<td>
			<h5>Traffic Lighting</h5>
			<div class="canvas-holder"><canvas id="pieChart_{{ stat['id'] }}" width="200" height="200"></canvas></div>
		</td>
	</tr>
	{% endif %}
{% endfor %}
</table>