Spaner - Simple light Bootstrap Nice Admin Panel Dashboard Design Responsive HTML5 Template

Note:-

Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Dark style..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


new Morris.Bar({
	element: 'morrisBar1',
	data: morrisData,
	xkey: 'y',
	ykeys: ['a', 'b'],
	labels: ['Series A', 'Series B'],
	barColors: ['#3366ff','#fe7f00'],
	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..

	
		
	

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


/*---- 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.2)",
			verticalLines: false,
			horizontalLines: false
		},
		colors: ['#6259ca', '#eb6f33'],
		yaxis: {
			min: -1.2,
			max: 1.2,
			tickLength: 0
		},
		xaxis: {
			tickLength: 0
		}
	});
});
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/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


/*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: '#6259ca',
			borderWidth: 3,
			pointBackgroundColor: '#ffffff',
			pointRadius: 2
		}, {
			label: 'Expenses',
			data: [450, 200, 350, 250, 480, 200, 400],
			borderWidth: 2,
			backgroundColor: 'transparent',
			borderColor: '#eb6f33',
			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/
C3 Charts

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

	
		
	

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

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-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
	},
});
Type URL
PluginLink https://c3js.org/examples.html
Echart

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

	
		
	

    
<!--  ECHART JS -->
<script src="../assets/js/echarts.js"></script>
<script src="../assets/plugins/echarts/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


/*-----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);
Type URL
Plugin Link https://echarts.apache.org/examples/en/index.html
Copyright © Spaner. Designed by Spruko All rights reserved.