Realtime Graphs and Charts with Plotly and Firebase

Key Takeaways

in the age of big data and deep learning data visualization is an extremely important tool for many applications in this episode we're going to combine the plotly JS Library along with angular and Firebase to create three different types of charts that are capable of handling real-time data we'll start by building a basic 2D line chart and then we'll build up to a 3D topographical chart then we'll finish up with a tary chart that's capable of staying in sync with the real-time back end on Firebase the first step is to to install the plotly JS Library which we can do with npm install plotly.js flag saave then add it to the script section in the angular-cli Json file it's worth noting that plot Le is a pretty big Library so if you want to slim it down a little bit go to your node modules and find just the script that you need for your app in this case we're using the entire Library which is probably overkill for most situations then in your typing. D file add the plotly class so it's recognized by typescript now we can start building our first line chart this chart will just be completely static just to show you the general concepts behind plotly in the HTML create an empty div and then give it a template reference variable named chart then in the component typescript we'll use viewchild as well as element ref then we're going to build this chart service in The Next Step once we start using live data from Firebase so you can ignore that for now and we'll also use the low Dash Library so to get a hold of the div in the HTML we use viewchild and then reference that chart variable that we Nam there then we'll name it l in the typescript which is more or less an angular convention then to actually build a plotly chart there are three basic variables that you need to be aware of first we have element which is the HTML element that will be replaced by the chart and then we have data that's the actual data that's going to be displayed in the chart here we have a few numbers on the X and Y axis that will create a basic line chart with a curve the third variable is style which defines the style options that vary from chart to chart then to put everything together we just call plot le. plot and pass it The Element data and style back in the app we can see we get the simple line chart but it's packed with a bunch of features from plotly such as the ability to zoom in and zoom out you can save it as an image and do all kinds of different stuff to it so that was pretty simple now let's build a 3D chart that uses data from Firebase so I'm building a basic service here that injects the angular fire database then it Returns the data set we want as a Firebase list observable in this example my database is a collection of arrays with each array having its own set of data points these data points correspond to the elevation of a mountain and I'll provide a link to the data set in the description now getting back to the component we create a new function for this chart but this time we pass it the data as an argument like before we set the element variable then we format the data specifically for 3D charts so we pass the data as the z-axis and set the type to surface then for the layout or style we set a few simple parameters here just to make the chart look good and again we call plot le. plot and pass it these variables now we need to pass the chart some data so we do this during ngon a nit by subscribing to the data set in the database in this example we don't expect our data to change so we're just going to take one and then subscribe to it so we don't have a long running subscription and then we'll pass the data from the subscription to the Topo chart function back in the app you can see we get this really cool 3D interactive chart based on our data and Firebase and there's a ton of ways you can customize this so make sure to check out the plotly docs and the community for more inspiration on what you can do so the last type of chart that we'll build is a chart that can actually update its appearance based on real-time data for this example I have some user rankings that will rank a user based on their abilities as an analyst designer or developer then we're going to visualize this data on a Turner chart which is basically just a triangle that compares three different types of data first we're going to add a function to our service that will allow us to make this update in Firebase it just references a single data point and updates it with some new data then in the component we're going to subscribe to the data in NG on a nit but before we pass the data to the function we're going to Pro mer the chart existing in that element then we'll go ahead and call the function that builds the chart but before we get there let's create a function that will just randomize the data for a certain data point then you can attach this function to a click event so the user can randomize the data just with a click of a button now let's build this Turner chart we start by passing it The Element as usual then we map each of the three categories down to an array of its values in most cases you'll need to map your data down to an array for to work with any kind of data chart the rest of the code is mostly just presentational so we just add a few options to give it some nice looking Styles plotly has a big library of example so you can usually find a good starting chart for most situations now back in the app if we click the button that says realtime update we can see the red circle moving around the screen that's because it's actually being updated in the back end in Firebase that's it for realtime charts with plotly and Firebase if this video helped you please like And subscribe and if you want help building your own features consider becoming a pro subscriber at angular firebase.com you'll receive a free copy of my book as well as one-on-one project Consulting thanks for watching and I'll see you next time [Music]