Belles couleurs

templates/base.html

@@ -9,6 +9,7 @@
 		<link rel="icon" sizes="32x32" href="{% static 'favicon32.ico' %}" type="image/x-icon">
 		<link rel="icon" sizes="96x96" href="{% static 'favicon96.ico' %}" type="image/x-icon">
 		<link rel="stylesheet" href="{% static 'css/main.css' %}" />
+		<script src="{% static 'jquery.js' %}"></script> 
 		{% block extra_css %}{% endblock %}
 		{% block extra_script %}{% endblock %}
 		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

users/templates/users/profile.html

@@ -76,6 +76,16 @@
 			<script src="{% static 'chart.min.js' %}"></script>
 			<script>
 			var ctx = document.getElementById("myChart").getContext('2d');
+			baseColor = Math.round(Math.random()*255) + "," + Math.round(Math.random()*255) + "," + Math.round(Math.random()*255);
+			console.log(baseColor)
+			$.get("http://www.thecolorapi.com/scheme?rgb=" + baseColor + "&mode=analogic&count={{products | length}}", function( data ) {
+			colors = data.colors
+			console.log(colors)
+			var bgColor = []
+			for(var i = 0; i < colors.length; i++){
+				color = colors[i]
+				bgColor.push("rgb(" + color.rgb.r + "," + color.rgb.g + "," + color.rgb.b + ")")
+			}
 			var myChart = new Chart(ctx, {
 				type: 'pie',
 				data: {
@@ -83,11 +93,7 @@
 					datasets: [{
 						label: '# of Votes',
 						data: [{% for q in quantities %}{{q}}, {% endfor %}],
-						backgroundColor: [
+						backgroundColor: bgColor
-						{% for q in products %}	
-						'rgb({% random_filter 0 255 %}, {% random_filter 0 255 %}, {% random_filter 0 255 %})',
-						{% endfor %}
-						],
 					}]
 				},
 				options: {
@@ -100,6 +106,7 @@
 					}
 				}
 			});
+			}, "json" );
 			</script>
 	</section>
 </section>