Merge branch 'results/add-charts' into 'develop'

Ergonomie + graphique des résultats Sur le formulaire de vote : - bouton « Non » affiché comme non sélectionné au démarrage - icônes mises en couleur (déjà présent sur master) #33 Sur les résultats : - ajout du total des votants - fix compteur inb n'était pas affiché s'il n'y avait aucun oui - ajout du symbole « Non » avec effets de masquage en CSS pour conserver la lisibilité du tableau - changement de couleurs sur « Meilleurs résultats » + texte #52 - ajout du graphique (utilise charts.js et l'extension stackedbar) Sur le reste : - coquille "Genric" à divers endroits - remplacement des span par des i pour les icônes-fonts - liens des images du README par l'équivalent https See merge request !56
2015-06-23 21:16:13 +02:00 · 2015-06-23 21:16:13 +02:00 · f50d504932
parent 9ef15cc4e7 20378e7fb7
commit f50d504932
13 changed files with 846 additions and 61 deletions
--- a/README.md
+++ b/README.md
@ -2,10 +2,10 @@

 ![Gitlab](https://git.framasoft.org/assets/logo-black-f52905a40830b30aa287f784b537c823.png)[https://git.framasoft.org](https://git.framasoft.org)

-![English](http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/20px-Flag_of_the_United_Kingdom.svg.png) **Framasoft uses GitLab** for the development of its free softwares. Our Github repositories are only mirrors.
+![English](https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/20px-Flag_of_the_United_Kingdom.svg.png) **Framasoft uses GitLab** for the development of its free softwares. Our Github repositories are only mirrors.
 If you want to work with us, **fork us on [git.framasoft.org](https://git.framasoft.org)**. (no registration needed, you can sign in with your Github account)

-![Français](http://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/20px-Flag_of_France.svg.png) **Framasoft utilise GitLab** pour le développement de ses logiciels libres. Nos dépôts Github ne sont que des mirroirs.
+![Français](https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/20px-Flag_of_France.svg.png) **Framasoft utilise GitLab** pour le développement de ses logiciels libres. Nos dépôts Github ne sont que des mirroirs.
 Si vous souhaitez travailler avec nous, **forkez-nous sur [git.framasoft.org](https://git.framasoft.org)**. (l'inscription n'est pas nécessaire, vous pouvez vous connecter avec votre compte Github)

 ---
--- a/css/style.css
+++ b/css/style.css
@ -281,6 +281,18 @@ table.results .btn-link.btn-sm {
    padding:2px;
 }

+#addition {
+    vertical-align:top;
+}
+
+#showChart {
+    margin-top:30px;
+}
+
+#Chart {
+    padding-right:30px;
+}
+
 /* Formulaire de vote */
 #vote-form td ul, #vote-form td label {
    margin:0;
@ -316,22 +328,25 @@ table.results .btn-link.btn-sm {
    color:#555;
 }

-.yes .btn {
+.yes .btn,.yes .btn:hover {
    border-bottom-right-radius:0 !important;
    border-bottom-left-radius:0 !important;
    margin-bottom:-1px !important;
    margin-top:4px !important;
+    color: #677835;
 }

-.ifneedbe .btn {
+.ifneedbe .btn,.ifneedbe .btn:hover {
    border-radius: 0;
+    color: #C48A1B;
 }

-.no .btn{
+.no .btn,.no .btn:hover{
    border-top-right-radius:0 !important;
    border-top-left-radius:0 !important;
    margin-bottom:4px !important;
    margin-top:-1px !important;
+    color: #AD220F;
 }

 .yes input[type="radio"]:checked + label { /* =.btn-success.active */
@ -355,6 +370,67 @@ table.results .btn-link.btn-sm {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
 }

+/* Button and results "No" */
+.no .btn.startunchecked {
+    box-shadow:none !important;
+    color:#AD220F !important;
+    background:#fff !important;
+    border-color:#bdbdbd !important;
+}
+
+.no .btn.startunchecked:hover {
+    background-color: #E0E0E0 !important;
+    border-color: #949494 !important;
+}
+
+table.results .bg-danger .glyphicon {
+    opacity:0;
+  
+    -moz-animation-name: hideNoIcon;
+    -moz-animation-iteration-count: 1;
+    -moz-animation-timing-function: ease-in;
+    -moz-animation-duration: 2s;
+
+    -webkit-animation-name: hideNoIcon;
+    -webkit-animation-iteration-count: 1;
+    -webkit-animation-timing-function: ease-in;
+    -webkit-animation-duration: 2s;
+
+    animation-name: hideNoIcon;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-duration: 2s;
+}
+
+@-moz-keyframes hideNoIcon {
+    0% {
+        opacity:1;
+    }
+    100% {
+        opacity:0;
+    }
+}
+@-webkit-keyframes hideNoIcon {
+    0% {
+        opacity:1;
+    }
+    100% {
+        opacity:0;
+    }
+}
+@keyframes hideNoIcon {
+    0% {
+        opacity:1;
+    }
+    100% {
+        opacity:0;
+    }
+}
+
+table.results > tbody > tr:hover > td .glyphicon {
+    opacity:1
+}
+
 /* create_date_poll.php */
 #selected-days .form-group {
    margin-left:0;
--- a/js/Chart.StackedBar.js
+++ b/js/Chart.StackedBar.js
@ -0,0 +1,518 @@
+(function (factory) {
+	"use strict";
+	if (typeof define === 'function' && define.amd) {
+		// AMD. Register as an anonymous module.
+		define(['chart.js'], factory);
+	} else if (typeof exports === 'object') {
+		// Node/CommonJS
+		module.exports = factory(require('chart.js'));
+	} else {
+		// Global browser
+		factory(Chart);
+	}
+}(function (Chart) {
+	"use strict";
+
+	var helpers = Chart.helpers;
+
+	var defaultConfig = {
+		scaleBeginAtZero : true,
+
+		//Boolean - Whether grid lines are shown across the chart
+		scaleShowGridLines : true,
+
+		//String - Colour of the grid lines
+		scaleGridLineColor : "rgba(0,0,0,.05)",
+
+		//Number - Width of the grid lines
+		scaleGridLineWidth : 1,
+
+        //Boolean - Whether to show horizontal lines (except X axis)
+		scaleShowHorizontalLines: true,
+
+		//Boolean - Whether to show vertical lines (except Y axis)
+		scaleShowVerticalLines: true,
+
+		//Boolean - If there is a stroke on each bar
+		barShowStroke : true,
+
+		//Number - Pixel width of the bar stroke
+		barStrokeWidth : 2,
+
+		//Number - Spacing between each of the X value sets
+		barValueSpacing : 5,
+
+		//Boolean - Whether bars should be rendered on a percentage base
+		relativeBars : false,
+
+		//String - A legend template
+		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
+
+		//Boolean - Show total legend
+		showTotal: false,
+
+		//String - Color of total legend
+		totalColor: '#fff',
+
+		//String - Total Label
+		totalLabel: 'Total'
+	};
+
+	Chart.Type.extend({
+		name: "StackedBar",
+		defaults : defaultConfig,
+		initialize:  function(data){
+			//Expose options as a scope variable here so we can access it in the ScaleClass
+			var options = this.options;
+
+			this.ScaleClass = Chart.Scale.extend({
+				offsetGridLines : true,
+				calculateBarX : function(barIndex){
+					return this.calculateX(barIndex);
+				},
+				calculateBarY : function(datasets, dsIndex, barIndex, value){
+					var offset = 0,
+						sum = 0;
+
+					for(var i = 0; i < datasets.length; i++) {
+						sum += datasets[i].bars[barIndex].value;
+					}
+					for(i = dsIndex; i < datasets.length; i++) {
+						if(i === dsIndex && value) {
+							offset += value;
+						} else {
+							offset = +offset + +datasets[i].bars[barIndex].value;
+						}
+					}
+
+					if(options.relativeBars) {
+						offset = offset / sum * 100;
+					}
+
+					return this.calculateY(offset);
+				},
+				calculateBaseWidth : function(){
+					return (this.calculateX(1) - this.calculateX(0)) - (2*options.barValueSpacing);
+				},
+				calculateBaseHeight : function(){
+					return (this.calculateY(1) - this.calculateY(0));
+				},
+				calculateBarWidth : function(datasetCount){
+					//The padding between datasets is to the right of each bar, providing that there are more than 1 dataset
+					return this.calculateBaseWidth();
+				},
+				calculateBarHeight : function(datasets, dsIndex, barIndex, value) {
+					var sum = 0;
+
+					for(var i = 0; i < datasets.length; i++) {
+						sum += datasets[i].bars[barIndex].value;
+					}
+
+					if(!value) {
+						value = datasets[dsIndex].bars[barIndex].value;
+					}
+
+					if(options.relativeBars) {
+						value = value / sum * 100;
+					}
+
+					return this.calculateY(value);
+				}
+			});
+
+			this.datasets = [];
+
+			//Set up tooltip events on the chart
+			if (this.options.showTooltips){
+				helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
+					var activeBars = (evt.type !== 'mouseout') ? this.getBarsAtEvent(evt) : [];
+
+					this.eachBars(function(bar){
+						bar.restore(['fillColor', 'strokeColor']);
+					});
+					helpers.each(activeBars, function(activeBar){
+						activeBar.fillColor = activeBar.highlightFill;
+						activeBar.strokeColor = activeBar.highlightStroke;
+					});
+					this.showTooltip(activeBars);
+				});
+			}
+
+			//Declare the extension of the default point, to cater for the options passed in to the constructor
+			this.BarClass = Chart.Rectangle.extend({
+				strokeWidth : this.options.barStrokeWidth,
+				showStroke : this.options.barShowStroke,
+				ctx : this.chart.ctx
+			});
+
+			//Iterate through each of the datasets, and build this into a property of the chart
+			helpers.each(data.datasets,function(dataset,datasetIndex){
+
+				var datasetObject = {
+					label : dataset.label || null,
+					fillColor : dataset.fillColor,
+					strokeColor : dataset.strokeColor,
+					bars : []
+				};
+
+				this.datasets.push(datasetObject);
+
+				helpers.each(dataset.data,function(dataPoint,index){
+					if (helpers.isNumber(dataPoint)){
+						//Add a new point for each piece of data, passing any required data to draw.
+						//Add 0 as value if !isNumber (e.g. empty values are useful when 0 values should be hidden in tooltip)
+						datasetObject.bars.push(new this.BarClass({
+							value : helpers.isNumber(dataPoint)?dataPoint:0,
+							label : data.labels[index],
+							datasetLabel: dataset.label,
+							strokeColor : dataset.strokeColor,
+							fillColor : dataset.fillColor,
+							highlightFill : dataset.highlightFill || dataset.fillColor,
+							highlightStroke : dataset.highlightStroke || dataset.strokeColor
+						}));
+					}
+				},this);
+
+			},this);
+
+			this.buildScale(data.labels);
+
+			this.eachBars(function(bar, index, datasetIndex){
+				helpers.extend(bar, {
+					base: this.scale.endPoint,
+					height: 0,
+					width : this.scale.calculateBarWidth(this.datasets.length),
+					x: this.scale.calculateBarX(index),
+					y: this.scale.endPoint
+				});
+				bar.save();
+			}, this);
+
+			this.render();
+		},
+		showTooltip : function(ChartElements, forceRedraw){
+			// Only redraw the chart if we've actually changed what we're hovering on.
+			if (typeof this.activeElements === 'undefined') this.activeElements = [];
+
+			helpers = Chart.helpers;
+
+			var isChanged = (function(Elements){
+				var changed = false;
+
+				if (Elements.length !== this.activeElements.length){
+					changed = true;
+					return changed;
+				}
+
+				helpers.each(Elements, function(element, index){
+					if (element !== this.activeElements[index]){
+						changed = true;
+					}
+				}, this);
+				return changed;
+			}).call(this, ChartElements);
+
+			if (!isChanged && !forceRedraw){
+				return;
+			}
+			else{
+				this.activeElements = ChartElements;
+			}
+			this.draw();
+			if(this.options.customTooltips){
+				this.options.customTooltips(false);
+			}
+			if (ChartElements.length > 0){
+				// If we have multiple datasets, show a MultiTooltip for all of the data points at that index
+				if (this.datasets && this.datasets.length > 1) {
+					var dataArray,
+					dataIndex;
+
+					for (var i = this.datasets.length - 1; i >= 0; i--) {
+						dataArray = this.datasets[i].points || this.datasets[i].bars || this.datasets[i].segments;
+						dataIndex = helpers.indexOf(dataArray, ChartElements[0]);
+						if (dataIndex !== -1){
+							break;
+						}
+					}
+					var tooltipLabels = [],
+					tooltipColors = [],
+					medianPosition = (function(index) {
+
+						// Get all the points at that particular index
+						var Elements = [],
+						dataCollection,
+						xPositions = [],
+						yPositions = [],
+						xMax,
+						yMax,
+						xMin,
+						yMin;
+						helpers.each(this.datasets, function(dataset){
+							dataCollection = dataset.points || dataset.bars || dataset.segments;
+							if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue()){
+								Elements.push(dataCollection[dataIndex]);
+							}
+						});
+
+						var total = {
+							datasetLabel: this.options.totalLabel,
+							value: 0,
+							fillColor: this.options.totalColor,
+							strokeColor: this.options.totalColor
+						};
+
+						helpers.each(Elements, function(element) {
+							xPositions.push(element.x);
+							yPositions.push(element.y);
+
+							total.value += element.value;
+
+							//Include any colour information about the element
+							tooltipLabels.push(helpers.template(this.options.multiTooltipTemplate, element));
+							tooltipColors.push({
+								fill: element._saved.fillColor || element.fillColor,
+								stroke: element._saved.strokeColor || element.strokeColor
+							});
+
+						}, this);
+
+						if (this.options.showTotal) {
+							tooltipLabels.push(helpers.template(this.options.multiTooltipTemplate, total));
+							tooltipColors.push({
+								fill: total.fillColor,
+								stroke: total.strokeColor
+							});
+						}
+
+						yMin = helpers.min(yPositions);
+						yMax = helpers.max(yPositions);
+
+						xMin = helpers.min(xPositions);
+						xMax = helpers.max(xPositions);
+
+						return {
+							x: (xMin > this.chart.width/2) ? xMin : xMax,
+							y: (yMin + yMax)/2
+						};
+					}).call(this, dataIndex);
+
+					new Chart.MultiTooltip({
+						x: medianPosition.x,
+						y: medianPosition.y,
+						xPadding: this.options.tooltipXPadding,
+						yPadding: this.options.tooltipYPadding,
+						xOffset: this.options.tooltipXOffset,
+						fillColor: this.options.tooltipFillColor,
+						textColor: this.options.tooltipFontColor,
+						fontFamily: this.options.tooltipFontFamily,
+						fontStyle: this.options.tooltipFontStyle,
+						fontSize: this.options.tooltipFontSize,
+						titleTextColor: this.options.tooltipTitleFontColor,
+						titleFontFamily: this.options.tooltipTitleFontFamily,
+						titleFontStyle: this.options.tooltipTitleFontStyle,
+						titleFontSize: this.options.tooltipTitleFontSize,
+						cornerRadius: this.options.tooltipCornerRadius,
+						labels: tooltipLabels,
+						legendColors: tooltipColors,
+						legendColorBackground : this.options.multiTooltipKeyBackground,
+						title: ChartElements[0].label,
+						chart: this.chart,
+						ctx: this.chart.ctx,
+						custom: this.options.customTooltips
+					}).draw();
+
+				} else {
+					helpers.each(ChartElements, function(Element) {
+						var tooltipPosition = Element.tooltipPosition();
+						new Chart.Tooltip({
+							x: Math.round(tooltipPosition.x),
+							y: Math.round(tooltipPosition.y),
+							xPadding: this.options.tooltipXPadding,
+							yPadding: this.options.tooltipYPadding,
+							fillColor: this.options.tooltipFillColor,
+							textColor: this.options.tooltipFontColor,
+							fontFamily: this.options.tooltipFontFamily,
+							fontStyle: this.options.tooltipFontStyle,
+							fontSize: this.options.tooltipFontSize,
+							caretHeight: this.options.tooltipCaretSize,
+							cornerRadius: this.options.tooltipCornerRadius,
+							text: helpers.template(this.options.tooltipTemplate, Element),
+							chart: this.chart,
+							custom: this.options.customTooltips
+						}).draw();
+					}, this);
+				}
+			}
+			return this;
+		},
+		update : function(){
+			this.scale.update();
+			// Reset any highlight colours before updating.
+			helpers.each(this.activeElements, function(activeElement){
+				activeElement.restore(['fillColor', 'strokeColor']);
+			});
+
+			this.eachBars(function(bar){
+				bar.save();
+			});
+			this.render();
+		},
+		eachBars : function(callback){
+			helpers.each(this.datasets,function(dataset, datasetIndex){
+				helpers.each(dataset.bars, callback, this, datasetIndex);
+			},this);
+		},
+		getBarsAtEvent : function(e){
+			var barsArray = [],
+				eventPosition = helpers.getRelativePosition(e),
+				datasetIterator = function(dataset){
+					barsArray.push(dataset.bars[barIndex]);
+				},
+				barIndex;
+
+			for (var datasetIndex = 0; datasetIndex < this.datasets.length; datasetIndex++) {
+				for (barIndex = 0; barIndex < this.datasets[datasetIndex].bars.length; barIndex++) {
+					if (this.datasets[datasetIndex].bars[barIndex].inRange(eventPosition.x,eventPosition.y)){
+						helpers.each(this.datasets, datasetIterator);
+						return barsArray;
+					}
+				}
+			}
+
+			return barsArray;
+		},
+		buildScale : function(labels){
+			var self = this;
+
+			var dataTotal = function(){
+				var values = [];
+				helpers.each(self.datasets, function(dataset) {
+					helpers.each(dataset.bars, function(bar, barIndex) {
+						if(!values[barIndex]) values[barIndex] = 0;
+						if(self.options.relativeBars) {
+							values[barIndex] = 100;
+						} else {
+							values[barIndex] = +values[barIndex] + +bar.value;
+						}
+					});
+				});
+				return values;
+			};
+
+			var scaleOptions = {
+				templateString : this.options.scaleLabel,
+				height : this.chart.height,
+				width : this.chart.width,
+				ctx : this.chart.ctx,
+				textColor : this.options.scaleFontColor,
+				fontSize : this.options.scaleFontSize,
+				fontStyle : this.options.scaleFontStyle,
+				fontFamily : this.options.scaleFontFamily,
+				valuesCount : labels.length,
+				beginAtZero : this.options.scaleBeginAtZero,
+				integersOnly : this.options.scaleIntegersOnly,
+				calculateYRange: function(currentHeight){
+					var updatedRanges = helpers.calculateScaleRange(
+						dataTotal(),
+						currentHeight,
+						this.fontSize,
+						this.beginAtZero,
+						this.integersOnly
+					);
+					helpers.extend(this, updatedRanges);
+				},
+				xLabels : this.options.xLabels || labels,
+				font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
+				lineWidth : this.options.scaleLineWidth,
+				lineColor : this.options.scaleLineColor,
+				gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
+				gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
+                showHorizontalLines : this.options.scaleShowHorizontalLines,
+				showVerticalLines : this.options.scaleShowVerticalLines,
+				padding : (this.options.showScale) ? 0 : (this.options.barShowStroke) ? this.options.barStrokeWidth : 0,
+				showLabels : this.options.scaleShowLabels,
+				display : this.options.showScale
+			};
+
+			if (this.options.scaleOverride){
+				helpers.extend(scaleOptions, {
+					calculateYRange: helpers.noop,
+					steps: this.options.scaleSteps,
+					stepValue: this.options.scaleStepWidth,
+					min: this.options.scaleStartValue,
+					max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
+				});
+			}
+
+			this.scale = new this.ScaleClass(scaleOptions);
+		},
+		addData : function(valuesArray,label){
+			//Map the values array for each of the datasets
+			helpers.each(valuesArray,function(value,datasetIndex){
+				if (helpers.isNumber(value)){
+					//Add a new point for each piece of data, passing any required data to draw.
+					//Add 0 as value if !isNumber (e.g. empty values are useful when 0 values should be hidden in tooltip)
+					this.datasets[datasetIndex].bars.push(new this.BarClass({
+						value : helpers.isNumber(value)?value:0,
+						label : label,
+						x: this.scale.calculateBarX(this.scale.valuesCount+1),
+						y: this.scale.endPoint,
+						width : this.scale.calculateBarWidth(this.datasets.length),
+						base : this.scale.endPoint,
+						strokeColor : this.datasets[datasetIndex].strokeColor,
+						fillColor : this.datasets[datasetIndex].fillColor
+					}));
+				}
+			},this);
+
+			this.scale.addXLabel(label);
+			//Then re-render the chart.
+			this.update();
+		},
+		removeData : function(){
+			this.scale.removeXLabel();
+			//Then re-render the chart.
+			helpers.each(this.datasets,function(dataset){
+				dataset.bars.shift();
+			},this);
+			this.update();
+		},
+		reflow : function(){
+			helpers.extend(this.BarClass.prototype,{
+				y: this.scale.endPoint,
+				base : this.scale.endPoint
+			});
+			var newScaleProps = helpers.extend({
+				height : this.chart.height,
+				width : this.chart.width
+			});
+			this.scale.update(newScaleProps);
+		},
+		draw : function(ease){
+			var easingDecimal = ease || 1;
+			this.clear();
+
+			var ctx = this.chart.ctx;
+
+			this.scale.draw(easingDecimal);
+
+			//Draw all the bars for each dataset
+			helpers.each(this.datasets,function(dataset,datasetIndex){
+				helpers.each(dataset.bars,function(bar,index){
+					var y = this.scale.calculateBarY(this.datasets, datasetIndex, index, bar.value),
+						height = this.scale.calculateBarHeight(this.datasets, datasetIndex, index, bar.value);
+
+					//Transition then draw
+					bar.transition({
+						base : this.scale.endPoint - (Math.abs(height) - Math.abs(y)),
+						x : this.scale.calculateBarX(index),
+						y : Math.abs(y),
+						height : Math.abs(height),
+						width : this.scale.calculateBarWidth(this.datasets.length)
+					}, easingDecimal).draw();
+				},this);
+			},this);
+		}
+	});
+}));
--- a/js/Chart.min.js
+++ b/js/Chart.min.js
--- a/js/app/studs.js
+++ b/js/app/studs.js
@ -35,4 +35,14 @@ $(document).ready(function () {
        }
    });

-});
+    $('.choice input:radio').on('change', function(){
+      $(this).parent().parent().find('.startunchecked').removeClass('startunchecked');
+    });
+    $('.startunchecked').on('click', function(){
+      $(this).removeClass('startunchecked');
+    });
+    $('.no input').on('focus', function(){
+      $(this).next().removeClass('startunchecked');
+    });
+
+});
--- a/locale/de.json
+++ b/locale/de.json
@ -139,6 +139,10 @@
        "The bests choices at this time are:": "Die beste Optionen sind derzeit:",
        "Scroll to the left": "Links scrollen",
        "Scroll to the right": "Rechts scrollen"
+        "polled user": "DE_votant",
+        "polled users": "DE_votants",
+        "Display the chart of the results": "DE_Afficher le graphique des résultats",
+        "Chart": "DE_Graphique"
    },
    "Comments": {
        "Comments of polled people": "Kommentare von Teilnehmer",
--- a/locale/en.json
+++ b/locale/en.json
@ -139,6 +139,8 @@
    "The bests choices at this time are:": "The bests choices at this time are:",
    "Scroll to the left": "Scroll to the left",
    "Scroll to the right": "Scroll to the right"
+    "Display the chart of the results": "Display the chart of the results",
+    "Chart": "Chart"
  },
  "Comments": {
    "Comments of polled people": "Comments of polled people",
--- a/locale/es.json
+++ b/locale/es.json
@ -139,6 +139,10 @@
        "The bests choices at this time are:": "ES_Les meilleurs choix pour l'instant sont :",
        "Scroll to the left": "ES_Faire défiler à gauche",
        "Scroll to the right": "ES_Faire défiler à droite"
+        "polled user": "ES_votant",
+        "polled users": "ES_votants",
+        "Display the chart of the results": "ES_Afficher le graphique des résultats",
+        "Chart": "ES_Graphique"
    },
    "Comments": {
        "Comments of polled people": "ES_Commentaires de sondés",
--- a/locale/fr.json
+++ b/locale/fr.json
@ -135,10 +135,14 @@
    "Addition": "Somme",
    "Best choice": "Meilleur choix",
    "Best choices": "Meilleurs choix",
-    "The best choice at this time is:": "Le meilleur choix pour l'instant est :",
-    "The bests choices at this time are:": "Les meilleurs choix pour l'instant sont :",
+    "The best choice at this time is:": "Pour l'instant, le choix ayant reçu le plus grand nombre de votes est :",
+    "The bests choices at this time are:": "Pour l'instant, les choix ayant reçu le plus grand nombre de votes sont :",
    "Scroll to the left": "Faire défiler à gauche",
-    "Scroll to the right": "Faire défiler à droite"
+    "Scroll to the right": "Faire défiler à droite",
+    "polled user": "votant",
+    "polled users": "votants",
+    "Display the chart of the results": "Afficher le graphique des résultats",
+    "Chart": "Graphique"
  },
  "Comments": {
    "Comments of polled people": "Commentaires de sondés",
--- a/locale/it.json
+++ b/locale/it.json
@ -138,7 +138,11 @@
    "The best choice at this time is:": "La migliore scelta per ora è :",
    "The bests choices at this time are:": "Le migliori scelte per ora sono :",
    "Scroll to the left": "Spostare a sinistra",
-    "Scroll to the right": "Spostare a destra"
+    "Scroll to the right": "Spostare a destra",
+    "polled user": "IT_votant",
+    "polled users": "IT_votants",
+    "Display the chart of the results": "IT_Afficher le graphique des résultats",
+    "Chart": "IT_Graphique"
  },
  "Comments": {
    "Comments of polled people": "Commenti dei partecipanti",
@ -331,4 +335,4 @@
    "You can't create a poll with hidden results with the following edition option:": "IT_Vous ne pouvez pas créer de sondage avec résulats cachés avec les options d'éditions suivantes : ",
    "Failed to delete column": "Impossibile eliminare colonna"
  }
-}
+}
--- a/tpl/part/vote_table_classic.tpl
+++ b/tpl/part/vote_table_classic.tpl
@ -16,14 +16,14 @@
                        <td headers="C{$id}">
                            <a href="{poll_url id=$admin_poll_id admin=true action='delete_column' action_value=$slot->title}"
                               class="btn btn-link btn-sm" title="{__('adminstuds', 'Remove the column')} {$slot->title|html}">
-                                <span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Genric', 'Remove')}</span>
+                                <i class="glyphicon glyphicon-remove text-danger"></i><span class="sr-only">{__('Generic', 'Remove')}</span>
                            </a>
                            </td>
                    {/foreach}
                    <td>
                        <a href="{poll_url id=$admin_poll_id admin=true action='add_slot' action_value=true}"
                           class="btn btn-link btn-sm" title="{__('adminstuds', 'Add a column')} {$slot->title|html}">
-                            <span class="glyphicon glyphicon-plus text-success"></span><span class="sr-only">{__('Poll results', 'Add a column')}</span>
+                            <i class="glyphicon glyphicon-plus text-success"></i><span class="sr-only">{__('Poll results', 'Add a column')}</span>
                        </a>
                    </td>
                </tr>
@ -44,9 +44,9 @@
                <tr class="hidden-print">
                    <td class="bg-info" style="padding:5px">
                        <div class="input-group input-group-sm" id="edit">
-                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
+                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input type="hidden" name="edited_vote" value="{$vote->uniqId}"/>
-                            <input type="text" id="name" name="name" value="{$vote->name|html}" class="form-control" title="{__('Genric', 'Your name')}" placeholder="{__('Genric', 'Your name')}" />
+                            <input type="text" id="name" name="name" value="{$vote->name|html}" class="form-control" title="{__('Generic', 'Your name')}" placeholder="{__('Generic', 'Your name')}" />
                        </div>
                    </td>

@ -57,19 +57,19 @@
                                <li class="yes">
                                    <input type="radio" id="y-choice-{$id}" name="choices[{$id}]" value="2" {if $choice==2}checked {/if}/>
                                    <label class="btn btn-default btn-xs" for="y-choice-{$id}" title="{__('Poll results', 'Vote yes for')|html} {$slots[$id]->title|html}">
-                                        <span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Genric', 'Yes')}</span>
+                                        <i class="glyphicon glyphicon-ok"></i><span class="sr-only">{__('Generic', 'Yes')}</span>
                                    </label>
                                </li>
                                <li class="ifneedbe">
                                    <input type="radio" id="i-choice-{$id}" name="choices[{$id}]" value="1" {if $choice==1}checked {/if}/>
                                    <label class="btn btn-default btn-xs" for="i-choice-{$id}" title="{__('Poll results', 'Vote ifneedbe for')|html} {$slots[$id]->title|html}">
-                                        (<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Genric', 'Ifneedbe')}</span>
+                                        (<i class="glyphicon glyphicon-ok"></i>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
                                    </label>
                                </li>
                                <li class="no">
                                    <input type="radio" id="n-choice-{$id}" name="choices[{$id}]" value="0" {if $choice==0}checked {/if}/>
                                    <label class="btn btn-default btn-xs" for="n-choice-{$id}" title="{__('Poll results', 'Vote no for')|html} {$slots[$id]->title|html}">
-                                        <span class="glyphicon glyphicon-ban-circle"></span><span class="sr-only">{__('Genric', 'No')}</span>
+                                        <i class="glyphicon glyphicon-ban-circle"></i><span class="sr-only">{__('Generic', 'No')}</span>
                                    </label>
                                </li>
                            </ul>
@ -85,11 +85,11 @@
                    {foreach $vote->choices as $id=>$choice}

                        {if $choice==2}
-                            <td class="bg-success text-success" headers="C{$id}"><span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Yes')}</span></td>
+                            <td class="bg-success text-success" headers="C{$id}"><i class="glyphicon glyphicon-ok"></i><span class="sr-only">{__('Generic', 'Yes')}</span></td>
                        {elseif $choice==1}
-                            <td class="bg-warning text-warning" headers="C{$id}">(<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span></td>
+                            <td class="bg-warning text-warning" headers="C{$id}">(<i class="glyphicon glyphicon-ok"></i>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span></td>
                        {else}
-                            <td class="bg-danger" headers="C{$id}"><span class="sr-only">{__('Generic', 'No')}</span></td>
+                            <td class="bg-danger text-danger" headers="C{$id}"><i class="glyphicon glyphicon-ban-circle"></i><span class="sr-only">{__('Generic', 'No')}</span></td>
                        {/if}

                    {/foreach}
@ -97,13 +97,13 @@
                    {if $active && !$expired && ($poll->editable == constant('Framadate\Editable::EDITABLE_BY_ALL') or $admin)}
                        <td class="hidden-print">
                            <a href="{if $admin}{poll_url id=$poll->admin_id vote_id=$vote->uniqId admin=true}{else}{poll_url id=$poll->id vote_id=$vote->uniqId}{/if}" class="btn btn-default btn-sm" title="{__('Poll results', 'Edit the line:')|html} {$vote->name|html}">
-                                <span class="glyphicon glyphicon-pencil"></span><span class="sr-only">{__('Generic', 'Edit')}</span>
+                                <i class="glyphicon glyphicon-pencil"></i><span class="sr-only">{__('Generic', 'Edit')}</span>
                            </a>
                            {if $admin}
                                <a href="{poll_url id=$admin_poll_id admin=true action='delete_vote' action_value=$vote->id}"
                                   class="btn btn-default btn-sm"
                                   title="{__('Poll results', 'Remove the line:')} {$vote->name|html}">
-                                    <span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Generic', 'Remove')}</span>
+                                    <i class="glyphicon glyphicon-remove text-danger"></i><span class="sr-only">{__('Generic', 'Remove')}</span>
                                </a>
                            {/if}
                        </td>
@ -120,7 +120,7 @@
                <tr id="vote-form" class="hidden-print">
                    <td class="bg-info" style="padding:5px">
                        <div class="input-group input-group-sm">
-                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
+                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input type="text" id="name" name="name" class="form-control" title="{__('Generic', 'Your name')}" placeholder="{__('Generic', 'Your name')}" />
                        </div>
                    </td>
@ -130,19 +130,19 @@
                                <li class="yes">
                                    <input type="radio" id="y-choice-{$id}" name="choices[{$id}]" value="2" />
                                    <label class="btn btn-default btn-xs" for="y-choice-{$id}" title="{__('Poll results', 'Vote yes for')|html} {$slot->title|html}">
-                                        <span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Yes')}</span>
+                                        <i class="glyphicon glyphicon-ok"></i><span class="sr-only">{__('Generic', 'Yes')}</span>
                                    </label>
                                </li>
                                <li class="ifneedbe">
                                    <input type="radio" id="i-choice-{$id}" name="choices[{$id}]" value="1" />
                                    <label class="btn btn-default btn-xs" for="i-choice-{$id}" title="{__('Poll results', 'Vote ifneedbe for')|html} {$slot->title|html}">
-                                        (<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
+                                        (<i class="glyphicon glyphicon-ok"></i>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
                                    </label>
                                </li>
                                <li class="no">
                                    <input type="radio" id="n-choice-{$id}" name="choices[{$id}]" value="0" checked/>
-                                    <label class="btn btn-default btn-xs" for="n-choice-{$id}" title="{__('Poll results', 'Vote no for')|html} {$slot->title|html}">
-                                        <span class="glyphicon glyphicon-ban-circle"></span><span class="sr-only">{__('Generic', 'No')}</span>
+                                    <label class="btn btn-default btn-xs startunchecked" for="n-choice-{$id}" title="{__('Poll results', 'Vote no for')|html} {$slot->title|html}">
+                                        <i class="glyphicon glyphicon-ban-circle"></i><span class="sr-only">{__('Generic', 'No')}</span>
                                    </label>
                                </li>
                            </ul>
@ -158,13 +158,15 @@
                {$max = max($best_choices['y'])}
                {if $max > 0}
                    <tr id="addition">
-                        <td>{__('Poll results', 'Addition')}</td>
+                        <td>{__('Poll results', 'Addition')}<br/>{$votes|count} {if ($votes|count)==1}{__('Poll results', 'polled user')}{else}{__('Poll results', 'polled users')}{/if}</td>
                        {foreach $best_choices['y'] as $i=>$best_choice}
                            {if $max == $best_choice}
                                {$count_bests = $count_bests +1}
-                                <td><span class="glyphicon glyphicon-star text-warning"></span>{$best_choice|html}{if $best_choices['inb'][$i]>0}<span class="very-small text-muted"> (+{$best_choices['inb'][$i]|html})</span>{/if}</td>
+                                <td><i class="glyphicon glyphicon-star text-info"></i><span class="yes-count">{$best_choice|html}</span>{if $best_choices['inb'][$i]>0}<br/><span class="small text-muted">(+<span class="inb-count">{$best_choices['inb'][$i]|html}</span>)</span>{/if}</td>
                            {elseif $best_choice > 0}
-                                <td>{$best_choice|html}{if $best_choices['inb'][$i]>0}<span class="very-small text-muted"> (+{$best_choices['inb'][$i]|html})</span>{/if}</td>
+                                <td><span class="yes-count">{$best_choice|html}</span>{if $best_choices['inb'][$i]>0}<br/><span class="small text-muted">(+<span class="inb-count">{$best_choices['inb'][$i]|html}</span>)</span>{/if}</td>
+                            {elseif $best_choices['inb'][$i]>0}
+                                <td><br/><span class="small text-muted">(+<span class="inb-count">{$best_choices['inb'][$i]|html}</span>)</span></td>
                            {else}
                                <td></td>
                            {/if}
@ -177,6 +179,79 @@
    </form>
 </div>

+{if !$hidden && $max > 0}
+    <div class="row" aria-hidden="true">
+        <div class="col-xs-12">
+            <p class="text-center" id="showChart">
+                <button class="btn btn-lg btn-default">
+                    <span class="fa fa-fw fa-bar-chart"></span> {__('Poll results', 'Display the chart of the results')}
+                </button>
+            </p>
+        </div>
+    </div>
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $('#showChart').on('click', function() {
+                $('#showChart').after("<h3>{__('Poll results', 'Chart')}</h3><canvas id=\"Chart\"></canvas>");
+                $('#showChart').remove();
+                
+                var resIfneedbe = [];
+                var resYes = [];
+            
+                $('#addition').find('td').each(function (colIndex) {
+                    if($(this).find('.inb-count').text()!='' && $(this).find('.inb-count').text()!=undefined) {
+                        resIfneedbe.push($(this).find('.inb-count').html())
+                    } else {
+                        resIfneedbe.push(0);
+                    }
+                    if($(this).find('.yes-count').text()!='' && $(this).find('.yes-count').text()!=undefined) {
+                        resYes.push($(this).find('.yes-count').html())
+                    } else {
+                        resYes.push(0);
+                    }
+                });
+                var cols = [
+                {foreach $slots as $id=>$slot}
+                    $('<div/>').html('{$slot->title|markdown:true}').text(), 
+                {/foreach}
+                ];
+
+                resIfneedbe.shift(); resIfneedbe.pop();
+                resYes.shift(); resYes.pop();
+
+                var barChartData = {
+                    labels : cols,
+                    datasets : [
+                    {
+                        label: "{__('Generic', 'Ifneedbe')}",
+                        fillColor : "rgba(255,207,79,0.8)",
+                        highlightFill: "rgba(255,207,79,1)",
+                        barShowStroke : false,
+                        data : resIfneedbe
+                    },
+                    {
+                        label: "{__('Generic', 'Yes')}",
+                        fillColor : "rgba(103,120,53,0.8)",
+                        highlightFill : "rgba(103,120,53,1)",
+                        barShowStroke : false,
+                        data : resYes
+                    }
+                    ]
+                };
+
+                var ctx = document.getElementById("Chart").getContext("2d");
+                window.myBar = new Chart(ctx).StackedBar(barChartData, {
+                    responsive : true
+                });
+                return false;
+            });
+        });
+    </script>
+    
+{/if}
+
+
+
 {if !$hidden}
    {* Best votes listing *}
    {$max = max($best_choices['y'])}
@ -184,12 +259,12 @@
        <div class="row">
        {if $count_bests == 1}
        <div class="col-sm-12"><h3>{__('Poll results', 'Best choice')}</h3></div>
-        <div class="col-sm-6 col-sm-offset-3 alert alert-success">
-            <p><span class="glyphicon glyphicon-star text-warning"></span>{__('Poll results', 'The best choice at this time is:')}</p>
+        <div class="col-sm-6 col-sm-offset-3 alert alert-info">
+            <p><i class="glyphicon glyphicon-star text-info"></i> {__('Poll results', 'The best choice at this time is:')}</p>
            {elseif $count_bests > 1}
            <div class="col-sm-12"><h3>{__('Poll results', 'Best choices')}</h3></div>
-            <div class="col-sm-6 col-sm-offset-3 alert alert-success">
-                <p><span class="glyphicon glyphicon-star text-warning"></span>{__('Poll results', 'The bests choices at this time are:')}</p>
+            <div class="col-sm-6 col-sm-offset-3 alert alert-info">
+                <p><i class="glyphicon glyphicon-star text-info"></i> {__('Poll results', 'The bests choices at this time are:')}</p>
                {/if}


@ -206,4 +281,4 @@
            </div>
        </div>
    {/if}
-{/if}
+{/if}
--- a/tpl/part/vote_table_date.tpl
+++ b/tpl/part/vote_table_date.tpl
@ -20,7 +20,7 @@
                                <a href="{poll_url id=$admin_poll_id admin=true action='delete_column' action_value=$slot->day|cat:'@'|cat:$moment}"
                                   class="btn btn-link btn-sm"
                                   title="{__('adminstuds', 'Remove the column')} {$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}">
-                                    <span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Genric', 'Remove')}</span>
+                                    <i class="glyphicon glyphicon-remove text-danger"></i><span class="sr-only">{__('Generic', 'Remove')}</span>
                                </a>
                            </td>
                            {$headersDCount = $headersDCount+1}
@ -29,7 +29,7 @@
                    <td>
                        <a href="{poll_url id=$admin_poll_id admin=true action='add_slot' action_value=true}"
                           class="btn btn-link btn-sm" title="{__('adminstuds', 'Add a column')} {$slot->day|html}">
-                            <span class="glyphicon glyphicon-plus text-success"></span><span class="sr-only">{__('Poll results', 'Add a column')}</span>
+                            <i class="glyphicon glyphicon-plus text-success"></i><span class="sr-only">{__('Poll results', 'Add a column')}</span>
                        </a>
                    </td>
                </tr>
@ -92,7 +92,7 @@
                <tr class="hidden-print">
                    <td class="bg-info" style="padding:5px">
                        <div class="input-group input-group-sm" id="edit">
-                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
+                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input type="hidden" name="edited_vote" value="{$vote->uniqId}"/>
                            <input type="text" id="name" name="name" value="{$vote->name|html}" class="form-control" title="{__('Generic', 'Your name')}" placeholder="{__('Generic', 'Your name')}" />
                        </div>
@ -105,19 +105,19 @@
                                <li class="yes">
                                    <input type="radio" id="y-choice-{$k}" name="choices[{$k}]" value="2" {if $choice==2}checked {/if}/>
                                    <label class="btn btn-default btn-xs" for="y-choice-{$k}" title="{__('Poll results', 'Vote yes for')|html} {$slots_raw[$k]}">
-                                        <span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Yes')}</span>
+                                        <i class="glyphicon glyphicon-ok"></i><span class="sr-only">{__('Generic', 'Yes')}</span>
                                    </label>
                                </li>
                                <li class="ifneedbe">
                                    <input type="radio" id="i-choice-{$k}" name="choices[{$k}]" value="1" {if $choice==1}checked {/if}/>
                                    <label class="btn btn-default btn-xs" for="i-choice-{$k}" title="{__('Poll results', 'Vote ifneedbe for')|html} {$slots_raw[$k]}">
-                                        (<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
+                                        (<i class="glyphicon glyphicon-ok"></i>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
                                    </label>
                                </li>
                                <li class="no">
                                    <input type="radio" id="n-choice-{$k}" name="choices[{$k}]" value="0" {if $choice==0}checked {/if}/>
                                    <label class="btn btn-default btn-xs" for="n-choice-{$k}" title="{__('Poll results', 'Vote no for')|html} {$slots_raw[$k]}">
-                                        <span class="glyphicon glyphicon-ban-circle"></span><span class="sr-only">{__('Generic', 'No')}</span>
+                                        <i class="glyphicon glyphicon-ban-circle"></i><span class="sr-only">{__('Generic', 'No')}</span>
                                    </label>
                                </li>
                            </ul>
@ -136,11 +136,11 @@
                    {foreach $vote->choices as $k=>$choice}

                        {if $choice==2}
-                            <td class="bg-success text-success" headers="M{$headersM[$k]} D{$headersD[$k]} H{$k}"><span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Yes')}</span></td>
+                            <td class="bg-success text-success" headers="M{$headersM[$k]} D{$headersD[$k]} H{$k}"><i class="glyphicon glyphicon-ok"></i><span class="sr-only">{__('Generic', 'Yes')}</span></td>
                        {elseif $choice==1}
-                            <td class="bg-warning text-warning" headers="M{$headersM[$k]} D{$headersD[$k]} H{$k}">(<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span></td>
+                            <td class="bg-warning text-warning" headers="M{$headersM[$k]} D{$headersD[$k]} H{$k}">(<i class="glyphicon glyphicon-ok"></i>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span></td>
                        {else}
-                            <td class="bg-danger" headers="M{$headersM[$k]} D{$headersD[$k]} H{$k}"><span class="sr-only">{__('Generic', 'No')}</span></td>
+                            <td class="bg-danger text-danger" headers="M{$headersM[$k]} D{$headersD[$k]} H{$k}"><i class="glyphicon glyphicon-ban-circle"></i><span class="sr-only">{__('Generic', 'No')}</span></td>
                        {/if}

                    {/foreach}
@ -148,13 +148,13 @@
                    {if $active && !$expired && ($poll->editable == constant('Framadate\Editable::EDITABLE_BY_ALL') or $admin)}
                        <td class="hidden-print">
                            <a href="{if $admin}{poll_url id=$poll->admin_id vote_id=$vote->uniqId admin=true}{else}{poll_url id=$poll->id vote_id=$vote->uniqId}{/if}" class="btn btn-default btn-sm" title="{__('Poll results', 'Edit the line:')|escape} {$vote->name|html}">
-                                <span class="glyphicon glyphicon-pencil"></span><span class="sr-only">{__('Generic', 'Edit')}</span>
+                                <i class="glyphicon glyphicon-pencil"></i><span class="sr-only">{__('Generic', 'Edit')}</span>
                            </a>
                            {if $admin}
                                <a href="{poll_url id=$admin_poll_id admin=true action='delete_vote' action_value=$vote->id}"
                                   class="btn btn-default btn-sm"
                                   title="{__('Poll results', 'Remove the line:')} {$vote->name|html}">
-                                    <span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Generic', 'Remove')}</span>
+                                    <i class="glyphicon glyphicon-remove text-danger"></i><span class="sr-only">{__('Generic', 'Remove')}</span>
                                </a>
                            {/if}
                        </td>
@ -171,7 +171,7 @@
                <tr id="vote-form" class="hidden-print">
                    <td class="bg-info" style="padding:5px">
                        <div class="input-group input-group-sm">
-                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
+                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input type="text" id="name" name="name" class="form-control" title="{__('Generic', 'Your name')}" placeholder="{__('Generic', 'Your name')}" />
                        </div>
                    </td>
@ -183,19 +183,19 @@
                                    <li class="yes">
                                        <input type="radio" id="y-choice-{$i}" name="choices[{$i}]" value="2" />
                                        <label class="btn btn-default btn-xs" for="y-choice-{$i}" title="{__('Poll results', 'Vote yes for')|html} {$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}">
-                                            <span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Yes')}</span>
+                                            <i class="glyphicon glyphicon-ok"></i><span class="sr-only">{__('Generic', 'Yes')}</span>
                                        </label>
                                    </li>
                                    <li class="ifneedbe">
                                        <input type="radio" id="i-choice-{$i}" name="choices[{$i}]" value="1" />
                                        <label class="btn btn-default btn-xs" for="i-choice-{$i}" title="{__('Poll results', 'Vote ifneedbe for')|html} {$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}">
-                                            (<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
+                                            (<i class="glyphicon glyphicon-ok"></i>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
                                        </label>
                                    </li>
                                    <li class="no">
                                        <input type="radio" id="n-choice-{$i}" name="choices[{$i}]" value="0" checked/>
-                                        <label class="btn btn-default btn-xs" for="n-choice-{$i}" title="{__('Poll results', 'Vote no for')|html} {$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}">
-                                            <span class="glyphicon glyphicon-ban-circle"></span><span class="sr-only">{__('Generic', 'No')}</span>
+                                        <label class="btn btn-default btn-xs startunchecked" for="n-choice-{$i}" title="{__('Poll results', 'Vote no for')|html} {$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}">
+                                            <i class="glyphicon glyphicon-ban-circle"></i><span class="sr-only">{__('Generic', 'No')}</span>
                                        </label>
                                    </li>
                                </ul>
@ -213,13 +213,15 @@
                {$max = max($best_choices['y'])}
                {if $max > 0}
                    <tr id="addition">
-                        <td>{__('Poll results', 'Addition')}</td>
+                        <td>{__('Poll results', 'Addition')}<br/>{$votes|count} {if ($votes|count)==1}{__('Poll results', 'polled user')}{else}{__('Poll results', 'polled users')}{/if}</td>
                        {foreach $best_choices['y'] as $i=>$best_moment}
                            {if $max == $best_moment}
                                {$count_bests = $count_bests +1}
-                                <td class="text-danger"><i class="glyphicon glyphicon-star text-warning"></i>{$best_moment|html}{if $best_choices['inb'][$i]>0}<span class="very-small text-muted"> (+{$best_choices['inb'][$i]|html})</span>{/if}</td>
+                                <td><i class="glyphicon glyphicon-star text-info"></i><span class="yes-count">{$best_moment|html}</span>{if $best_choices['inb'][$i]>0}<br/><span class="small text-muted">(+<span class="inb-count">{$best_choices['inb'][$i]|html}</span>)</span>{/if}</td>
                            {elseif $best_moment > 0}
-                                <td>{$best_moment|html}{if $best_choices['inb'][$i]>0}<span class="very-small text-muted"> (+{$best_choices['inb'][$i]|html})</span>{/if}</td>
+                                <td><span class="yes-count">{$best_moment|html}</span>{if $best_choices['inb'][$i]>0}<br/><span class="small text-muted">(+<span class="inb-count">{$best_choices['inb'][$i]|html}</span>)</span>{/if}</td>
+                            {elseif $best_choices['inb'][$i]>0}
+                                <td><br/><span class="small text-muted">(+<span class="inb-count">{$best_choices['inb'][$i]|html}</span>)</span></td>
                            {else}
                                <td></td>
                            {/if}
@ -232,6 +234,79 @@
    </form>
 </div>

+{if !$hidden && $max > 0}
+    <div class="row" aria-hidden="true">
+        <div class="col-xs-12">
+            <p class="text-center" id="showChart">
+                <button class="btn btn-lg btn-default">
+                    <span class="fa fa-fw fa-bar-chart"></span> {__('Poll results', 'Display the chart of the results')}
+                </button>
+            </p>
+        </div>
+    </div>
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $('#showChart').on('click', function() {
+                $('#showChart').after("<h3>{__('Poll results', 'Chart')}</h3><canvas id=\"Chart\"></canvas>");
+                $('#showChart').remove();
+                               
+                var resIfneedbe = [];
+                var resYes = [];
+            
+                $('#addition').find('td').each(function (colIndex) {
+                    if($(this).find('.inb-count').text()!='') {
+                        resIfneedbe.push($(this).find('.inb-count').text())
+                    } else {
+                        resIfneedbe.push(0);
+                    }
+                    if($(this).find('.yes-count').text()!='') {
+                        resYes.push($(this).find('.yes-count').text())
+                    } else {
+                        resYes.push(0);
+                    }
+                });
+                var cols = [
+                {foreach $slots as $slot}
+                    {foreach $slot->moments as $moment}
+                        $('<div/>').html('{$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}').text(), 
+                    {/foreach}
+                {/foreach}
+                ];
+
+                resIfneedbe.shift(); resIfneedbe.pop();
+                resYes.shift(); resYes.pop();
+
+                var barChartData = {
+                    labels : cols,
+                    datasets : [
+                    {
+                        label: "{__('Generic', 'Ifneedbe')}",
+                        fillColor : "rgba(255,207,79,0.8)",
+                        highlightFill: "rgba(255,207,79,1)",
+                        barShowStroke : false,
+                        data : resIfneedbe
+                    },
+                    {
+                        label: "{__('Generic', 'Yes')}",
+                        fillColor : "rgba(103,120,53,0.8)",
+                        highlightFill : "rgba(103,120,53,1)",
+                        barShowStroke : false,
+                        data : resYes
+                    }
+                    ]
+                };
+
+                var ctx = document.getElementById("Chart").getContext("2d");
+                window.myBar = new Chart(ctx).StackedBar(barChartData, {
+                    responsive : true
+                });
+                return false;
+            });
+        });
+    </script>
+    
+{/if}
+
 {if !$hidden}
    {* Best votes listing *}
    {$max = max($best_choices['y'])}
@ -239,12 +314,12 @@
        <div class="row">
        {if $count_bests == 1}
        <div class="col-sm-12"><h3>{__('Poll results', 'Best choice')}</h3></div>
-        <div class="col-sm-6 col-sm-offset-3 alert alert-success">
-            <p><span class="glyphicon glyphicon-star text-warning"></span>{__('Poll results', 'The best choice at this time is:')}</p>
+        <div class="col-sm-6 col-sm-offset-3 alert alert-info">
+            <p><i class="glyphicon glyphicon-star text-info"></i> {__('Poll results', 'The best choice at this time is:')}</p>
            {elseif $count_bests > 1}
            <div class="col-sm-12"><h3>{__('Poll results', 'Best choices')}</h3></div>
-            <div class="col-sm-6 col-sm-offset-3 alert alert-success">
-                <p><span class="glyphicon glyphicon-star text-warning"></span>{__('Poll results', 'The bests choices at this time are:')}</p>
+            <div class="col-sm-6 col-sm-offset-3 alert alert-info">
+                <p><i class="glyphicon glyphicon-star text-info"></i> {__('Poll results', 'The bests choices at this time are:')}</p>
                {/if}


@ -263,4 +338,4 @@
            </div>
        </div>
    {/if}
-{/if}
+{/if}
--- a/tpl/studs.tpl
+++ b/tpl/studs.tpl
@ -1,6 +1,8 @@
 {extends file='page.tpl'}

 {block name="header"}
+    <script src="{"js/Chart.min.js"|resource}" type="text/javascript"></script>
+    <script src="{"js/Chart.StackedBar.js"|resource}" type="text/javascript"></script>
    <script src="{"js/app/studs.js"|resource}" type="text/javascript"></script>
 {/block}

@ -63,4 +65,4 @@

 {include 'part/comments.tpl' active=$poll->active comments=$comments}

-{/block}
+{/block}