# Sash – Bootstrap 5 Admin & Dashboard HTML Template

##### 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: 'morrisBar5',
            data: day_data,
            xkey: 'period',
            ykeys: ['licensed', 'sorned'],
            labels: ['Licensed', 'SORN'],
            barColors: ['#6c5ffc', '#05c3fb'],
            xLabelAngle: 0,
            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..

    <!-- 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.1)",
                verticalLines: false,
                horizontalLines: false
            },
            colors: ['#6c5ffc', '#05c3fb'],
            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>

    /*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"
    			},
    		},
    	}
    });

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
    	},
    });

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

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