Creating an admin dashboard with charts using Reactjs and D3js

admindashboard
admindashboard

In the previous tutorial we covered user registration and login using reactjs, nodejs and mysql database along with file upload in the next part here. In this tutorial we are going to create admin dashboard to view data from mysql database and show the data in pie chart using a d3.js(javascript charting library).

So lets start with creating basic apis in nodejs to get all records from mysql database and send it to frontend. We are going to create a new file in routes folder called dbroutes.js. First create a connection to mysql database using mysql npm module.

Next we write a handler function to get all records..

Replace tablename with appropriate table in your database.Next we need to modify server.js to handle new api request.

We have imported dbroutes file at line no.4 and created a new api handler at line no.21.You can test your api in postman/browser using following url:

Now lets start frontend development in reactjs. I am going to use materialui for ui development,superagent for ajax requests and react-d3 for charting purposes.

We are going to use create-react-app for setting up the base project which can be installed using following command:-

Next run the following command to set up a new react project:

Here is my package.json with all the modules required for this project:

Copy the dependencies json into your project package file and run npm/yarn install to all the required dependencies.Here is the complete file structure of the project.

We have a routes folder to store all react-router routes,components which contain individual app screens within src folder. We are going to concentrate on MysqlMonitoring component in this tutorial:

We have setup page with tabbar at the top and two empty state variables in between.Next step is to fetch data from node server in componentDidMount by sending XMLHttprequest using superagent module:

Here is a sample response from server which comes in res variable above to keep things in perspective:

Next we are going to populate mysqlTables array using Tables provided by material-ui:

The code might seem a bit long but it is quite easy to understand.We run a map function to iterate through every json item in results, then check if index is 0 and push all keys of json from first jsonarray item and populate table header.Next we iterate through values of json keys and populate table columns.If this all seems to confusing simply keep in mind that we are simply trying to populate table head and body using multiple JSON array iterations.The end result is this:

MYSQLTABLE
MYSQLTABLE

Next we are going to create a simple pie chart using react-d3 by modifying componentDidMount:

Piechart takes following data points as parameters:

  • data: source json to generate chart
  • name: json key to take as input parameter to show category names
  • value: json key to takee input values
  • chartSeries: Custom names for each name in name variable defined above(#nameception :p)

Here is what the final chart looks like:

mysqlpiechart
mysqlpiechart

Before proceeding further I think it would be better if you go through sample implementation of piechart on reactd3 website here.

Since piechart requires data as name value json pairs, I had to create custom data json as follows:

Where piechart will pickup name field as to display pie categories and count to calculate ratio between different categories  based on the values.In my case there were only two entries so teachersCount and studentCount is 1 due to which both categories occupy 50% of the pie chart.

That concludes today’s tutorial. This component is a part of larger project and you can find the complete source code on github here.

In the next I have covered how to get number of files uploaded by user using mysql update query.You can check out the tutorial here: Tutorial.

Bonus Tips:

The purpose of this tutorial was to make reader get acquainted with basics of d3js so I have kept the code simple and used basic chart.You can extend the dashboard according to your needs and used more charts/ui elements like grids to make it more immersive and useful.

The table population code in componentDidMount method was written in bit of hurry and can be optimized further.

Connect Deeper:

In the next tutorial I am planning to show you how to create terminal emulator in browser similar to the ones found in cloud based ide’s like c9,koding in react and run the commands on remote server using nodejs so follow our facebook page here: Technoetics or subscribe to my mailing list below to get notified about future articles

Technoetics newsletter

Get notified about upcoming articles,tips and tricks personally hand-delivered to your inbox

 

Share post-
About Saurabh Mhatre 70 Articles
Currently working in web and hybrid application development