LearnByCodingSuite

A compilation of small apps built to understand various concepts I come across with.

Table of Contents

• Axios Post Demo
  • Why axios is used?
• chart-js-demo
• Horizontal scrollable line chart
• Realtime CPU Usage Demo
• Realtime Graph Socket Demo
• WebSocket Demo
  • Why use WebSockets?
• AmchartJS Radar Gauge chart :

Axios Post Demo

Why axios is used?

• send asynchronous HTTP requests to REST endpoints
• perform CRUD operations
• communicate with the backend

chart-js-demo

A static app to learn setup a simple line chart with the help of ChartJS library.

Horizontal scrollable line chart

A linechart which limits the number of labels displayed on the x axis at a time and uses the scrolling effect to navigate to the rest of the data.

Realtime CPU Usage Demo

Tracks the CPU usage in realtime using the OS Utils and the ChartJS libraries.

Realtime Graph Socket Demo

Plots the data generated by Math.random()

WebSocket Demo

Server Console

Data sent from the client

Client Console

Why use WebSockets?

• When the data exchange is 2-way (not just from server to client)
• Connection is initiated only when data is required and ended immediately after the data is fetched.
• Keeps the number of active connections to database at minimum.

AmchartJS Radar Gauge chart :