ChartJS – Hướng dẫn sử dụng biểu đồ ChartJS

Bài viết này hướng dẫn bạn cách tích hợp ChartJS và sử dụng biểu đồ trong ứng dụng web, các bước thực hiện khá đơn giản như sau:

  • Download ChartJS và tích hợp vào trang như sau

<script src=”Scripts/Chart.min.js” />;

  • Khai báo canvas trong HTML như sau

<canvas id=”clients” width=”500″ height=”350″></canvas>

  • Load dữ liệu cho biểu đồ và vẽ biểu đồ

<script>
var barData = {
labels: [‘Italy’, ‘UK’, ‘USA’, ‘Germany’, ‘France’, ‘Japan’],
datasets: [
{
label: ‘2010 customers #’,
fillColor: ‘#382765’,
data: [2500, 1902, 1041, 610, 1245, 952]
},
{
label: ‘2014 customers #’,
fillColor: ‘#7BC225’,
data: [3104, 1689, 1318, 589, 1199, 1436]
}
]
};

var context = document.getElementById(‘clients’).getContext(‘2d’);
var clientsChart = new Chart(context).Bar(barData);
</script>

Hướng dẫn sử dụng DataTables

Các bước dưới đây hướng dẫn cách sử dụng DataTables pluggin

  1. _Lauout.cshtml

Chèn đoạn code sau vào phần

<head>
….
<link href=”https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css&#8221; rel=”stylesheet” />
</head>

Chép đoạn code sau trước thẻ đóng </form>

src

2. Trong trang index.cshtml hoặc trang bất kỳ dùng bảng

1) Chỉnh sửa lại id của bảng và class như sau

<table class=”display” id=”mytable”>
<thead>
<tr>
<th>

//Những phần highlight là những nội dung thay đổi và bổ sung
2) Trước vòng lặp để hiển thị dữ liệu cho bảng, bổ sung thêm thẻ <tbody>
<tbody>
@foreach (var item in Model)
{

….

}
</tbody>

3) Chèn thêm đoạn mã sau vào cuối trang Index.cshtml hoặc trang sử dụng bảng bất kỳ
@section scripts
{
    $(document).ready(function () {
        $(‘#mytable’).DataTable();
    });
}

Bootstrap Dropdown menu is not working

Hướng dẫn dưới đây giúp khắc phục lỗi Bootstrap Dropdown không hoạt động (Bootstrap Dropdown menu is not working)

Khắc phục:

  1. Thứ tự file JS đặt trước file CSS trong phần head của trang
  2. Thứ tự file Jquery.js đặt trước bootstrap.js

src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js“>

src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”>

<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#8221; integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>

 

Khắc phục lỗi Chrome Cast

Khi sử dụng trình duyệt Chrome gặp phải lỗi Chrome cast, lỗi nhìn thấy khi bạn nhấn F12 hoặc sử dụng chức năng Inspect element

Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js

Để khắc phục lỗi này, bạn chỉ cần cài Chromecast extension là tránh được những thông báo lỗi phiền phức đó bằng cách vào liên kết sau Install chrome cast extension

Capture

Click Add to chrome góc trên bên phải để cài đặt Extension này, lỗi sẽ được khắc phục sau khi cài đặt thành công.

 

 

Để xem được file MP4 trong HTML

Làm thế nào để play được file MP4 trong asp.net?

Loay hoay mãi cuối cùng cũng tìm ra được lý do vì sao không play được file mp4 trong ASP.NET, có 2 vấn đề cần được thiết lập ở đây:
1/ Thiết lập MIME Type (.mp4 – Video/mp4) trong IIS
Mở IIS > Default site hoặc Site cần thiết lập > Chọn MIME Types trong tab Featured View
Click Add và nhập .mp4 và ô thứ nhất (Extension), và Video/mp4 trong ô thứ 2
2/ Định dạng hiển thị được của MP4 là PHẢI LÀ mp4 h264
Dùng bất kỳ tool convert video nào bất kỳ để convert mp4 sang định dạng h264 (mp4).

Hướng dẫn sử dụng fancyBox để làm image Gallery

Dưới đây là các bước hướng dẫn sử dụng fancyBox để làm image Gallery

  • Search google bằng từ khóa FancyBox hoặc truy cập trực tiếp web site fancyapps.com
  • Download và giải nén file, sau đó copy 2 thư mục: lib và source vào trong thư mục gốc của website
  • Tích hợp vào trang web với các bước sau:

Copy đoạn code sau vào tài liệu HTML, để ngay trước thẻ đóng </body>

 type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
 type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5">
 type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});

</body>
Thiết lập class cho các thẻ imgae như sau

<ul>
<li><a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt=""/></a></li>
</ul>