04/10/2018, 20:17

Hiển thị dữ liệu trên biểu đồ đường và hình cột với jQuery

Có khá nhiều bài viết trên mạng giúp các bạn hiển thị dữ liệu dưới dạng biểu đồ , nhưng bài viết mà mình chia sẻ cho các bạn ngày hôm nay có lẽ sẽ phù hợp với các bạn hơn vì tính đơn giản và dễ dàng tùy chỉnh của nó. Nếu muốn các bạn có thể tham khảo thêm bài viết Dễ dàng tạo biểu đồ trên web với ...

Có khá nhiều bài viết trên mạng giúp các bạn hiển thị dữ liệu dưới dạng biểu đồ , nhưng bài viết mà mình chia sẻ cho các bạn ngày hôm nay có lẽ sẽ phù hợp với các bạn hơn vì tính đơn giản và dễ dàng tùy chỉnh của nó. Nếu muốn các bạn có thể tham khảo thêm bài viết Dễ dàng tạo biểu đồ trên web với Chart.js

 Hiển thị dữ liệu trên biểu đồ đường và hình cột với jQuery

Xem Demo | Download

HTML

Đầu tiên, chúng ta cần khung chuẩn html giống như bên dưới.

 
<div id="graph-wrapper">
	<div class="graph-info">
		<a href="javascript:void(0)" class="visitors">Visitors</a>
		<a href="javascript:void(0)" class="returning">Returning Visitors</a>

		<a href="#" id="bars"><span></span></a>
		<a href="#" id="lines" class="active"><span></span></a>
	</div>

	<div class="graph-container">
		<div id="graph-lines"></div>
		<div id="graph-bars"></div>
	</div>
</div>
 

CSS

Sau đó copy đoạn css này vào.

/* Resets */
.graph-container,
.graph-container div,
.graph-container a,
.graph-container span {
	margin: 0;
	padding: 0;
}

/* Gradinet and Rounded Corners */
.graph-container, #tooltip, .graph-info a {
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #f9f9f9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f9f9f9 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#f9f9f9 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#f9f9f9 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#f9f9f9 100%);

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/*  Graph Container */
.graph-container {
	position: relative;
	awidth: 550px;
	height: 300px;
	padding: 20px;
	
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.1);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0,.1);
	box-shadow: 0px 1px 2px rgba(0,0,0,.1);
}

.graph-container > div {
	position: absolute;
	awidth: inherit;
	height: inherit;
	top: 10px;
	left: 25px;
}

.graph-info {
	awidth: 590px;
	margin-bottom: 10px;
}

/* Text Styles */
#tooltip, .graph-info a {
	height: 20px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;
	line-height: 20px;
	color: #646464;
}

.tickLabel {
	font-weight: bold;
	font-size: 12px;
	color: #666;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Tooltip */
#tooltip {
	position: absolute;
	display: none;
	padding: 5px 10px;
	border: 1px solid #e1e1e1;
}

/* Links */
.graph-info a {
	position: relative;
	display: inline-block;
	float: left;
	padding: 7px 10px 5px 30px;
	margin-right: 10px;
	text-decoration: none;
	cursor: default;
}

/* Color Circle for Links */
.graph-info a:before {
	position: absolute;
	display: block;
	content: ';
	awidth: 8px;
	height: 8px;
	top: 13px;
	left: 13px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* Colors For each Link */
.graph-info .visitors { border-bottom: 2px solid #71c73e; }
.graph-info .returning { border-bottom: 2px solid #77b7c5; }

.graph-info .visitors:before { background: #71c73e; }
.graph-info .returning:before { background: #77b7c5; }

/* Lines & Bars Buttons */
#lines, #bars {
	awidth: 34px;
	height: 32px;
	padding: 0;
	margin-right: 0;
	margin-left: 10px;
	border-bottom: 2px solid #71c73e;
	float: right;
	cursor: pointer;
}

#lines.active, #bars.active {
	background: #82d344;
	background: -moz-linear-gradient(top,  #82d344 0%, #71c73e 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#71c73e));
	background: -webkit-linear-gradient(top,  #82d344 0%,#71c73e 100%);
	background: -o-linear-gradient(top,  #82d344 0%,#71c73e 100%);
	background: -ms-linear-gradient(top,  #82d344 0%,#71c73e 100%);
	background: linear-gradient(to bottom,  #82d344 0%,#71c73e 100%);
}

#lines span, #bars span {
	display: block;
	awidth: 34px;
	height: 32px;
	background: url('img/lines.png') no-repeat 9px 12px;
}

#bars span { background: url('img/bars.png') no-repeat center 10px; }

#lines.active span { background-image: url('img/lines_active.png'); }
#bars.active span { background-image: url('img/bars_active.png'); }

/* Hide the First and Last Y Label */
.yAxis .tickLabel:first-child,
.yAxis .tickLabel:last-child { display: none; }

/* Clear Floats */
.graph-info:before, .graph-info:after,
.graph-container:before, .graph-container:after {
	content: ';
	display: block;
	clear: both;
}

jQuery

Đây là phần quan trọng nhất, để có thể hiển thị dữ liệu dưới dạng biểu đồ, chúng ta cần một jQuery plugin, plugin này có sẵn ở phần donwload. Các bạn nhớ chèn nó vào bên trong cùng với thư viện jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.flot.min.js"></script>

Kế đến, chúng ta sẽ khai báo dữ liệu theo định dạng như sau :

// Graph Data ##############################################
	var graphData = [{
			// Visits
			data: [ [6, 1300], [7, 1600], [8, 1900], [9, 2100], [10, 2500], [11, 2200], [12, 2000], [13, 1950], [14, 1900], [15, 2000] ],
			color: '#71c73e'
		}, {
			// Returning Visits
			data: [ [6, 500], [7, 600], [8, 550], [9, 600], [10, 800], [11, 900], [12, 800], [13, 850], [14, 830], [15, 1000] ],
			color: '#77b7c5',
			points: { radius: 4, fillColor: '#77b7c5' }
		}
	];

Biểu đồ đường

// Lines Graph #############################################
	$.plot($('#graph-lines'), graphData, {
		series: {
			points: {
				show: true,
				radius: 5
			},
			lines: {
				show: true
			},
			shadowSize: 0
		},
		grid: {
			color: '#646464',
			borderColor: 'transparent',
			borderWidth: 20,
			hoverable: true
		},
		xaxis: {
			tickColor: 'transparent',
			tickDecimals: 2
		},
		yaxis: {
			tickSize: 1000
		}
	});

Biểu đồ hình cột

// Bars Graph ##############################################
	$.plot($('#graph-bars'), graphData, {
		series: {
			bars: {
				show: true,
				barWidth: .9,
				align: 'center'
			},
			shadowSize: 0
		},
		grid: {
			color: '#646464',
			borderColor: 'transparent',
			borderWidth: 20,
			hoverable: true
		},
		xaxis: {
			tickColor: 'transparent',
			tickDecimals: 2
		},
		yaxis: {
			tickSize: 1000
		}
	});

Đoạn code này giúp các bạn chuyển đổi qua lại giữa các biểu đồ.

// Graph Toggle ############################################
	$('#graph-bars').hide();

	$('#lines').on('click', function (e) {
		$('#bars').removeClass('active');
		$('#graph-bars').fadeOut();
		$(this).addClass('active');
		$('#graph-lines').fadeIn();
		e.preventDefault();
	});

	$('#bars').on('click', function (e) {
		$('#lines').removeClass('active');
		$('#graph-lines').fadeOut();
		$(this).addClass('active');
		$('#graph-bars').fadeIn().removeClass('hidden');
		e.preventDefault();
	});

Hiển thị tooltips.

// Tooltip #################################################
	function showTooltip(x, y, contents) {
		$('<div id="tooltip">' + contents + '</div>').css({
			top: y - 16,
			left: x + 20
		}).appendTo('body').fadeIn();
	}

	var previousPoint = null;

	$('#graph-lines, #graph-bars').bind('plothover', function (event, pos, item) {
		if (item) {
			if (previousPoint != item.dataIndex) {
				previousPoint = item.dataIndex;
				$('#tooltip').remove();
				var x = item.datapoint[0],
					y = item.datapoint[1];
					showTooltip(item.pageX, item.pageY, y + ' visitors at ' + x + '.00h');
			}
		} else {
			$('#tooltip').remove();
			previousPoint = null;
		}
	});

Dựa vào biểu đồ, mình tin chắc là các bạn có thể hiểu dữ liệu được sắp xếp ra sao , và cũng hy vọng là các bạn có thể tùy chỉnh để có thể hiển thị dữ liệu theo ý muốn của mình.

Chúc các bạn thành công !

Tags: bar graphs bieu do jQuery Plugins line graph

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster

Bài liên quan

Hiển thị dữ liệu trên biểu đồ đường và hình cột với jQuery

Có khá nhiều bài viết trên mạng giúp các bạn hiển thị dữ liệu dưới dạng biểu đồ , nhưng bài viết mà mình chia sẻ cho các bạn ngày hôm nay có lẽ sẽ phù hợp với các bạn hơn vì tính đơn giản và dễ dàng tùy chỉnh của nó. Nếu muốn các bạn có thể tham khảo thêm bài viết Dễ dàng tạo biểu đồ trên web với ...

Trịnh Tiến Mạnh viết 20:17 ngày 04/10/2018

9 Công cụ quản lý mật khẩu bị rò rỉ dữ liệu trên Android

Password Managers – công lưu trữ và tạo mật khẩu an toàn cho webiste, ứng dụng và mạng giúp người dùng quản lý mật khẩu. Nhưng chính các công cụ này lại bị ảnh hưởng bởi lỗ hổng nghiêm trọng gây rò rỉ thông tin người dùng. Bản báo cáo được đăng tải bởi nhóm các chuyên gia đến từ học viện Công ...

Trịnh Tiến Mạnh viết 11:21 ngày 18/09/2018

Hiển thị dữ liệu trong Javascript

JavaScript có thể “hiển thị” dữ liệu bằng nhiều cách khác nhau: Viết thành một phần tử HTML, sử dụng innerHTML. Ghi vào đầu ra HTML bằng cách sử dụng document.write (). Viết vào một hộp cảnh báo, sử dụng window.alert (). Viết vào giao diện điều ...

Tạ Quốc Bảo viết 14:40 ngày 07/09/2018

Các cách đăng nhập cơ sở dữ liệu trên MS SQL Server

Đăng nhập là cách thức đơn giản để truy cập vào SQL Server, cũng như bạn dùng ID và mật khẩu để đăng nhập Windows hay tài khoản email. SQL Server có 4 loại đăng nhập. Theo thông tin đăng nhập của Windows Chỉ định riêng cho SQL Server Được tạo theo chứng ...

Bùi Văn Nam viết 10:51 ngày 22/08/2018

Cách hiển thị dữ liệu ra màn hình trong JavaScript

- Trong HTML, việc hiển thị một nội dung gì đó lên màn hình thật đơn giản, ta chỉ cần gõ trực tiếp nội dung muốn hiển thị là xong (Xem ví dụ) - Còn đối với JavaScript thì không được hỗ trợ hiển thị dữ liệu trực tiếp giống như trong HTML, mà phải thông qua một phương thức (Xem ví dụ) - Dưới ...

Tạ Quốc Bảo viết 10:41 ngày 18/08/2018
0