Build a realtime chart with Vue.js

has become a very important part of our lives recently and making sense of that data is equally important. There is no point in having data if you cannot track or analyze it, especially if this data has anything to do with finances. Data That’s why we will be building an expense and income tracker chart, with realtime features using . Our interactive dashboard will have a line chart that displays your income and expenses for each day. You’ll be able to add new expenses and income and see the chart update in real time. Pusher The dashboard chart will be powered by + as the backend server and + for the frontend bootstrapped by . Node.js Express Vue vue-chartjs vue-cli Scaffolding the app with vue-cli vue-cli is a simple CLI for scaffolding Vue.js projects. We’ll install vue-cli and then use it to bootstrap the app using the webpack template, with the following commands: npm install -g vue-cli vue init webpack-simple realtime-chart-pusher Tip: The webpack-simple template is a simple webpack + vue-loader setup for quick prototyping. You can read more about that here . Setting up Node.js Server Next thing to do is set up a server that will help us communicate with Pusher. I’m going to assume that both Node and npm are installed on your system. We will then install the dependencies we will be using for the Node server. npm install body-parser express nodemon pusher Tip: nodemon will watch the files in the directory in which nodemon was started, and if any files change, nodemon will automatically restart your node application. One more thing, we are going to need an entry point/file for our Node server. We can do that by creating a file in the root of the app. server.js Pusher Setup To implement the realtime functionality, we’ll need the power of Pusher. If you haven’t already, and create a new app. When your new app is created, get your app_id, keys and cluster from the Pusher dashboard. sign up for a Pusher account App Setup Now that we have a Pusher account, and have installed the dependencies needed for the Node.js backend, let’s get building. Let’s write code for the file. server.js Let’s have a look at what’s happening here. We require Express, path, body-parser and Pusher and we initialized express() with app. We use body-parser to extract the entire body portion of an incoming request stream and expose it on req.body. Pusher is also initialized with the app credentials and cluster from your dashboard. Make sure to update that, or else the Node server will have no connection to the dashboard. Lastly, the Node server will run on the 5000 port. Next thing to do is define our app’s route and also add mock data for the expenses and income chart. Update your server.js file with the following. First, we have an expensesList object with the data containing expenses and income for particular days. app.get('/finances', (req,res) => { res.send(expensesList); }); This route simply sends the expensesList object as JSON. We use this route to get the data and display on the frontend. The route sure does a lot. It’s a POST route, which means we will be expecting some incoming data (in this case, expense amount and income amount). /expense/add We then push this new income and expense to the existing one, after which we also push the updated expensesList to Pusher. Lastly, we send a JSON as a response to the route, containing the latest income, expense, date and updated expensesList. Your final should look like this: server.js Building the Frontend (Vue + vue-chartjs) Most of the frontend work will be done inside the folder. Navigate to that directory and you should see a file. You can either delete that file or rename to as we will be needing a file inside the components folder. src/components Hello.vue Home.vue Home.vue Before we get started with building the chart and displaying it, there are a couple of things we need to do. Open up the file in the folder and replace with the following code: App.vue src Next, we will install , , (Pusher’s library) and (We’ll use axios to make API requests). and then add them to the app. vue-chartjs momentjs pusher-js Javascript axios Vue.js npm install axios vue-chartjs pusher-js moment Once that’s done, we’ll import axios and register it globally in our app. We can do that by opening the file in the folder. main.js src Next, let’s create a Vue.js component that will help to display our chart. We are going to use this to specify what type of chart we want, configure its appearance and how it behaves. We’ll then import this component into the component and use it there. This is one of the advantages of , it works by importing the base chart class, which we can then extend. Let’s go ahead and create that component. Create a new file called inside the folder, and edit with the code below. Home.vue vue-chartjs LineChart.vue src/components In the code block above, we imported the Line Chart from vue-chartjs and the mixins module. Chart.js ordinarily does not provide an option for an automatic update whenever a dataset changes but that can be done in vue-chartjs with the help of the following mixins: reactiveProp reactiveData These mixins automatically create as a prop or data and add a watcher. If data has changed, the chart will update. Read more . chartData here Also, the function inside the function is responsible for rendering the chart. is an object containing the dataset needed for the chart and we’ll get that by including it as a prop in the template, contains the options object that determines the appearance and configuration of the chart. this.renderChart() mounted this.chartData Home.vue this.options We now have a component, but how can we see our chart and test its realtime functionality? We do that by adding the to our component as well as subscribing to our Pusher channel via pusher-js. LineChart LineChart Home.vue Open up the file and edit with the following: Home.vue fillData This function gets called immediately the app is and it basically makes an API request to the Node backend ( /finances) and retrieves the expensesList. mounted A GET request is made to the route which in turn returns the latest and we then manipulate that data with Javascript’s and assign it to various variables. /finances Node.js expensesList .map addExpenses The code block above simply utilizes a POST method route to to update (Remember route in the Node server sends the updated to the Pusher Dashboard) along with the income, expense and date data. /expense/add expensesList /expense/add expensesList It then uses the data gotten from via to build the Line Chart again and adds the new entry automatically to the Chart. Pusher channel.bind fetchData This function gets called after the Vue instance is and it also listens for changes to the Chart’s dataset via Pusher and automatically updates the Line Chart. created Your final Home.vue file should look like this: One more thing! Before we can run our app, we need to do something called . API proxying allows us to integrate our vue-cli app with a backend server (Node server in our case). This means we can run the dev server and the API backend side-by-side and let the dev server proxy all API requests to the actual backend. API proxying We can enable API proxying by editing the option in . You can edit with the code below. dev.proxyTable config/index.js After that has been done, we are finally ready to see our app and you can run to start the app. npm run dev That’s it! At this point, you should have a realtime dashboard chart that updates in realtime. You can check out the live demo or go to the code for the whole app, which is hosted on . here Github for your perusal Conclusion We’ve seen how to build a basic Line Chart with ChartJS in Vue with the help of vue-chartjs and also added realtime features thanks to Pusher. Then we saw how to use reactiveProps to make ChartJS update its dataset if there’s been a change in the dataset. We also saw how to use Pusher to trigger events on the server and listen for them on the client side using JS. Have you built anything cool with Pusher recently, a chart maybe? Let’s know in the responses below. This post first appeared on the Pusher blog .