Clont - Bootstrap Responsive Flat Admin Dashboard HTML5 Template

Note:-

Please refer Faq's page in documentation itself for queries of customization like colors,rtl ,dark,transparent 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


	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: ['#04cad0', '#564ec1'],
		labels: ['Y', 'Z'],
		resize: true
	}).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 you should have in your page to implement a Flot Charts..

	
		
	

    
lt;!-- FLOT JS -->
<script src="../assets/plugins/flot/flot.js"></script>
<script src="../assets/plugins/flot/flot.fillbetween.js"></script>
<script src="../assets/plugins/flot/flot.pie.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


	function plotWithOptions() {
		$.plot("#placeholder6", [d1, d2, d3], {
			series: {
				stack: stack,
				lines: {
					show: lines,
					fill: true,
					steps: steps
				},
				bars: {
					show: bars,
					barWidth: 0.6
				}
			},
			grid: {
				borderColor: "rgb(227, 226, 236,0.4)",
			},
			colors: ['#564ec1', '#04cad0'],
			yaxis: {
				tickLength: 0
			},
			xaxis: {
				tickLength: 0,
				show: false
			}
		});
	}
Type URL
Plugin Link http://www.flotcharts.org/
ChartJs

The following HTML,JS 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", "Tus", "Wed", "Thu", "Fri", "Sat"],
            datasets: [{
                label: 'Profits',
                data: [100, 420, 210, 420, 210, 320, 350],
                borderWidth: 2,
                backgroundColor: 'transparent',
                borderColor: '#564ec1',
                borderWidth: 3,
                lineTension:0.3,
                pointBackgroundColor: '#ffffff',
                pointRadius: 2
            }, {
                label: 'Expenses',
                data: [450, 200, 350, 250, 480, 200, 400],
                borderWidth: 2,
                backgroundColor: 'transparent',
                borderColor: '#04cad0',
                borderWidth: 3,
                lineTension:0.3,
                pointBackgroundColor: '#ffffff',
                pointRadius: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,

            scales: {
                x: {
                    ticks: {
                        color: "#9ba6b5",
                    },
                    display: true,
                    grid: {
                        color: 'rgba(119, 119, 142, 0.2)'
                    }
                },
                y: {
                    ticks: {
                        color: "#9ba6b5",
                    },
                    display: true,
                    grid: {
                        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/
Echart

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

	
		
	

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


/*-----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: 'rgb(227, 226, 236,0.4)'
			}
		},
		axisLabel: {
			fontSize: 10,
			color: '#9493a9'
		}
	},
	tooltip: {
		show: true,
		showContent: true,
		alwaysShowContent: true,
		triggerOn: 'mousemove',
		trigger: 'axis',
		axisPointer: {
			label: {
				show: false,
			}
		}
	},
	yAxis: {
		splitLine: {
			lineStyle: {
				color: 'rgb(227, 226, 236,0.4)'
			}
		},
		axisLine: {
			lineStyle: {
				color: 'rgb(227, 226, 236,0.4)'
			}
		},
		axisLabel: {
			fontSize: 10,
			color: '#9493a9'
		}
	},
	series: chartdata,
	color: ['#564ec1', '#ff9900', '#04cad0', ]
};
barChart.setOption(option);
window.addEventListener('resize',function(){
		barChart.resize();
})
Type URL
Plugin Link https://echarts.apache.org/examples/en/index.html
Nvd3 Charts

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

	
		
	

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


/*-----nvd3-chart1-----*/

historicalBarChart = [
		{
			key: "Cumulative Return",
			values: [
				{
					"label" : "A" ,
					"value" : 24,
					"color":"#2d66f7"
				} ,
				{
					"label" : "B" ,
					"value" : 10,
					"color":"#fdb901"
				} ,
				{
					"label" : "C" ,
					"value" : 35,
					"color":"#fc9197"
				} ,
				{
					"label" : "D" ,
					"value" : 150,
					"color":"#f72d66"
				} ,
				{
					"label" : "E" ,
					"value" : 120,
					"color":"#28afd0"
				} ,
				{
					"label" : "F" ,
					"value" : 95,
					"color":"#2d66f7"
				} ,
				{
					"label" : "G" ,
					"value" : 13,
					"color":"#17a2b8"
				} ,
				{
					"label" : "H" ,
					"value" : 5,
					"color":"#ecb403"
				}
			]
		}
	];

	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/examples/index.html
Copyright © Clont. Designed by Spruko All rights reserved.