Dashplex – Bootstrap 5 Admin & Dashboard 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


new Morris.Area({
		element: 'morrisArea1',
		data: [{
			y: '2006',
			a: 50,
			b: 40
		}, {
			y: '2007',
			a: 25,
			b: 15
		}, {
			y: '2008',
			a: 20,
			b: 40
		}, {
			y: '2009',
			a: 75,
			b: 65
		}, {
			y: '2010',
			a: 50,
			b: 40
		}, {
			y: '2011',
			a: 75,
			b: 65
		}, {
			y: '2012',
			a: 100,
			b: 90
		}],
		xkey: 'y',
		ykeys: ['a', 'b'],
		labels: ['Series A', 'Series B'],
		lineColors: ['#6259ca', '#53caed'],
		lineWidth: 1,
		fillOpacity: 0.9,
		gridTextSize: 11,
		hideHover: 'auto',
		resize: true
	});

Note : After Changing scss you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

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..

HTML
JS

    
<!-- Internal Flot Chart js 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


var plot = $.plot($('#flotLine1'), [{
	data: newCust,
	label: 'New Customer',
	color: '#6259ca'
}, {
	data: retCust,
	label: 'Returning Customer',
	color: '#53caed'
}], {
	series: {
		lines: {
			show: true,
			lineWidth: 2
		},
		shadowSize: 0
	},
	points: {
		show: false,
	},
	legend: {
		noColumns: 1,
		position: 'nw'
	},
	grid: {
		hoverable: true,
		clickable: true,
		borderWidth: 0,
		labelMargin: 5
	},
	yaxis: {
		min: 0,
		max: 15,
		color: 'rgba(119, 119, 142, 0.2)',
		font: {
			size: 10,
			color: '#77778e'
		}
	},
	xaxis: {
		color: 'rgba(119, 119, 142, 0.2)',
		font: {
			size: 10,
			color: '#77778e'
		}
	}
});

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..

HTML
JS

    
<!-- 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, 320, 110, 350, 480, 320, 480],
			borderWidth: 2,
			backgroundColor: 'transparent',
			borderColor: '#4d65d9',
			borderWidth: 3,
			pointBackgroundColor: '#ffffff',
			pointRadius: 2,
			fill: false,
			lineTension: 0.3,
		}]
	},
	options: {
		responsive: true,
		maintainAspectRatio: false,
		plugins: {
			legend: {
				labels: {
					fontColor: "#8492a6"
				},
			},
		},

		scales: {
			x: {
				ticks: {
					fontColor: "#8492a6",
				 },
				display: true,
				gridLines: {
					color: 'rgba(119, 119, 142, 0.2)'
				}
			},
			y: {
				ticks: {
					fontColor: "#8492a6",
				 },
				display: true,
				gridLines: {
					color: 'rgba(119, 119, 142, 0.2)'
				},
				scaleLabel: {
					display: false,
					labelString: 'Thousands',
					fontColor: 'rgba(119, 119, 142, 0.2)'
				}
			}
		},
	}
});

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

Sparkline & Peity Charts

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

HTML
JS

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

<!-- Internal Peity charts js-->
<script src="../assets/plugins/peity/jquery.peity.min.js"></script>
<script src="../assets/js/chart.peity.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


/******************* BAR CHARTS *****************/
	$('#sparkline5').sparkline('html', {
		type: 'bar',
		barWidth: 10,
		height: 50,
		barColor: '#6259ca',
		chartRangeMax: 12
	});

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


// Bar charts
$('.peity-bar').peity('bar');

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..

HTML
JS

    
<!--  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


/* Echart3 */
	var option4 = {
		grid: {
		  top: '6',
		  right: '0',
		  bottom: '17',
		  left: '32',
		},
		tooltip: {
			show: true,
			showContent: true,
			alwaysShowContent: true,
			triggerOn: 'mousemove',
			trigger: 'axis',
			axisPointer:
			{
				label: {
					show: false,
				}
			}
		},
		xAxis: {
		  type: 'value',
		  axisLine: {
			lineStyle: {
			  color: 'rgba(119, 119, 142, 0.2)'
			}
		  },
		  axisLabel: {
			fontSize: 10,
			color: '#77778e'
		  }
		},
		yAxis: {
		  type: 'category',
		  data: [ '2014', '2015', '2016', '2017', '2018'],
		  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,
		color:[ '#6259ca', '#53caed','#ecb403']
	};
	var chart4 = document.getElementById('echart3');
	var barChart4 = echarts.init(chart4);
	barChart4.setOption(option4);

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

Dashplex - Bootstrap 5 Admin & Dashboard HTML Template

Morris Chart

Flot Chart

ChartJs

Sparkline & Peity Charts

Echart