Bizdire – Business Directory and html5 template

Morris Chart

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

    
<!--Morris.js Charts Plugin -->
<script src="../assets/plugins/morris/raphael-min.js"></script>
<script src="../assets/plugins/morris/morris.js"></script>

<!-- Index Scripts -->
<script src="../assets/js/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';
	   new Morris.Area({
			  element: 'morrisBar1',
			  data: [
			  {x: '2013-03-30 22:00:00', y: 0, z: 6},
			  {x: '2013-03-31 00:00:00', y: 3, z: 0},
			  {x: '2013-03-31 02:00:00', y: 3, z: 6},
			  {x: '2013-03-31 04:00:00', y: 2, z: 4}
			  ],
			  xkey: 'x',
			  ykeys: ['y', 'z'],
			  labels: ['Series A', 'Series B'],
			  lineColors: ['#6963ff', '#ff2b88'],
			  lineWidth: 1,
			  fillOpacity: 0.5,
			  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/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>

<!-- Index Scripts -->
<script src="../assets/js/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() {
			var sin = [], cos = [];
			for (var i = 0; i < 14; i += 0.1) {
				sin.push([i, Math.sin(i)]);
				cos.push([i, Math.cos(i)]);
			}

			plot = $.plot("#placeholder1", [
				{ data: sin },
				{ data: cos}

			], {
				series: {
					lines: {
						show: true
					}
				},
				 lines: {
					show: true,
					fill: true,
					fillColor: { colors: [{ opacity: 0.7 }, { opacity: 0.7}] }
				},
				crosshair: {
					mode: "x"
				},
				grid: {
					hoverable: false,
					autoHighlight: false,
					borderColor: "#e3edfc",
					verticalLines:false,
					horizontalLines:false
				},
				colors: ['#6963ff', '#00148e'],
				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..

HTML
JS

    
<!--Morris.js Charts Plugin -->
<script src="../assets/plugins/chart/Chart.bundle.js"></script>
<script src="../assets/plugins/chart/utils.js"></script>

<!-- Index Scripts -->
<script src="../assets/js/chart.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


	var color = Chart.helpers.color;
	function createConfig(legendPosition, colorName) {
		return {
			type: 'line',
			data: {
				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
				datasets: [{
					label: 'My First dataset',
					data: [
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor()
					],
					backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
					borderColor: window.chartColors[colorName],
					borderWidth: 1
				}]
			},

			options: {
				responsive: true,
				legend: {
					position: legendPosition,
				},

				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Month'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Value'
						}
					}]
				},

			}
		};
	}

	window.onload = function() {
		[{
			id: 'chart-legend-top',
			legendPosition: 'top',
			color: 'blue'
		}, {
			id: 'chart-legend-right',
			legendPosition: 'right',
			color: 'purple'
		}, {
			id: 'chart-legend-bottom',
			legendPosition: 'bottom',
			color: 'yellow'
		}, {
			id: 'chart-legend-left',
			legendPosition: 'left',
			color: 'pink'
		}].forEach(function(details) {
			var ctx = document.getElementById(details.id).getContext('2d');
			var config = createConfig(details.legendPosition, details.color);
			new Chart(ctx, config);
		});
	};

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

HTML
JS

    
<!--  Sparkline js -->
<script src="../assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="../assets/js/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


/******************* BAR CHARTS *****************/
$(".sparkline_one").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 5, 6, 4, 5, 6, 3, 5, 4, 5, 4, 5, 4, 3, 4, 5, 6, 7, 5, 4, 3, 5, 6], {
	type: 'bar',
	height: '125',
	barWidth: 13,
	colorMap: {

	},
	barSpacing: 2,
	barColor: '#00bcd4'
});

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

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

<!-- Index Scripts -->
<script src="../assets/js/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


	/*-----echart2-----*/

	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(227, 237, 252,0.5)'
		  }
		},
		axisLabel: {
		  fontSize: 10,
		  color: 'rgba(146, 163, 185, 0.9)'
		}
	  },
	  tooltip: {
		  show: true,
		  showContent: true,
		  alwaysShowContent: true,
		  triggerOn: 'mousemove',
		  trigger: 'axis',
		  axisPointer:
		  {
			  label: {
				  show: false,
			  }
		  }

	  },
	  yAxis: {
		splitLine: {
		  lineStyle: {
			color: 'rgba(227, 237, 252,0.5)'
		  }
		},
		axisLine: {
		  lineStyle: {
			color: 'rgba(227, 237, 252,0.5)'
		  }
		},
		axisLabel: {
		  fontSize: 10,
		  color: 'rgba(146, 163, 185, 0.9)'
		}
	  },
	  series: chartdata,
	  color:[ '#00148e ','#ec296b', '#6963ff']
	};

	barChart.setOption(option);

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

Bizdire - Bootstrap 5 Admin & Dashboard HTML Template

Morris Chart

Flot Chart

ChartJs

Sparkline Charts

Echart