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.
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.
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.
Setup 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.