Data Visualization with JavaScript
Intro
Making usage of chart.js as open-source library for data visualization. We can simply embed a chart into HTML structure rendering it in a canvas tag. Working with react, there is a need to import a chart from react library: react-chartjs-2.
Why React:
- When you have to set up a static web-site, if there are a couple of pages, browser downloads entire html for that page each time you nagivate to different page.
- When you have multiple page web-site on React, when you navigate all browser downloads is for example an API request that refreshes only one element of the site.
- React has useful mechanizm called code splitting what means, instead of loading all the JavaScript at once, browser loads it incrementally as you use the website.
Features
App includes following features:
Demo
Dashboard:
- Application displays interactive bar chart.
- On the right top we can choose data category to visualize with chart.
- Below menu there is a data table.
- Chart and table gets updated with every choose from the menu.
- With react, only chart and table get rendered when user's action.
Responsive web design:
- For having a web page fully responsive - adjustable to device's resolution - I use sepcial CSS techinque which are flex boxes.
- Flex Boxes allows to align containers evenly in rows and/or columns.
- I also apply @media syntax for shifting rows into columns when mobile device displays application.
Setup
Npm installation:
npm install --save chart.js
npm install --save react-chartjs-2
npm install react-number-format --save
import { Bar, Line, Pie } from 'react-chartjs-2';
npm start