Charts + Addition + little fixes

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;

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);
+		}
+	});
+}));

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",

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",

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",

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 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:": "Les meilleurs choix pour l'instant sont :",
+    "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",

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",

tpl/part/vote_table_classic.tpl

@@ -16,7 +16,7 @@
                         <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>
+                                <span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Generic', 'Remove')}</span>
                             </a>
                             </td>
                     {/foreach}
@@ -46,7 +46,7 @@
                         <div class="input-group input-group-sm" id="edit">
                             <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></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>
+                                        <span class="glyphicon glyphicon-ok"></span><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>
+                                        (<span class="glyphicon glyphicon-ok"></span>)<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>
+                                        <span class="glyphicon glyphicon-ban-circle"></span><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,80 @@
     </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();
+                console.log(resYes);
+                console.log(resIfneedbe);
+                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 +260,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">
+        <div class="col-sm-6 col-sm-offset-3 alert alert-info">
-            <p><span class="glyphicon glyphicon-star text-warning"></span>{__('Poll results', 'The best choice at this time is:')}</p>
+            <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">
+            <div class="col-sm-6 col-sm-offset-3 alert alert-info">
-                <p><span class="glyphicon glyphicon-star text-warning"></span>{__('Poll results', 'The bests choices at this time are:')}</p>
+                <p><i class="glyphicon glyphicon-star text-info"></i> {__('Poll results', 'The bests choices at this time are:')}</p>
                 {/if}
 
 

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>
+                                    <span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Generic', 'Remove')}</span>
                                 </a>
                             </td>
                             {$headersDCount = $headersDCount+1}
@@ -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,80 @@
     </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();
+                console.log(resYes);
+                console.log(resIfneedbe);
+                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 +315,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">
+        <div class="col-sm-6 col-sm-offset-3 alert alert-info">
-            <p><span class="glyphicon glyphicon-star text-warning"></span>{__('Poll results', 'The best choice at this time is:')}</p>
+            <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">
+            <div class="col-sm-6 col-sm-offset-3 alert alert-info">
-                <p><span class="glyphicon glyphicon-star text-warning"></span>{__('Poll results', 'The bests choices at this time are:')}</p>
+                <p><i class="glyphicon glyphicon-star text-info"></i> {__('Poll results', 'The bests choices at this time are:')}</p>
                 {/if}
 
 

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}