diff --git a/sloth/app/templates/app/charts.html b/sloth/app/templates/app/charts.html
index 676e526..8597c04 100644
--- a/sloth/app/templates/app/charts.html
+++ b/sloth/app/templates/app/charts.html
@@ -1,311 +1,432 @@
+<script src='https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'></script>
+<script src='/static/js/echarts-wordcloud.js'></script>
+<script>
+	let x = [];
+	let y = [];
+	let originalData = {{ data|safe }}
+	let data = [];
+	let color = [];
+	{% for x, serie in data.series.items %}
+		x.push('{{ x }}');
+		{% for y, value, color in serie %}
+			{% if forloop.parentloop.first %}
+				y.push('{{ y }}');
+				data[{{ forloop.counter0 }}] = [];
+				color.push('{{ color }}');
+			{% endif %}
+			data[{{ forloop.counter0 }}].push({{ value }})
+		{% endfor %}
+	{% endfor %}
+</script>
+<style>
+	div{display: inline-block;}
+</style>
 
+<div id="main1" style="width: 600px;height:400px;"></div>
+<div id="main2" style="width: 600px;height:400px;"></div>
+<div id="main3" style="width: 600px;height:400px;"></div>
+<div id="main4" style="width: 600px;height:400px;"></div>
+<div id="main5" style="width: 600px;height:400px;"></div>
+<div id="main6" style="width: 600px;height:400px;"></div>
+<div id="main7" style="width: 600px;height:400px;"></div>
+<div id="main8" style="width: 600px;height:400px;"></div>
+<div id="main9" style="width: 600px;height:400px;"></div>
+<div id="main10" style="width: 600px;height:400px;"></div>
+<div id="main11" style="width: 600px;height:400px;"></div>
+<div id="main12" style="width: 600px;height:400px;"></div>
+<div id="main13" style="width: 600px;height:400px;"></div>
+<div id="main14" style="width: 600px;height:400px;"></div>
 
-	 <script src='https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'></script>
-	 <script src='/static/js/echarts-wordcloud.js'></script>
-	 <script>
-		 var x = [];
-		 var y = [];
-		 var data = [];
-		 {% for x, serie in data.series.items %}
-		 	x.push('{{ x }}');
-		 	var row = []
-		 	{% for y, value, color in serie %}
-		 		y.push('{{ y }}');
-		 		row.push({{ value }});
-		 	{% endfor %}
-		 	data[{{ forloop.counter0 }}] = row;
-		 {% endfor %}
-     </script>
-	 <style>
-		 div{display: inline-block;}
-     </style>
-
-		 <div id="main1" style="width: 600px;height:400px;"></div>
-		 <div id="main2" style="width: 600px;height:400px;"></div>
-		 <div id="main3" style="width: 600px;height:400px;"></div>
-		 <div id="main4" style="width: 600px;height:400px;"></div>
-		 <div id="main5" style="width: 600px;height:400px;"></div>
-		 <div id="main6" style="width: 600px;height:400px;"></div>
-		 <div id="main7" style="width: 600px;height:400px;"></div>
-		 <div id="main8" style="width: 600px;height:400px;"></div>
-		 <div id="main9" style="width: 600px;height:400px;"></div>
-		 <div id="main10" style="width: 600px;height:400px;"></div>
-		 <div id="main11" style="width: 600px;height:400px;"></div>
-		 <div id="main12" style="width: 600px;height:400px;"></div>
-		 <div id="main13" style="width: 600px;height:400px;"></div>
-		 <div id="main14" style="width: 600px;height:400px;"></div>
-
- <script>
-	 // Stack Bar
-	 var series = [];
-	 for(var i=0; i<y.length; i++) series.push({name: y[i], type: 'bar', stack: 'total', label: { show: true }, emphasis: {focus: 'series' },data: data[i]});
-	 var option = {title: {text: 'Stacked Bar'}, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }}, legend: {}, xAxis: { type: 'value' }, yAxis: { type: 'category', data: x }, series: series};
-	 echarts.init(document.getElementById('main1')).setOption(option);
-	 // Stack Line
-	 var series = [];
-	 for(var i=0; i<y.length; i++) series.push({name: y[i], type: 'line', stack: 'total', label: { show: true }, emphasis: {focus: 'series' },data: data[i]});
-	 option = {title: {text: 'Stacked Line'}, tooltip: {trigger: 'axis'}, legend: {data: y }, toolbox: { feature: { saveAsImage: {} } }, xAxis: {type: 'category', boundaryGap: false, data: x }, yAxis: {type: 'value'}, series: series};
-	 echarts.init(document.getElementById('main4')).setOption(option);
-	 // Line
-	 option = {title: {text: 'Line'}, xAxis: {type: 'category',data: x}, yAxis: {type: 'value'}, series: [{data: data[0], type: 'line'}]};
-	 echarts.init(document.getElementById('main2')).setOption(option);
-	 // Area
-	 option = {title: {text: 'Area'}, xAxis: {type: 'category',data: x}, yAxis: {type: 'value'}, series: [{data: data[0], type: 'line', areaStyle: {}}]};
-	 echarts.init(document.getElementById('main3')).setOption(option);
-	 // StackArea
-	 var series = [];
-	 for(var i=0; i<y.length; i++) series.push({name: y[i], type: 'line', stack: 'total', areaStyle: {}, label: { show: true }, emphasis: {focus: 'series' },data: data[i]});
-	 option = {title: {text: 'Stacked Line'}, tooltip: {trigger: 'axis'}, legend: {data: y }, toolbox: { feature: { saveAsImage: {} } }, xAxis: {type: 'category', boundaryGap: false, data: x }, yAxis: {type: 'value'}, series: series};
-	 echarts.init(document.getElementById('main5')).setOption(option);
-	 // Bar
-	 option = {title: {text: 'Stacked Bar'}, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }}, legend: {}, xAxis: {type: 'category',data: x},yAxis: {type: 'value'},series: [{data: data[0],type: 'bar'}]};
-	 echarts.init(document.getElementById('main6')).setOption(option);
-	 // Radial
-	 option = {title: [{ text: 'Radial Bar' } ], polar: { radius: [30, '80%'] }, radiusAxis: { max: 500 }, angleAxis: { type: 'category', data: x, startAngle: 75}, tooltip: {}, series: {type: 'bar', data: data[0],coordinateSystem: 'polar',label: {show: true,position: 'middle',formatter: '{b} {c}'} },animation: true};
-	 echarts.init(document.getElementById('main7')).setOption(option);
-	 // Horizontal Bars
-	 var series = [];
-	 for(var i=0; i<y.length; i++) series.push({name: y[i], type: 'bar', label: { show: true }, emphasis: {focus: 'series' },data: data[i]});
-	 option = {title: { text: 'Horizontal Bars' }, tooltip: {trigger: 'axis', axisPointer: {type: 'shadow' }},legend: {}, grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value',boundaryGap: [0, 0.01]},yAxis: {type: 'category',data: x},series: series};
-	 echarts.init(document.getElementById('main8')).setOption(option);
-  	 // Vertical Bars
-  	 var series = [];
-  	 for(var i=0; i<y.length; i++) series.push({name: y[i], type: 'bar', label: { show: true }, emphasis: {focus: 'series' },data: data[i]});
-  	 option = {title: { text: 'Vertical Bars' }, tooltip: {trigger: 'axis', axisPointer: {type: 'shadow' }},legend: {}, grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},yAxis: {type: 'value',boundaryGap: [0, 0.01]},xAxis: {type: 'category',data: x},series: series};
-  	 echarts.init(document.getElementById('main9')).setOption(option);
-  	 // Pie
-	 var values = [];
-	 for(var i=0; i<x.length; i++) values.push({ value: data[0][i], name: x[i]}); 
-  	 var serie = {name: '',type: 'pie',radius: '50%',data: values,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}};
-     var series = [serie];
-	 option = {title: {text: 'Pie', subtext: '', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: series};
-  	 echarts.init(document.getElementById('main10')).setOption(option);
-  	 // Donut
-	 var values = [];
-	 for(var i=0; i<x.length; i++) values.push({ value: data[0][i], name: x[i]}); 
-  	 var serie = {name: '',type: 'pie',radius: ['40%', '70%'],data: values,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}};
-     var series = [serie];
-	 option = {title: {text: 'Donut', subtext: '', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: series};
-  	 echarts.init(document.getElementById('main11')).setOption(option);
+<script>
+    const LINE_CHART = 'line';
+    const STACKED_LINE_CHART = 'stacked_line';
+    const AREA_CHART = 'area';
+    const STACKED_ARE_CHART = 'stacked_area';
+    const VERTICAL_BAR_CHART = 'vertical_bar';
+    const STACKED_VERTICAL_BAR_CHART = 'stacked_vertical_bar';
+    const HORIZONTAL_BAR_CHART = 'horizontal_bar';
+    const STACKED_HORIZONTAL_BAR_CHART = 'stacked_horizontal_bar';
+    const PIE_CHART = 'pie';
+    const DONUT_CHART = 'donut';
+    const RADIAL_CHART = 'radial';
 
-	 // Calendar
-	 const graphData = [['2023-02-01', 260], ['2023-02-04', 200], ['2023-02-09', 279], ['2023-02-13', 847], ['2023-02-18', 241], ['2023-02-23', 411], ['2023-02-27', 985]
-	 ];
-	 const links = graphData.map(function (item, idx) {
-	   return {
-	     source: idx,
-	     target: idx + 1
-	   };
-	 });
-	 links.pop();
-	 option = {
-	   tooltip: {
-	     position: 'top'
-	   },
-	   visualMap: [
-	     {
-	       min: 0,
-	       max: 1000,
-	       calculable: true,
-	       seriesIndex: [0],
-	       orient: 'horizontal',
-	       left: 0,
-	       top: 300
-	     }
-	   ],
-	   calendar: [
-	     {
-	       orient: 'vertical',
-	       yearLabel: {
-	         margin: 40
-	       },
-	       monthLabel: {
-	         margin: 20
-	       },
-	       dayLabel: {
-	             firstDay: 1,
-	         },
-	       cellSize: 40,
-	       top: 70,
-	       range: '2023-02'
-	     }
-	   ],
-	   series: [
-	     {
-	       type: 'effectScatter',
-	       coordinateSystem: 'calendar',
-	       calendarIndex: 0,
-	       symbolSize: function (val) {
-	         return val[1] / 40;
-	       },
-	       data: graphData,
-	       label: {
-	             show: true,
-	             formatter: function (params) {
-	                 var d = echarts.number.parseDate(params.value[0]);
-	                 return d.getDate();
-	             },
-	             color: '#DDD'
-	         }
-	     }
-	   ]
-	 };
-	 echarts.init(document.getElementById('main12')).setOption(option);
-	 // Words
+    function getParameters(type) {
+        let chartType = '';
+        let area = false;
+        let horizontal = false;
+        let stacked = false;
+        switch (type) {
+            case LINE_CHART:
+                chartType = 'line';
+                break
+            case STACKED_LINE_CHART:
+                chartType = 'line';
+                stacked = true;
+                break
+            case AREA_CHART:
+                chartType = 'line';
+                area = true;
+                break
+            case STACKED_ARE_CHART:
+                chartType = 'line';
+                area = true;
+                stacked = true;
+                break
+            case RADIAL_CHART:
+            case VERTICAL_BAR_CHART:
+                chartType = 'bar';
+                break
+            case STACKED_VERTICAL_BAR_CHART:
+                chartType = 'bar';
+                stacked = true;
+                break
+            case HORIZONTAL_BAR_CHART:
+                chartType = 'bar';
+                horizontal = true;
+                break
+            case STACKED_HORIZONTAL_BAR_CHART:
+                chartType = 'bar';
+                horizontal = true;
+                stacked = true;
+                break
+            case PIE_CHART:
+            case DONUT_CHART:
+                chartType = 'pie';
+                break;
+        }
+        return [chartType, area, horizontal, stacked];
+    }
 
-	 var chart = echarts.init(document.getElementById('main13'));
+    function getOption(title='', type=LINE_CHART) {
+        let series = [];
+        let [chartType, area, horizontal, stacked] = getParameters(type);
+        if ([PIE_CHART, DONUT_CHART, RADIAL_CHART].includes(type)) {
+            let values = [];
+            for (let i = 0; i < y.length; i++) {
+                let total = 0;
+                for (let j = 0; j < x.length; j++) {
+                    total += data[i][j];
+                }
+                values.push({value: total, name: y[i]});
+            }
+            let serie = {
+                type: chartType,
+                data: values,
+            }
+            if (type == PIE_CHART) {
+                serie['radius'] = '50%';
+            } else if (type == DONUT_CHART) {
+                serie['radius'] = ['40%', '70%'];
+            } else if (type == RADIAL_CHART) {
+                serie['coordinateSystem'] = 'polar';
+            }
+            series.push(serie);
+        } else {
+            for (let i = 0; i < y.length; i++) {
+                let serie = {
+                    name: y[i],
+                    type: chartType,
+                    label: {show: true},
+                    emphasis: {focus: 'series'},
+                    data: data[i],
+                }
+                if (stacked) {
+                    serie['stack'] = 'total';
+                }
+                if (area) {
+                    serie['areaStyle'] = {};
+                }
+                series.push(serie);
+            }
+        }
+        let option = {
+            title: {text: title},
+            tooltip: {trigger: 'axis'},
+            legend: {data: y},
+            toolbox: {feature: {saveAsImage: { title: 'Salvar como Imagem' }}},
+            series: series,
+            color: color,
+        }
+        if ([PIE_CHART, DONUT_CHART].includes(type)) {
+            option['title'] = {text: title, subtext: '', left: 'center'};
+            option['tooltip'] = {trigger: 'item'};
+            option['legend'] = {orient: 'vertical', left: 'left'};
+        } else if (type == RADIAL_CHART) {
+            option = {
+                title: {text: title},
+                tooltip: {trigger: 'axis'},
+                polar: {radius: [30, '80%']},
+                radiusAxis: { },
+                angleAxis: {type: 'category', data: y, startAngle: 75},
+                toolbox: {feature: {saveAsImage: { title: 'Salvar como Imagem' }}},
+                series: series,
+                color: color,
+            };
+        } else {
+            option['xAxis'] = {type: 'category', data: x};
+            option['yAxis']= {type: 'value'};
+            if (horizontal) {
+                option['xAxis'] = {type: 'value'}
+                option['yAxis']= {type: 'category', data: x}
+                option['grid'] = {left: '3%', right: '4%', bottom: '3%', containLabel: true}
+            }
+        }
+        return option;
+    }
+    let option;
 
-	             var option = {
-	                 tooltip: {},
-	          title : {
-	           text: 'Red - Already Over - Lyrics',
-	         },
-	         toolbox: {
-	           feature: {
-	             saveAsImage: {}
-	           }
-	         },
-	                 series: [ {
-	                     type: 'wordCloud',
-	                     gridSize: 3,
-	                     sizeRange: [15, 55],
-	                     rotationRange: [-45, 45],
-	                     shape: 'pentagon',
-	                     width: 600,
-	                     height: 400,
-	                     textStyle: {
-	                         normal: {
-	                             color: function () {
-	                                 return 'rgb(' + [
-	                                     Math.round(Math.random() * 160),
-	                                     Math.round(Math.random() * 160),
-	                                     Math.round(Math.random() * 160)
-	                                 ].join(',') + ')';
-	                             }
-	                         },
-	                         emphasis: {
-	                             shadowBlur: 10,
-	                             shadowColor: '#333'
-	                         }
-	                     },
-	                     data: [
-	                         {
-	                             name: 'Already Over',
-	                             value: 10000,
-	                             textStyle: {
-	                                 normal: {
-	                                     color: 'black'
-	                                 },
-	                                 emphasis: {
-	                                     color: 'blue'
-	                                 }
-	                             }
-	                         },
-	                         {
-	                             name: 'now',
-	                             value: 4055
-	                         },
-	                         {
-	                             name: 'know',
-	                             value: 2467
-	                         },
-	                         {
-	                             name: 'reaching',
-	                             value: 2244
-	                         },
-	                         {
-	                             name: 'nothing',
-	                             value: 1898
-	                         },
-	                         {
-	                             name: 'letting',
-	                             value: 1484
-	                         },
-	                         {
-	                             name: 'fall',
-	                             value: 1112
-	                         },
-	                         {
-	                             name: 'give',
-	                             value: 965
-	                         },
-	                         {
-	                             name: 'loving',
-	                             value: 847
-	                         },
-	                         {
-	                             name: 'go',
-	                             value: 582
-	                         },
-	                         {
-	                             name: 'left',
-	                             value: 555
-	                         },
-	                         {
-	                             name: 'lose',
-	                             value: 550
-	                         },
-	                         {
-	                             name: 'everything',
-	                             value: 462
-	                         },
-	                         {
-	                             name: 'never',
-	                             value: 366
-	                         },
-	                         {
-	                             name: 'breaking',
-	                             value: 360
-	                         },
-	                         {
-	                             name: 'slowly',
-	                             value: 282
-	                         },
-	                         {
-	                             name: 'all',
-	                             value: 273
-	                         },
-	                         {
-	                             name: 'here',
-	                             value: 273
-	                         },
-	                         {
-	                             name: 'skin',
-	                             value: 9973
-	                         },
-	                         {
-	                             name: 'you',
-	                             value: 273
-	                         },
-	                         {
-	                             name: 'resist',
-	                             value: 273
-	                         },
-	                         {
-	                             name: 'again',
-	                             value: 273
-	                         },
-	                         {
-	                             name: 'suffocating',
-	                             value: 273
-	                         },
-	                         {
-	                             name: 'defense',
-	                             value: 273
-	                         },
-	                         {
-	                             name: 'cost',
-	                             value: 273
-	                         },
-	                         {
-	                             name: 'fading',
-	                             value: 265
-	                         }
-	                     ]
-	                 } ]
-	             };
+    option = getOption('Line', originalData.chart);
+    echarts.init(document.getElementById('main1')).setOption(option);
 
-	             chart.setOption(option);
+    // option = getOption('Line', LINE_CHART);
+    // echarts.init(document.getElementById('main1')).setOption(option);
+    //
+    // option = getOption('Stacked Line', STACKED_LINE_CHART);
+    // echarts.init(document.getElementById('main2')).setOption(option);
+    //
+    // option = getOption('Area', AREA_CHART);
+    // echarts.init(document.getElementById('main3')).setOption(option);
+    //
+    // option = getOption('Stacked Area', STACKED_ARE_CHART);
+    // echarts.init(document.getElementById('main4')).setOption(option);
+    //
+    // option = getOption('Vertical Bars', VERTICAL_BAR_CHART);
+    // echarts.init(document.getElementById('main5')).setOption(option);
+    //
+    // option = getOption('Stacked Vertical Bars', STACKED_VERTICAL_BAR_CHART);
+    // echarts.init(document.getElementById('main6')).setOption(option);
+    //
+    // option = getOption('Horizontal Bars', HORIZONTAL_BAR_CHART);
+    // echarts.init(document.getElementById('main7')).setOption(option);
+    //
+    // option = getOption('Stacked Horizontal Bar', STACKED_HORIZONTAL_BAR_CHART);
+    // echarts.init(document.getElementById('main8')).setOption(option);
+    //
+    // option = getOption('Pie', PIE_CHART);
+    // echarts.init(document.getElementById('main9')).setOption(option);
+    //
+    // option = getOption('Donut', DONUT_CHART);
+    // echarts.init(document.getElementById('main10')).setOption(option);
+    //
+    // option = getOption('Radial Bar', RADIAL_CHART);
+    // echarts.init(document.getElementById('main11')).setOption(option);
 
+	// // Calendar
+	// const graphData = [['2023-02-01', 260], ['2023-02-04', 200], ['2023-02-09', 279], ['2023-02-13', 847], ['2023-02-18', 241], ['2023-02-23', 411], ['2023-02-27', 985]];
+	// const links = graphData.map(function (item, idx) {
+	// 	return {
+	// 		source: idx,
+	// 		target: idx + 1
+	// 	};
+	// });
+	// links.pop();
+	// option = {
+	// 	tooltip: {
+	// 		position: 'top'
+	// 	},
+	// 	visualMap: [
+	// 		{
+	// 			min: 0,
+	// 			max: 1000,
+	// 			calculable: true,
+	// 			seriesIndex: [0],
+	// 			orient: 'horizontal',
+	// 			left: 0,
+	// 			top: 300
+	// 		}
+	// 	],
+	// 	calendar: [
+	// 		{
+	// 			orient: 'vertical',
+	// 			yearLabel: {
+	// 				margin: 40
+	// 			},
+	// 			monthLabel: {
+	// 				margin: 20
+	// 			},
+	// 			dayLabel: {
+	// 				firstDay: 1,
+	// 			},
+	// 			cellSize: 40,
+	// 			top: 70,
+	// 			range: '2023-02'
+	// 		}
+	// 	],
+	// 	series: [
+	// 		{
+	// 			type: 'effectScatter',
+	// 			coordinateSystem: 'calendar',
+	// 			calendarIndex: 0,
+	// 			symbolSize: function (val) {
+	// 				return val[1] / 40;
+	// 			},
+	// 			data: graphData,
+	// 			label: {
+	// 				show: true,
+	// 				formatter: function (params) {
+	// 					let d = echarts.number.parseDate(params.value[0]);
+	// 					return d.getDate();
+	// 				},
+	// 				color: '#DDD'
+	// 			}
+	// 		}
+	// 	], color: color
+	// };
+	// echarts.init(document.getElementById('main12')).setOption(option);
+    //
+	// // Words
+	// let chart = echarts.init(document.getElementById('main13'));
+	// option = {
+	// 	tooltip: {},
+	// 	title : {
+	// 		text: 'Red - Already Over - Lyrics',
+	// 	},
+	// 	toolbox: {
+	// 		feature: {
+	// 			saveAsImage: {}
+	// 		}
+	// 	},
+	// 	series: [
+	// 		{
+	// 			type: 'wordCloud',
+	// 			gridSize: 3,
+	// 			sizeRange: [15, 55],
+	// 			rotationRange: [-45, 45],
+	// 			shape: 'pentagon',
+	// 			width: 600,
+	// 			height: 400,
+	// 			textStyle: {
+	// 				normal: {
+	// 					color: function () {
+	// 						return 'rgb(' + [
+	// 							Math.round(Math.random() * 160),
+	// 							Math.round(Math.random() * 160),
+	// 							Math.round(Math.random() * 160)
+	// 						].join(',') + ')';
+	// 					}
+	// 				},
+	// 				emphasis: {
+	// 					shadowBlur: 10,
+	// 					shadowColor: '#333'
+	// 				}
+	// 			},
+	// 			data: [
+	// 				{
+	// 					name: 'Already Over',
+	// 					value: 10000,
+	// 					textStyle: {
+	// 						normal: {
+	// 							color: 'black'
+	// 						},
+	// 						emphasis: {
+	// 							color: 'blue'
+	// 						}
+	// 					}
+	// 				},
+	// 				{
+	// 					name: 'now',
+	// 					value: 4055
+	// 				},
+	// 				{
+	// 					name: 'know',
+	// 					value: 2467
+	// 				},
+	// 				{
+	// 					name: 'reaching',
+	// 					value: 2244
+	// 				},
+	// 				{
+	// 					name: 'nothing',
+	// 					value: 1898
+	// 				},
+	// 				{
+	// 					name: 'letting',
+	// 					value: 1484
+	// 				},
+	// 				{
+	// 					name: 'fall',
+	// 					value: 1112
+	// 				},
+	// 				{
+	// 					name: 'give',
+	// 					value: 965
+	// 				},
+	// 				{
+	// 					name: 'loving',
+	// 					value: 847
+	// 				},
+	// 				{
+	// 					name: 'go',
+	// 					value: 582
+	// 				},
+	// 				{
+	// 					name: 'left',
+	// 					value: 555
+	// 				},
+	// 				{
+	// 					name: 'lose',
+	// 					value: 550
+	// 				},
+	// 				{
+	// 					name: 'everything',
+	// 					value: 462
+	// 				},
+	// 				{
+	// 					name: 'never',
+	// 					value: 366
+	// 				},
+	// 				{
+	// 					name: 'breaking',
+	// 					value: 360
+	// 				},
+	// 				{
+	// 					name: 'slowly',
+	// 					value: 282
+	// 				},
+	// 				{
+	// 					name: 'all',
+	// 					value: 273
+	// 				},
+	// 				{
+	// 					name: 'here',
+	// 					value: 273
+	// 				},
+	// 				{
+	// 					name: 'skin',
+	// 					value: 9973
+	// 				},
+	// 				{
+	// 					name: 'you',
+	// 					value: 273
+	// 				},
+	// 				{
+	// 					name: 'resist',
+	// 					value: 273
+	// 				},
+	// 				{
+	// 					name: 'again',
+	// 					value: 273
+	// 				},
+	// 				{
+	// 					name: 'suffocating',
+	// 					value: 273
+	// 				},
+	// 				{
+	// 					name: 'defense',
+	// 					value: 273
+	// 				},
+	// 				{
+	// 					name: 'cost',
+	// 					value: 273
+	// 				},
+	// 				{
+	// 					name: 'fading',
+	// 					value: 265
+	// 				}
+	// 			]
+	// 		}
+	// 	], color: color
+	// };
+	// chart.setOption(option);
 </script>
 
diff --git a/sloth/core/statistics.py b/sloth/core/statistics.py
index bd84d79..3d100ee 100644
--- a/sloth/core/statistics.py
+++ b/sloth/core/statistics.py
@@ -253,22 +253,43 @@ def normalize(self, series):
                     ))
         return data
 
-    def chart(self, name='bar'):
-        self.metadata['template'] = 'app/charts.html'.format(name)
+    def chart(self, name='line'):
+        self.metadata['template'] = 'app/charts.html'
         self.metadata['chart'] = name
         return self
 
+    def line_chart(self):
+        return self.chart('line')
+
+    def stacked_line_chart(self):
+        return self.chart('stacked_line')
+
+    def area_chart(self):
+        return self.chart('area')
+
+    def stacked_area_chart(self):
+        return self.chart('stacked_area')
+
+    def bar_chart(self):
+        return self.chart('vertical_bar')
+
+    def stacked_bar_chart(self):
+        return self.chart('stacked_vertical_bar')
+
+    def horizontal_bar_chart(self):
+        return self.chart('horizontal_bar')
+
+    def stacked_horizontal_bar_chart(self):
+        return self.chart('stacked_horizontal_bar')
+
     def pie_chart(self):
         return self.chart('pie')
 
     def donut_chart(self):
         return self.chart('donut')
 
-    def bar_chart(self):
-        return self.chart('bar')
-
-    def column_chart(self):
-        return self.chart('column')
+    def radial_chart(self):
+        return self.chart('radial')
 
     def nex_color(self):
         color = colors()[self.cursor]