Spruha - Bootstrap 5 Admin & Dashboard HTML Template

Morris Chart

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

	
		
	

    
		
	

    
		<!-- Internal Morris Chart js-->
		<script src="../assets/plugins/raphael/raphael.min.js"></script>
		<script src="../assets/plugins/morris.js/morris.min.js"></script>
		<script src="../assets/js/chart.morris.js"></script>

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


	$(function(e){
		'use strict';
		/* Morris Chart1*/
		new Morris.Bar({
			element: 'morrisBar1',
			data: morrisData,
			xkey: 'y',
			ykeys: ['a', 'b'],
			labels: ['Series A', 'Series B'],
			barColors: ['#6259ca', '#53caed'],
			gridTextSize: 11,
			hideHover: 'auto',
			resize: true
		});
	  });
Type URL
Plugin Link http://morrisjs.github.io/morris.js/
Flot Chart

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

	
		
	

    
		<!-- Internal Flot Chart js-->
		<script src="../assets/plugins/jquery.flot/jquery.flot.js"></script>
		<script src="../assets/plugins/jquery.flot/jquery.flot.pie.js"></script>
		<script src="../assets/plugins/jquery.flot/jquery.flot.resize.js"></script>
		<script src="../assets/js/chart.flot.js"></script>

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


	/*---- placeholder1----*/
	$(function() {
		/* Flot Chart1*/
		$.plot('#flotBar1', [{
			data: [
				[0, 3],
				[1, 8],
				[2, 5],
				[3, 13],
				[4, 5],
				[5, 7],
				[6, 4],
				[7, 6],
				[8, 3],
				[9, 7]
			]
		}], {
			series: {
				bars: {
					show: true,
					lineWidth: 0,
					fillColor: '#6259ca',
					barWidth: .5
				},
				highlightColor: '#4977ff'
			},
			grid: {
				borderWidth: 1,
				borderColor: 'rgba(119, 119, 142, 0.2)',
				hoverable: true
			},
			yaxis: {
				tickColor: 'rgba(119, 119, 142, 0.2)',
				font: {
					color: '#77778e',
					size: 10
				}
			},
			xaxis: {
				tickColor: 'rgba(119, 119, 142, 0.2)',
				font: {
					color: '#77778e',
					size: 10
				}
			}
		});
	});
Type URL
Plugin Link http://www.flotcharts.org/
ChartJs

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

	
		
	

    
<!-- Internal Chartjs charts js-->
<script src="../assets/plugins/chart.js/Chart.bundle.min.js"></script>
<script src="../assets/js/chart.chartjs.js"></script>

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


	
/*LIne-Chart */
var ctx = document.getElementById("chartLine").getContext('2d');
var myChart = new Chart(ctx, {
	type: 'line',
	data: {
		labels: ["Sun", "Mon", "Tus", "Wed", "Thu", "Fri", "Sat"],
		datasets: [{
			label: 'Profits',
			data: [20, 420, 210, 354, 580, 320, 480],
			borderWidth: 2,
			backgroundColor: 'transparent',
			borderColor: '#6259ca',
			borderWidth: 3,
			pointBackgroundColor: '#ffffff',
			pointRadius: 2
		}]
	},
	options: {
		responsive: true,
		maintainAspectRatio: false,

		scales: {
			xAxes: [{
				ticks: {
					fontColor: "#77778e",
					},
				display: true,
				gridLines: {
					color: 'rgba(119, 119, 142, 0.2)'
				}
			}],
			yAxes: [{
				ticks: {
					fontColor: "#77778e",
					},
				display: true,
				gridLines: {
					color: 'rgba(119, 119, 142, 0.2)'
				},
				scaleLabel: {
					display: false,
					labelString: 'Thousands',
					fontColor: 'rgba(119, 119, 142, 0.2)'
				}
			}]
		},
		legend: {
			labels: {
				fontColor: "#77778e"
			},
		},
	}
});
Type URL
Plugin Link http://www.chartjs.org/
Sparkline Charts

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

	
		
	

    
		<!-- Sparkline js-->
		<script src="../assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
		<script src="../assets/js/chart.sparkline.js"></script>

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


$('#sparkline1').sparkline('html', {
	width: 100,
	height: 50,
	lineColor: '#6259ca ',
	fillColor: false,
	tooltipContainer: $('.main-content')
});
Type URL
Sparklinechart https://omnipotent.net/jquery.sparkline/#s-about
Piety Chart http://benpickles.github.io/peity
Echart

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

	
		
	

    
<!-- Internal ECharts js -->
<script src="../assets/plugins/echarts/echarts.js"></script>
<script src="../assets/js/chart.echarts.js"></script>

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


/* Echart 1*/
var chartdata2 = [
	{
		name: 'sales',
		type: 'line',
		smooth: true,
		data: [12, 25, 12, 35, 12, 38],
		color:[ '#6259ca']
	},
	{
		name: 'Profit',
		type: 'line',
		smooth: true,
		size:10,
		data: [8, 12, 28, 10, 10, 12],
		color:[ '#53caed']
	}
];
var chart2 = document.getElementById('echart1');
var barChart2 = echarts.init(chart2);
var option2 = {
	grid: {
		top: '6',
		right: '0',
		bottom: '17',
		left: '25',
	},
	tooltip: {
		show: true,
		showContent: true,
		alwaysShowContent: true,
		triggerOn: 'mousemove',
		trigger: 'axis',
		axisPointer:
		{
			label: {
				show: false,
			}
		}
	},
	xAxis: {
		data: [ '2014', '2015', '2016', '2017', '2018'],
		axisLine: {
		lineStyle: {
			color: 'rgba(119, 119, 142, 0.2)'
		}
		},
		axisLabel: {
		fontSize: 10,
		color: '#77778e'
		}
	},
	yAxis: {
		splitLine: {
		lineStyle: {
			color: 'rgba(119, 119, 142, 0.2)'
		}
		},
		axisLine: {
		lineStyle: {
			color: 'rgba(119, 119, 142, 0.2)'
		}
		},
		axisLabel: {
		fontSize: 10,
		color: '#77778e'
		}
	},
	series: chartdata2
};
barChart2.setOption(option2);
Type URL
Plugin Link https://echarts.apache.org/examples/en/index.html
Copyright © 2022 Spruha. Designed with by Spruko All rights reserved.