Slica - Bootstrap Responsive Flat Admin Dashboard HTML5 Template

Morris Chart

The following HTML,JS, CSS you should have in your page to implement a Morris Charts..

    
<!-- MORRIS-CHART JS -->
<script src="../assets/plugins/morris/raphael-min.js"></script>
<script src="../assets/plugins/morris/morris.js"></script>
<script src="../assets/js/morris.js"></script>

Below js is in morris.js(assets/js/morris.js). Every chart has unique I'ds, Based on id's or Classes you can Search the charts in morris.js file


new Morris.Bar({
	element: 'morrisBar2',
	data: morrisData2,
	xkey: 'y',
	ykeys: ['a', 'b', 'c'],
	labels: ['Series A', 'Series B', 'Series C'],
	barColors: ['#38cab3', '#f74f75', '#4ec2f0'],
	gridTextSize: 11,
	hideHover: 'auto',
	resize: true
});

Type	URL
Plugin Link	http://morrisjs.github.io/morris.js/

Flot Chart

The following HTML,JS you should have in your page to implement a Flot Charts..

HTML
JS

    
lt;!-- FLOT JS -->
<script src="../assets/plugins/flot/flot.js"></script>
<script src="../assets/plugins/flot/flot.fillbetween.js"></script>
<script src="../assets/plugins/flot/flot.pie.js"></script>
<script src="../assets/plugins/flot/jquery.flot.resize.js"></script>
<script src="../assets/js/flot.js"></script>

Below js is in flot.js(assets/js/flot.js). Every chart has unique I'ds, Based on id's or Classes you can Search the charts in flot.js file


var plot = $.plot($('#flotLine1'), [{
	data: newCust,
	label: 'New Customer',
	color: '#38cab3'
}, {
	data: retCust,
	label: 'Returning Customer',
	color: '#f74f75'
}], {
	series: {
		lines: {
			show: true,
			lineWidth: 2
		},
		shadowSize: 0
	},
	points: {
		show: false,
	},
	legend: {
		noColumns: 1,
		position: 'nw'
	},
	grid: {
		borderWidth: 1,
		borderColor: 'rgba(171, 167, 167,0.2)',
		hoverable: true
	},
	yaxis: {
		min: 0,
		max: 15,
		color: '#eee',
		tickColor: 'rgba(171, 167, 167,0.2)',
		font: {
			size: 10,
			color: '#999'
		}
	},
	xaxis: {
		color: '#eee',
		tickColor: 'rgba(171, 167, 167,0.2)',
		font: {
			size: 10,
			color: '#999'
		}
	}
});

Type	URL
Plugin Link	http://www.flotcharts.org/

ChartJs

The following HTML,JS you should have in your page to implement a ChartJs Charts..

HTML
JS

    
<!-- CHARTJS JS  -->
<script src="../assets/plugins/chart/chart.bundle.js"></script>
<script src="../assets/plugins/chart/utils.js"></script>
<script src="../assets/js/chart.js"></script>

Below js is in chart.js(assets/js/chart.js). Every chart has unique I'ds, Based on id's or Classes you can Search the charts in chart.js file


var ctx8 = document.getElementById('chartLine1');
new Chart(ctx8, {
	type: 'line',
	data: {
		labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		datasets: [{
			data: [12, 15, 18, 40, 35, 38, 32, 20, 25, 15, 25, 30],
			borderColor: '#38cab3 ',
			borderWidth: 1,
			fill: false
		}, {
			data: [10, 20, 25, 55, 50, 45, 35, 30, 45, 35, 55, 40],
			borderColor: '#f74f75',
			borderWidth: 1,
			fill: false
		}]
	},
	options: {
		maintainAspectRatio: false,
		legend: {
			display: false,
			labels: {
				display: false
			}
		},
		scales: {
			yAxes: [{
				ticks: {
					beginAtZero: true,
					fontSize: 10,
					max: 80,
					fontColor: "rgba(171, 167, 167,0.9)",
				},
				gridLines: {
					display: true,
					color: 'rgba(171, 167, 167,0.2)',
					drawBorder: false
				},
			}],
			xAxes: [{
				ticks: {
					beginAtZero: true,
					fontSize: 11,
					fontColor: "rgba(171, 167, 167,0.9)",
				},
				gridLines: {
					display: true,
					color: 'rgba(171, 167, 167,0.2)',
					drawBorder: false
				},
			}]
		}
	}
});

Type	URL
Plugin Link	http://www.chartjs.org/

C3 Charts

The following HTML,JS you should have in your page to implement a C3 Charts..

HTML
JS

    
<!--  Internal c3 charts js -->
<script src="../assets/plugins/charts-c3/d3.v5.min.js"></script>
<script src="../assets/plugins/charts-c3/c3-chart.js"></script>
<script src="../assets/js/charts.js"></script>

Below js is in charts.js(assets/js/charts.js). Every chart has unique I'ds, Based on id's or Classes you can Search the charts in charts.js file


/*chart-combination*/
var chart = c3.generate({
	bindto: '#chart-employment', // id of chart wrapper
	data: {
		columns: [
			// each columns data
			['data1', 9, 4, 9, 11, 15, 17],
			['data2', 7, 17, 13, 17, 25, 28],
			['data3', 18, 19, 22, 21, 32, 28]
		],
		type: 'line', // default type of chart
		colors: {
			data1: '#0052cc',
			data2: '#0099ff',
			data3: '#ffcc29'
		},
		names: {
			// name of each serie
			'data1': 'May',
			'data2': 'June',
			'data3': 'July'
		}
	},
	axis: {
		x: {
			type: 'category',
			// name of each category
			categories: ['2013', '2014', '2015', '2016', '2017', '2018']
		},
	},
	legend: {
		show: false, //hide legend
	},
	padding: {
		bottom: 0,
		top: 0
	},
});

Echart

The following HTML,JS you should have in your page to implement a Echart Charts..

HTML
JS

    
<!--  ECHART JS -->
<script src="../assets/plugins/echarts/echarts.js"></script>
<script src="../assets/js/echarts.js"></script>

Below js is in echarts.js(assets/js/echarts.js). Every chart has unique I'ds, Based on id's or Classes you can Search the charts in echarts.js file


/*-----echart2-----*/
var chartdata3 = [{
	name: 'sales',
	type: 'bar',
	barMaxWidth: 20,
	stack: 'Stack',
	data: [10, 15, 9, 18, 10, 15]
}, {
	name: 'Profit',
	type: 'bar',
	stack: 'Stack',
	barMaxWidth: 20,
	data: [10, 14, 10, 15, 9, 25]
}];
var option5 = {
	grid: {
		top: '6',
		right: '0',
		bottom: '17',
		left: '25',
	},
	xAxis: {
		data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019'],
		axisLine: {
			lineStyle: {
				color: 'rgba(171, 167, 167,0.2)'
			}
		},
		axisLabel: {
			fontSize: 10,
			color: '#5f6d7a'
		}
	},
	tooltip: {
		trigger: 'axis',
		position: ['35%', '32%'],
	},
	yAxis: {
		splitLine: {
			lineStyle: {
				color: 'rgba(171, 167, 167,0.2)'
			}
		},
		axisLine: {
			lineStyle: {
				color: 'rgba(171, 167, 167,0.2)'
			}
		},
		axisLabel: {
			fontSize: 10,
			color: '#5f6d7a'
		}
	},
	series: chartdata3,
	color: ['#f74f75', '#38cab3']
};
var chart5 = document.getElementById('echart5');
var barChart5 = echarts.init(chart5);
barChart5.setOption(option5);

Type	URL
Plugin Link	https://echarts.apache.org/examples/en/index.html