Course info
Jan 20, 2016
3h 14m

In this course, we take a fictitious company who has a new web application in which they would like to build a real-time dashboard showing usage. The web application follows a typical structure storing data in MySQL and running on Node.js. With data flowing into our database in real-time, we use Highcharts.js to visualize this data and give our users a view of the activity in the application. You can use this concept to build your own dashboards in your applications and use data to deliver insight to your users.

About the author
About the author

I work as a feedback mechanism for organizations and teams to help them understand what’s going on with their products and processes. I do this by collecting and organizing their data, visually exploring it, enriching it with other data and metrics, then presenting my findings using creative information design techniques. This leads to improved business performance and often sparks a data-driven culture throughout my clients organizations.

More from the author
What's New in Tableau 10
1h 50m
Aug 30, 2016
Force Layout Graphs in D3
2h 33m
Aug 29, 2016
D3: The Big Picture
1h 26m
Aug 16, 2016
More courses by Ben Sullins
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Ben Sullins, and welcome to my course Real-time Web Dashboards with Highcharts. Highcharts is taking over web dashboarding and is being adopted by companies large and small for visualizing their data in real time on the web. In this course, we're going to learn the techniques and practical skills you need to build beautiful, interactive dashboards on the web and have them update in real time. Some of the major topics that we'll cover include visualizing data on the web in Highcharts, setting up your dashboards to update in real time, and building interactive dashboards for your users. By the end of this course, you'll have built a fully functional real-time web dashboard that updates as users send chat messages in our sample program, which is based on Node. js and MySQL. Before beginning the course, you probably should be familiar with the basic web technologies such as CSS, JavaScript, and HTML. The application uses some PHP code, and database knowledge is helpful since we're using a database here. I hope you'll join me on this journey to learn how to build real-time web dashboards with Highcharts in this course at Pluralsight.

Getting Started
Hello, and welcome to this course on Real-time Web Dashboards with Highcharts. I'm Ben Sullins, and in this module I'm going to take you through getting started. What you're going to learn here are how to set up Highcharts. Then we'll go through the basics of Highcharts. We'll talk about the theory about which charts to choose when and types of things to consider when building charts. We'll go into dashboard design and understanding the difference between a single chart and what a dashboard is and some considerations for how to do that. And then we'll get into the actual real-time bit. So once we've done all this, we've learned how to build charts, we've learned how to build dashboards, we'll get into making them real-time and actually updating every time an event actually occurs. For the course, we have a few goals here. The first one is to talk about the theory. We're going to understand all the concepts and everything about why this works and why to do this and how it actually fits together. Then we're going to practice it. We're actually going to implement some of these things. It's going to be a very demo heavy course where we're going to write a lot of code and build a lot of cool things. And in order to do it, I want to make it real world, so we're going to have a story that we follow, which is a fictional company, but represents a lot of common scenarios that you may face in your world. There are two methods of learning with this course. You can go start to finish and just take it from end-to- end, or if you already have some knowledge of this and you just want to fill in the gaps, each module will be compartmentalized, so you can really just focus on that piece if you're just focusing on one specific thing you're trying to learn versus taking it end-to-end.

Welcome to this module on Getting Setup. Here we're going to learn about the requirements, what we actually need to run Highcharts. We'll look at browser compatibility. We'll actually go through our Cloud9 setup and deploying all the code and getting the actual application up and running. We'll consider the installation options for Highcharts itself. And we'll build our first chart. And lastly, I'll give you more details on where you can find information regarding some of the setup items.

Charting Concepts
Welcome to this module on Charting Concepts. Today, what we're going to cover are the anatomy of a chart, choosing a chart type, certain chart types we probably should avoid, different chart options, and this is a Highcharts thing about how to set options, drawing multiple charts on the page. It's pretty straightforward, but I just want to cover that so you understand. Let's get started.

Building Charts
Welcome to this module on Building Charts. In this module, we're going to learn about some basic charts like bars, line charts, and area charts. We're going to dig into some more charts like funnels, heat maps, and scatter plots, as well as tree maps. And we're going to show some advanced ones--box plots, stock charts, and maps. Let's get started.

Working with Data
Welcome to this module on Working with Data. Here, we're going to take a look at various different data sources to work with--CSVs, JSON data, Google spreadsheets, API sources, and, lastly, how to get live data. Let's get started.

Creating Themes
Welcome to this module on creating themes. Here what we're going to learn are how to style elements, including what Highcharts lets us style, the types of colors and color options that are supported by Highcharts. And then we'll talk about themes, which is the collection of all this and applying it universally across many different dashboards and many different visualizations. Let's get started.

Building a Real-time Dashboard
Welcome to this last module in this course on Building Real-time Dashboards with Highcharts. In this one, we're actually going to bring it all together and build a actual real-time dashboard. So we're going to start by understanding some dashboard design concepts. I just want to go through these so that when you go down this route, you have some of the theory behind why dashboards exist and maybe things to remember or really pay attention to when you design them. Forget the functional aspect of just getting it out there and working. That's one thing, but we really want to make sure that when we do that, it is with a solid foundation of good design practices. So that way our users are engaged and really get what they're looking for out of it. Then we're going to go into the time series trend. We'll go through the steps of building that and making it real time to pull from our MySQL database. Next, I'll build the top users chart. This chart will be to show the top users of our app. Then we'll build the days of week chart. Lastly, we'll build the dashboard and bring it all together.