@manhnguyenv

Welcome to my blog!

Chart + SignalR + Real-time

July 31, 2018 10:01

Chart + SignalR + Real-time (edit)

16 JavaScript Libraries for Creating Beautiful Charts
https://www.sitepoint.com/15-best-javascript-charting-libraries/

https://viblo.asia/p/chia-se-ve-su-dung-thu-vien-highcharts-MgNeWoqyeYx
Các loại biểu đồ: line, spline, area, areaspline, column, bar, pie & scatter

Data Visualization: Hình ảnh hóa dữ liệu
https://google-developers.appspot.com/chart/interactive/docs/gallery
https://developers.google.com/chart/interactive/docs/gallery

Combo Chart
https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart

Material Column Charts
https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

Material Bar Charts
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart

Google Chart
https://techbrij.com/google-chart-dynamic-series-column-javascript-array

Creating a chart to display real-time/live data using SignalR, jQuery Flot and ASP.NET MVC
https://github.com/techbrij/Flot-SignalR-ASPNET-MVC

Thay đổi tệp XML, Maps thay đổi theo
https://techbrij.com/realtime-google-maps-bing-xml-signalr-file-changes

Thay đổi DB sẽ báo ngay
https://techbrij.com/database-change-notifications-asp-net-signalr-sqldependency

Tutorial: Getting Started with SignalR 2
+ Visual Studio 2013
+ .NET 4.5
+ SignalR version 2
https://docs.microsoft.com/en-us/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr

Learn How to implement Real-Time Chart using HTML5 Push Notification (SSE) and ASP.NET Web API. For more information, visit our website
https://github.com/techbrij/HTML5-Push-Flot-Chart-ASPNET-WEBAPI


https://www.strathweb.com/2012/05/native-html5-push-notifications-with-asp-net-web-api-and-knockout-js/
https://github.com/filipw/html5-push-asp.net-web-api/

https://techbrij.com/database-change-notifications-asp-net-signalr-sqldependency

SignalR MVC 4
https://code.msdn.microsoft.com/SignalR-Getting-Started-b9d18aa9

SignalR MVC 5
https://code.msdn.microsoft.com/Getting-Started-with-c366b2f3

ChartJS
http://www.chartjs.org/

MULTI-LINE LABELS
http://gionkunz.github.io/chartist-js/examples.html

EXTREME RESPONSIVE CONFIGURATION
http://gionkunz.github.io/chartist-js/examples.html

highcharts: Interactive JavaScript charts for your webpage (https://www.highcharts.com/)
chartjs: Open source HTML5 Charts for your website (https://www.chartjs.org)


Chartist.js
D3.js
Google Charts
Peity: Mã nguồn mở theo MIT License.
Easy Pie Chart: Mã nguồn mở theo MIT License.
FusionCharts
jqPlot
jQuery Sparklines: Mã nguồn mở. Free cho mọi mục đích sử dụng.
jQuery.Gantt
Flot
Morris.js
CanvasJS jQuery
Cytoscape.js

C3.js is a great way to graph realtime data
https://c3js.org/examples.html

Combination Chart (Bar Chart + Line Chart)
https://c3js.org/samples/chart_combination.html

Chart Size
https://c3js.org/samples/options_size.html

C3.js: D3-based reusable chart library
https://c3js.org/

D3.js: Data-Driven Documents
https://d3js.org

Data Color
https://c3js.org/samples/data_color.html

AdminLTE: AdminLTE - Free Premium Admin control Panel Theme Based On Bootstrap 3.x
+ https://adminlte.io/themes/AdminLTE/index.html
+ https://adminlte.io/themes/AdminLTE/index2.html
+ https://adminlte.io/themes/dev/AdminLTE/index3.html
+ https://github.com/almasaeed2010/AdminLTE/releases
+ https://github.com/almasaeed2010/AdminLTE/
+ Combination Chart (Bar Chart + Line Chart): tạo biểu đồ kết hợp 2 loại chart
Gentelella Alela: https://colorlib.com/polygon/gentelella/index.html


Hầu như các lập trình viên đều biết đến 4 tính chất cơ bản trong OOP:
Tính trừu tượng
Tính bao đóng
Tính kế thừa
Tính đa hình

SOLID bao gồm 5 nguyên tắc chính sau đây:
1/ Single responsibility principle: Một class chỉ nên có một lý do duy nhất để thay đổi, có nghĩa là class đó chỉ chịu một trách nhiệm duy nhất
2/ Open/closed principle: nên viết class mở rộng class cũ (bằng cách kế thừa) chứ không nên sửa đổi class đó
+ Open cho việc mở rộng có nghĩa là chúng ta có thể thêm các tính năng hoặc thành phần mới vào mà không vi phạm code hiện tại
+ Closed cho việc sửa đổi có nghĩa là chúng ta không nên thay đổi quá nhiều chức năng hiện có, bởi vì nó sẽ bắt buộc ta phải tái cấu trúc rất nhiều đoạn code
3/ Liskov substitution principle: Trong một chương trình, các object của class con có thể thay thế class cha mà không làm thay đổi tính đúng đắn của chương trình
4/ Interface segregation principle: Thay vì dùng 1 interface lớn, ta nên tách thành nhiều interface nhỏ, với nhiều mục đích cụ thể
5/ Dependency inversion principle
+ Các module cấp cao không nên phụ thuộc vào các modules cấp thấp. Cả 2 nên phụ thuộc vào abstraction.
+ Interface (abstraction) không nên phụ thuộc vào chi tiết, mà ngược lại. ( Các class giao tiếp với nhau thông qua interface, không phải thông qua implementation.)

Load Balancer
Load Balancing with HAProxy
HAProxy is free, open source software that provides a high availability load balancer and proxy server for TCP and HTTP-based applications that spreads requests across multiple servers.

HAProxy (High Availability Proxy) is able to handle a lot of traffic.
HAProxy can handle a large number of concurrent requests.


https://serversforhackers.com/c/load-balancing-with-haproxy

Vì sao Load Balancer lại quan trọng với doanh nghiệp?
https://tech.vccloud.vn/vi-sao-load-balancer-lai-quan-trong-voi-doanh-nghiep-20180727112222729.htm

DisplayJS
Framework nhỏ này giúp việc đồng bộ dữ liệu với DOM dễ dàng hơn. Thay vì phải tự thiết lập và cập nhật nội dung của trang, với DisplayJS, bạn có thể ánh xạ các biến JavaScript với các phần tử HTML cụ thể, tương tự như cách React hoặc Vue.js xử lý template.

Front end Optimization – 9 tips để cải thiện Web Performance
https://techtalk.vn/front-end-optimization-9-tips-de-cai-thien-web-performance.html
-----------------------------------------------------------------------------------

30 Trang web nên theo dõi nếu bạn là một lập trình viên web
https://techtalk.vn/30-trang-web-nen-theo-doi-neu-ban-la-mot-lap-trinh-vien-web.html
-----------------------------------------------------------------------------------

15 thư viện JavaScript và CSS hấp dẫn trong tháng 9 năm 2017
https://techtalk.vn/15-thu-vien-javascript-va-css-hap-dan-trong-thang-9-nam-2017.html
-----------------------------------------------------------------------------------
Trowel
Một bản SASS mở rộng cung cấp một cách mới để viết các biến scss. Nó cho phép bạn nhóm nhiều biến thành một đối tượng, làm cho scss của bạn dễ đọc và viết hơn.

Vivify
Vivify là thư viện animation dành riêng cho CSS. Bạn chỉ cần thêm lớp vivify vào phần tử bạn muốn sinh động. Bạn cũng có thể thêm các lớp infinite để làm cho các hình động lặp lại theo vòng lặp. Thư viện cung cấp cho bạn hơn 50 animation với các hiệu ứng cc và di chuyển.

Push
Push là thư viện tốt nhất để quản lý thông báo trên màn hình JavaScript. Nó dựa trên Notification API mạnh mẽ nhưng cũng hoạt động như một giải pháp kiểm tra chéo trình duyệt (Cross Browser) đáng tin cậy và sẽ trở lại các triển khai cũ hơn nếu trình duyệt của người dùng không hỗ trợ cho API mới.
Source tại đây: https://github.com/Nickersoft/push.js
Demo tại đây: https://pushjs.org

Tons of Checkboxes
Một bộ sưu tập các checkbox component chỉ dành cho CSS. Có nhiều kiểu khác nhau bao gồm Toggles, Switches, Circles và Squares. Tất cả các checkbox có bốn kích cỡ từ nhỏ đến rất lớn. Tương thích với tất cả các trình duyệt hiện đại bao gồm IE9 +.
Source tại đây: https://github.com/hunzaboy/CSS-Checkbox-Library
Demo tại đây: https://hunzaboy.github.io/CSS-Checkbox-Library/

Syncing IndexedDB Database with Online Database using ASP.NET Web API
https://techbrij.com/
https://github.com/techbrij/SyncIndexedDB

Tăng sức mạnh JavaScript với lodash
https://toidicodedao.com/2015/04/16/tang-suc-manh-cho-javascript-voi-lodash/

Làm nổi bật code với thư viện sau
https://o7planning.org/vi/10375/lam-noi-bat-code-voi-thu-vien-javascript-syntaxhighlighter

SqlDependency + SqlCacheDependency
https://dielel.wordpress.com/2017/02/05/sqldependency-theo-doi-thay-doi-tren-database/
https://stackoverflow.com/questions/7588572/what-are-the-limitations-of-sqldependency


JavaScript cơ bản
https://ngocminhtran.com/javascript-co-ban/
-----------------------------------------------------

Thực hành tạo thư viện trong JavaScript
-----------------------------------------------------
Mở trình soạn thảo (Visual Studio, Eclipse, Notepad, v.v.) và nhập đoạn mã sau:

var MyLibrary = {};
MyLibrary.sendAlert = function(mesg) {
alert(mesg);
};

Lưu thành tập tin library.js và đóng.

Mở tập tin HTML (ví dụ librarypage.html) liên kết và sử dụng thư viện library.js như sau:

<!doctype html>
<html>
<head>
<title>A Basic Example</title>
<script type="text/javascript" src="library.js"></script>
</head>
<body>
<script type="text/javascript">
MyLibrary.sendAlert("hello, this is the message");
</script>
</body>
</html>

Chú ý khi tạo thư viện không sử dụng trùng tên hàm hay từ khoá được cung cấp bởi JavaScript (trong đặc tả ECMA).

Categories