noa - Bootstrap5 Admin & Dashboard Template

Note:-

Please refer Faq's page in documentation itself for queries of customization like Colors,RTL ,Dark,Background Image styles,etc..

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


/*---- morrisBar2----*/
new Morris.Area({
	element: 'morrisBar2',

	data: [{
		x: '2010 Q4',
		y: 3,
		z: 7
	}, {
		x: '2011 Q1',
		y: 3,
		z: 4
	}, {
		x: '2011 Q2',
		y: null,
		z: 1
	}, {
		x: '2011 Q3',
		y: 2,
		z: 5
	}, {
		x: '2011 Q4',
		y: 8,
		z: 2
	}, {
		x: '2012 Q1',
		y: 4,
		z: 4
	}],
	xkey: 'x',
	ykeys: ['y', 'z'],
	lineColors: ['#ffb0c1', '#b7dd88'],
	labels: ['Y', 'Z']
}).on('click', function(i, row) {
	console.log(i, row);
});
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..

	
		
	

    
lt;!-- FLOT JS -->
<script src="../assets/plugins/flot/jquery.flot.js"></script>
<script src="../assets/plugins/flot/jquery.flot.fillbetween.js"></script>
<script src="../assets/plugins/flot/jquery.flot.pie.js"></script>
<script src="../assets/plugins/flot/jquery.flot.stack.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: '#77bc21'
}, {
	data: retCust,
	label: 'Returning Customer',
	color: '#e984b1'
}], {
	series: {
		lines: {
			show: true,
			lineWidth: 1
		},
		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, CSS you should have in your page to implement a ChartJs Charts..

	
		
	

    
<!-- 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 ctx = document.getElementById("chartLine").getContext('2d');
var myChart = new Chart(ctx, {
	type: 'line',
	data: {
		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
		datasets: [{
			label: 'Profits',
			data: [100, 420, 210, 420, 210, 320, 350],
			borderWidth: 1,
			backgroundColor: 'transparent',
			borderColor: '#77bc21',
			borderWidth: 1,
			pointBackgroundColor: '#ffffff',
			pointRadius: 3
		}, {
			label: 'Expenses',
			data: [450, 200, 350, 250, 460, 200, 400],
			borderWidth: 1,
			backgroundColor: 'transparent',
			borderColor: '#e984b1',
			borderWidth: 1,
			pointBackgroundColor: '#ffffff',
			pointRadius: 3
		}]
	},
	options: {
		responsive: true,
		maintainAspectRatio: false,

		legend: {
			labels: {
				fontColor: "#77778e"
			},
		},
	}
});
Type URL
Plugin Link http://www.chartjs.org/
Echart

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

	
		
	

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


var chart6 = document.getElementById('echart6');
var option6 = {
	grid: {
		top: '6',
		right: '10',
		bottom: '17',
		left: '32',
	},
	xAxis: {
		type: 'value',
		axisLine: {
			lineStyle: {
				color: 'rgba(119, 119, 142, 0.2)'
			}
		},
		axisLabel: {
			fontSize: 10,
			color: '#77778e'
		}
	},
	yAxis: {
		type: 'category',
		data: ['2010', '2011', '2012', '2013', '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: chartdata3,
	color: ['#ffcf9f', '#9ad0f5']
};
var barChart6 = echarts.init(chart6);
barChart6.setOption(option6);
Type URL
Plugin Link https://echarts.apache.org/examples/en/index.html
nvd3 charts

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

	
		
	

    
		
	

    
<!-- NVD3-CHARTS JS -->
<script src="../assets/plugins/charts-nvd3/d3.min.js"></script>
<script src="../assets/plugins/charts-nvd3/nv.d3.js"></script>
<script src="../assets/plugins/charts-nvd3/stream_layers.js"></script>
<script src="../assets/js/nvd3.js"></script>

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


historicalBarChart = [{
	key: "Cumulative Return",
	values: [{
		"label": "A",
		"value": 24,
		"color": "#a4dfdf"
	}, {
		"label": "B",
		"value": 10,
		"color": "#9ad0f5"
	}, {
		"label": "C",
		"value": 35,
		"color": "#ffcf9f"
	}, {
		"label": "D",
		"value": 150,
		"color": "#b7dd88"
	}, {
		"label": "E",
		"value": 120,
		"color": "#ffe6aa"
	}, {
		"label": "F",
		"value": 95,
		"color": "#ffb0c1"
	}, {
		"label": "G",
		"value": 13,
		"color": "#fc7303a2"
	}, {
		"label": "H",
		"value": 5,
		"color": "#362f715e"
	}]
}];
nv.addGraph(function() {
	var chart = nv.models.discreteBarChart().x(function(d) {
			return d.label
		}).y(function(d) {
			return d.value
		}).staggerLabels(true)
		//.staggerLabels(historicalBarChart[0].values.length > 8)
		.showValues(true).duration(250);
	d3.select('#nvd3-chart1 svg').datum(historicalBarChart).call(chart);
	nv.utils.windowResize(chart.update);
	return chart;
});
Type URL
Plugin Link https://nvd3.org/
Copyright © 2022 noa. Designed by Spruko All rights reserved.