Sash – Bootstrap 5 Admin & Dashboard HTML Template

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

	
	

    new Morris.Bar({
        element: 'morrisBar5',
        data: day_data,
        xkey: 'period',
        ykeys: ['licensed', 'sorned'],
        labels: ['Licensed', 'SORN'],
        barColors: ['#6c5ffc', '#05c3fb'],
        xLabelAngle: 0,
        resize: true

    });

	
	

    
<!-- 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/js/flot.js"></script>

	
	

/*---- placeholder2----*/
$(function() {
    var sin = [],
        cos = [];
    for (var i = 0; i < 14; i += 0.5) {
        sin.push([i, Math.sin(i)]);
        cos.push([i, Math.cos(i)]);
    }
    var plot = $.plot("#placeholder2", [{
        data: sin,
        label: "data1"
    }, {
        data: cos,
        label: "data2"
    }], {
        series: {
            lines: {
                show: true
            },
            points: {
                show: true
            }
        },
        grid: {
            hoverable: true,
            clickable: true,
            borderColor: "rgba(119, 119, 142, 0.1)",
            verticalLines: false,
            horizontalLines: false
        },
        colors: ['#6c5ffc', '#05c3fb'],
        yaxis: {
            min: -1.2,
            max: 1.2,
            tickLength: 0
        },
        xaxis: {
            tickLength: 0
        }
    });
});

	
	

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

	
	

/*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: [100, 420, 210, 420, 210, 320, 350],
			borderWidth: 2,
			backgroundColor: 'transparent',
			borderColor: '#6c5ffc',
			borderWidth: 3,
			pointBackgroundColor: '#ffffff',
			pointRadius: 2
		}, {
			label: 'Expenses',
			data: [450, 200, 350, 250, 480, 200, 400],
			borderWidth: 2,
			backgroundColor: 'transparent',
			borderColor: '#05c3fb',
			borderWidth: 3,
			pointBackgroundColor: '#ffffff',
			pointRadius: 2
		}]
	},
	options: {
		responsive: true,
		maintainAspectRatio: false,

		scales: {
			xAxes: [{
				ticks: {
					fontColor: "#9ba6b5",
				},
				display: true,
				gridLines: {
					color: 'rgba(119, 119, 142, 0.2)'
				}
			}],
			yAxes: [{
				ticks: {
					fontColor: "#9ba6b5",
				},
				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: "#9ba6b5"
			},
		},
	}
});

	
	

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

<!--  INDEX JS -->
<script src="../assets/js/charts.js"></script>
<script src="../assets/js/index.js"></script>
	
	

/*chart-combination*/
var chart = c3.generate({
	bindto: '#chart-combination', // id of chart wrapper
	data: {
		columns: [
			// each columns data
			['data1', 100, 130, 150, 240, 130, 220],
			['data2', 250, 200, 220, 400, 250, 350],
			['data3', 100, 130, 150, 240, 130, 220]
		],
		type: 'bar', // default type of chart
		types: {
			'data1': "line",
			'data2': "spline",
		},
		groups: [
			['data3']
		],
		colors: {
			data1: '#09ad95',
			data2: '#d43f8d',
			data3: '#0774f8'
		},
		color: function (color, d) {
			// d will be 'id' when called for legends
			return d.id && d.id === 'data3' ? d3.rgb(98, 89, 202): color;
			//return d.id && d.id === 'data3' ? d3.rgb(98, 89, 202) :color;
			//return d.id && d.id === 'data3' ? d3.rgb(98, 89, 202).darker(d.value / 120) : color;
		},
		names: {
			// name of each serie
			'data1': 'Marketing',
			'data2': 'Development',
			'data3': 'Sales'
		}
	},
	axis: {
		x: {
			type: 'category',
			// name of each category
			categories: ['2007-20082008', '2009-2010', '2011-2012', '2013-2014', '2015-2016', '2017-2018']
		},
	},
	bar: {
		width: 50
	},
	legend: {
		show: false, //hide legend
	},
	padding: {
		bottom: 0,
		top: 0
	},
});

	
	

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

	
	

/*-----echart1-----*/
var chartdata = [{
	name: 'sales',
	type: 'bar',
	data: [10, 15, 9, 18, 10, 15]
}, {
	name: 'profit',
	type: 'line',
	smooth: true,
	data: [8, 5, 25, 10, 10]
}, {
	name: 'growth',
	type: 'bar',
	data: [10, 14, 10, 15, 9, 25]
}];
var chart = document.getElementById('echart1');
var barChart = echarts.init(chart);
var option = {
	grid: {
		top: '6',
		right: '0',
		bottom: '17',
		left: '25',
	},
	xAxis: {
		data: ['2014', '2015', '2016', '2017', '2018'],
		axisLine: {
			lineStyle: {
				color: 'rgba(119, 119, 142, 0.2)'
			}
		},
		axisLabel: {
			fontSize: 10,
			color: '#77778e'
		}
	},
	tooltip: {
		show: true,
		showContent: true,
		alwaysShowContent: true,
		triggerOn: 'mousemove',
		trigger: 'axis',
		axisPointer: {
			label: {
				show: false,
			}
		}
	},
	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: chartdata,
	color: ['#6259ca', '#09ad95', '#eb6f33', ]
};
barChart.setOption(option);