text: 'use strict';
  var Index = function() {
  	var chart1Handler = function() {
  		var data = {
  			labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  			datasets: [{
  				label: 'My First dataset',
  				fillColor: 'rgba(220,220,220,0.2)',
  				strokeColor: 'rgba(220,220,220,1)',
  				pointColor: 'rgba(220,220,220,1)',
  				pointStrokeColor: '#fff',
  				pointHighlightFill: '#fff',
  				pointHighlightStroke: 'rgba(220,220,220,1)',
  				data: [65, 59, 80, 81, 56, 55, 5, 84, 64]
  			}]
  		};
  
  		var options = {
  
  			maintainAspectRatio: false,
  
  			// Sets the chart to be responsive
  			responsive: 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 the line is curved between points
  			bezierCurve: false,
  
  			//Number - Tension of the bezier curve between points
  			bezierCurveTension: 0.4,
  
  			//Boolean - Whether to show a dot for each point
  			pointDot: true,
  
  			//Number - Radius of each point dot in pixels
  			pointDotRadius: 4,
  
  			//Number - Pixel width of point dot stroke
  			pointDotStrokeWidth: 1,
  
  			//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
  			pointHitDetectionRadius: 20,
  
  			//Boolean - Whether to show a stroke for datasets
  			datasetStroke: true,
  
  			//Number - Pixel width of dataset stroke
  			datasetStrokeWidth: 2,
  
  			//Boolean - Whether to fill the dataset with a colour
  			datasetFill: true,
  
  			// Function - on animation progress
  			onAnimationProgress: function() {
  			},
  
  			// Function - on animation complete
  			onAnimationComplete: function() {
  			},
  
  			//String - A legend template
  			legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
  		};
  		// Get context with jQuery - using jQuery's .get() method.
  		var ctx = $("#chart1").get(0).getContext("2d");
  		// This will get the first returned node in the jQuery collection.
  		var chart1 = new Chart(ctx).Line(data, options);
  		//generate the legend
  		var legend = chart1.generateLegend();
  		//and append it to your page somewhere
  		$('#chart1Legend').append(legend);
  	};
  	var chart2Handler = function() {
  		// Chart.js Data
  		var data = {
  			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  			datasets: [{
  				label: 'My First dataset',
  				fillColor: 'rgba(220,220,220,0.5)',
  				strokeColor: 'rgba(220,220,220,0.8)',
  				highlightFill: 'rgba(220,220,220,0.75)',
  				highlightStroke: 'rgba(220,220,220,1)',
  				data: [65, 59, 80, 81, 56, 55, 40]
  			}, {
  				label: 'My Second dataset',
  				fillColor: 'rgba(151,187,205,0.5)',
  				strokeColor: 'rgba(151,187,205,0.8)',
  				highlightFill: 'rgba(151,187,205,0.75)',
  				highlightStroke: 'rgba(151,187,205,1)',
  				data: [28, 48, 40, 19, 86, 27, 90]
  			}]
  		};
  
  		// Chart.js Options
  		var options = {
  			maintainAspectRatio: false,
  
  			// Sets the chart to be responsive
  			responsive: true,
  
  			//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
  			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 - 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,
  
  			//Number - Spacing between data sets within X values
  			barDatasetSpacing: 1,
  
  			//String - A legend template
  			legendTemplate: '<ul class="tc-chart-js-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>'
  		};
  		// Get context with jQuery - using jQuery's .get() method.
  		var ctx = $("#chart2").get(0).getContext("2d");
  		// This will get the first returned node in the jQuery collection.
  		var chart2 = new Chart(ctx).Bar(data, options);
  		//generate the legend
  		var legend = chart2.generateLegend();
  		//and append it to your page somewhere
  		$('#chart2Legend').append(legend);
  	};
  	var chart3Handler = function() {
  		// Chart.js Data
  		var data = [{
  			value: 300,
  			color: '#F7464A',
  			highlight: '#FF5A5E',
  			label: 'Red'
  		}, {
  			value: 50,
  			color: '#46BFBD',
  			highlight: '#5AD3D1',
  			label: 'Green'
  		}, {
  			value: 100,
  			color: '#FDB45C',
  			highlight: '#FFC870',
  			label: 'Yellow'
  		}];
  
  		// Chart.js Options
  		var options = {
  
  			// Sets the chart to be responsive
  			responsive: false,
  
  			//Boolean - Whether we should show a stroke on each segment
  			segmentShowStroke: true,
  
  			//String - The colour of each segment stroke
  			segmentStrokeColor: '#fff',
  
  			//Number - The width of each segment stroke
  			segmentStrokeWidth: 2,
  
  			//Number - The percentage of the chart that we cut out of the middle
  			percentageInnerCutout: 50, // This is 0 for Pie charts
  
  			//Number - Amount of animation steps
  			animationSteps: 100,
  
  			//String - Animation easing effect
  			animationEasing: 'easeOutBounce',
  
  			//Boolean - Whether we animate the rotation of the Doughnut
  			animateRotate: true,
  
  			//Boolean - Whether we animate scaling the Doughnut from the centre
  			animateScale: false,
  
  			//String - A legend template
  			legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
  
  		};
  		// Get context with jQuery - using jQuery's .get() method.
  		var ctx = $("#chart3").get(0).getContext("2d");
  		// This will get the first returned node in the jQuery collection.
  		var chart3 = new Chart(ctx).Doughnut(data, options);
  		//generate the legend
  		var legend = chart3.generateLegend();
  		//and append it to your page somewhere
  		$('#chart3Legend').append(legend);
  	};
  	var chart4Handler = function() {
  		// Chart.js Data
  		var data = {
  			labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
  			datasets: [{
  				label: 'My First dataset',
  				fillColor: 'rgba(220,220,220,0.2)',
  				strokeColor: 'rgba(220,220,220,1)',
  				pointColor: 'rgba(220,220,220,1)',
  				pointStrokeColor: '#fff',
  				pointHighlightFill: '#fff',
  				pointHighlightStroke: 'rgba(220,220,220,1)',
  				data: [65, 59, 90, 81, 56, 55, 40]
  			}, {
  				label: 'My Second dataset',
  				fillColor: 'rgba(151,187,205,0.2)',
  				strokeColor: 'rgba(151,187,205,1)',
  				pointColor: 'rgba(151,187,205,1)',
  				pointStrokeColor: '#fff',
  				pointHighlightFill: '#fff',
  				pointHighlightStroke: 'rgba(151,187,205,1)',
  				data: [28, 48, 40, 19, 96, 27, 100]
  			}]
  		};
  
  		// Chart.js Options
  		var options = {
  
  			// Sets the chart to be responsive
  			responsive: true,
  
  			//Boolean - Whether to show lines for each scale point
  			scaleShowLine: true,
  
  			//Boolean - Whether we show the angle lines out of the radar
  			angleShowLineOut: true,
  
  			//Boolean - Whether to show labels on the scale
  			scaleShowLabels: false,
  
  			// Boolean - Whether the scale should begin at zero
  			scaleBeginAtZero: true,
  
  			//String - Colour of the angle line
  			angleLineColor: 'rgba(0,0,0,.1)',
  
  			//Number - Pixel width of the angle line
  			angleLineWidth: 1,
  
  			//String - Point label font declaration
  			pointLabelFontFamily: '"Arial"',
  
  			//String - Point label font weight
  			pointLabelFontStyle: 'normal',
  
  			//Number - Point label font size in pixels
  			pointLabelFontSize: 10,
  
  			//String - Point label font colour
  			pointLabelFontColor: '#666',
  
  			//Boolean - Whether to show a dot for each point
  			pointDot: true,
  
  			//Number - Radius of each point dot in pixels
  			pointDotRadius: 3,
  
  			//Number - Pixel width of point dot stroke
  			pointDotStrokeWidth: 1,
  
  			//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
  			pointHitDetectionRadius: 20,
  
  			//Boolean - Whether to show a stroke for datasets
  			datasetStroke: true,
  
  			//Number - Pixel width of dataset stroke
  			datasetStrokeWidth: 2,
  
  			//Boolean - Whether to fill the dataset with a colour
  			datasetFill: true,
  
  			//String - A legend template
  			legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
  		};
  		// Get context with jQuery - using jQuery's .get() method.
  		var ctx = $("#chart4").get(0).getContext("2d");
  		// This will get the first returned node in the jQuery collection.
  		var chart4 = new Chart(ctx).Radar(data, options);
  		//generate the legend
  		var legend = chart4.generateLegend();
  		//and append it to your page somewhere
  		$('#chart4Legend').append(legend);
  	};
  	// function to initiate Sparkline
  	var sparkResize;
  	$(window).resize(function(e) {
  		clearTimeout(sparkResize);
  		sparkResize = setTimeout(sparklineHandler, 500);
  	});
  	var sparklineHandler = function() {
  
  		$(".sparkline-1 span").sparkline([300, 523, 982, 811, 1300, 1125, 1487], {
  			type: "bar",
  			barColor: "#D43F3A",
  			barWidth: "5",
  			height: "24",
  			tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{offset:names}}: {{value}}',
  			tooltipValueLookups: {
  				names: {
  					0: 'Sunday',
  					1: 'Monday',
  					2: 'Tuesday',
  					3: 'Wednesday',
  					4: 'Thursday',
  					5: 'Friday',
  					6: 'Saturday'
  
  				}
  			}
  		});
  		$(".sparkline-2 span").sparkline([400, 650, 886, 443, 502, 412, 353], {
  			type: "bar",
  			barColor: "#5CB85C",
  			barWidth: "5",
  			height: "24",
  			tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{offset:names}}: {{value}}',
  			tooltipValueLookups: {
  				names: {
  					0: 'Sunday',
  					1: 'Monday',
  					2: 'Tuesday',
  					3: 'Wednesday',
  					4: 'Thursday',
  					5: 'Friday',
  					6: 'Saturday'
  
  				}
  			}
  		});
  		$(".sparkline-3 span").sparkline([4879, 6567, 5022, 8890, 9234, 7128, 4811], {
  			type: "bar",
  			barColor: "#46B8DA",
  			barWidth: "5",
  			height: "24",
  			tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{offset:names}}: {{value}}',
  			tooltipValueLookups: {
  				names: {
  					0: 'Sunday',
  					1: 'Monday',
  					2: 'Tuesday',
  					3: 'Wednesday',
  					4: 'Thursday',
  					5: 'Friday',
  					6: 'Saturday'
  
  				}
  			}
  		});
  		$(".sparkline-4 span").sparkline([1122, 1735, 559, 2534, 1600, 2860, 1345, 1987, 2675, 457, 3965, 3765], {
  			type: "line",
  			lineColor: '#8e8e93',
  			width: "80%",
  			height: "47",
  			fillColor: "",
  			spotRadius: 4,
  			lineWidth: 1,
  			resize: true,
  			spotColor: '#ffffff',
  			minSpotColor: '#D9534F',
  			maxSpotColor: '#5CB85C',
  			highlightSpotColor: '#CE4641',
  			highlightLineColor: '#c2c2c5',
  			tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{offset:names}}: {{y:val}}',
  			tooltipValueLookups: {
  				names: {
  					0: 'January',
  					1: 'February',
  					2: 'March',
  					3: 'April',
  					4: 'May',
  					5: 'June',
  					6: 'July',
  					7: 'August',
  					8: 'September',
  					9: 'October',
  					10: 'November',
  					11: 'December'
  
  				}
  			}
  		});
  		$(".sparkline-5 span").sparkline([422, 1335, 1059, 2235, 1300, 1860, 1126, 1387, 1675, 1357, 2165, 1765], {
  			type: "line",
  			lineColor: '#8e8e93',
  			width: "80%",
  			height: "47",
  			fillColor: "",
  			spotRadius: 4,
  			lineWidth: 1,
  			resize: true,
  			spotColor: '#ffffff',
  			minSpotColor: '#D9534F',
  			maxSpotColor: '#5CB85C',
  			highlightSpotColor: '#CE4641',
  			highlightLineColor: '#c2c2c5',
  			tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{offset:names}}: {{y:val}}',
  			tooltipValueLookups: {
  				names: {
  					0: 'January',
  					1: 'February',
  					2: 'March',
  					3: 'April',
  					4: 'May',
  					5: 'June',
  					6: 'July',
  					7: 'August',
  					8: 'September',
  					9: 'October',
  					10: 'November',
  					11: 'December'
  
  				}
  			}
  		});
  	};
  	return {
  		init: function() {
  			chart1Handler();
  			chart2Handler();
  			chart3Handler();
  			chart4Handler();
  			sparklineHandler();
  		}
  	};
  }();
  