You Won't Believe How Easy It Is to Build Custom Charts in HubSpot!

Hey y', all, It's Brooke with HubSpot. Today I'm going to go over our brand new charts component for UI extensions. Now you can create custom charts on record pages that utilize third party data. You can create both line charts and bar charts. Also with UI extensions now available for public apps, you can add these charts to your integrations. To sign up for early access to UI extensions for public apps, check out the link in the description. You must have a HubSpot developer account to request early access, so make sure to choose the right account when signing up. Now let's see how we can go about building these charts with UI extensions. All right, so I have actually set up a public app here with two different types of charts. We have a simple line chart and we have a simple bar chart. The simple line chart just has three points of data and if you hover over them, we have these wonderful tooltips and it looks completely native to the HubSpot system. With the simple bar chart, we're actually fetching the data from an API using the HubSpot fetch API that is new with the public apps using UI extensions. This one is calling data about different books and the page count of these different books. It has the tool types and all the colors are different for each book. So let's get into the code. All right, now I'm in VS code. I've already set up my initialization so that it's connected to my HubSpot developer account because we're specifically building a public app. When you build a public app, you must be in your developer account. And this way you can go ahead and set up all the information that you need to add this to any standard account. So now what I'm going to do is go ahead and download the Getting Started with Public Apps sample code to help us speed up getting this app on our page. So to do that, I'm going to go ahead and run HS Project Create and then I'm going to give it a name. I'm going to call it the UIE Public App Charts. We're going to say yes and we're going to choose CRM Getting Started Project with Public Apps. If you don't see that option, it means that you need to update your CLI. So you can do that by running npm I G at HubSpot CLI at latest. And that will go ahead and download all of the newest files for our CLI and to check what version you're using, run HS version. And this says that we're running 6 2.0. So we should be good. Now, in order to make sure that this app actually works, you will need to use OAuth in this video. We're not going to go over that. However, if you check the resources in the description below, We've created a GitHub repository specifically for this example that has that OAuth information set up so you can go ahead and follow those instructions and get this code for yourself. But now what I'm going to do is make sure that I have all of the latest HubSpot UI extensions. So I'm just going to go ahead and CD into our folder that we just created, CD into the source folder, the app folder, and then the extensions folder where our code lives. And I'm just going to go ahead and run NPM install because our package JSON has all the information we need for all of our right packages. So now we're going to go inside of our folder that we created, go into source, and we're going to click on public app JSON. You can go ahead and change this information to whatever you need. But the main thing that I'm going to call out right now is that you need to make sure that in allowed URLs you're putting in the correct URLs that you need for the data to fetch. So whatever API you're calling, this is where you're going to say which allowed URLs are going to be used. For mine, I'm going to use an open API that requires no authentication. However, if you are using a public app that's fetching data from an API that has authentication, check out the link in the description to learn more about how to set that up. In this case, we're just going to add the URL for the open API we're going to call now we're going to go into extensions and then into example jsx. We're going to make sure that we import React as well as a couple of hooks. We need use state so we can persist our data and use effect to call the fetch API. And then we're going to import the different UI extensions that we need. We're going to do text divider, we need our line chart and our bar chart. So we're going to go ahead and save that. And of course we need to import HubSpot from the UI extensions as well and then call that so that we can create our extension. And going to, we're and we're going to return our extension. And so now that we've imported everything we need. I'm just going to go ahead and delete everything that's currently in the return and we'll just add an empty text right now. All right, now I'm going to open up the local dev server by running HS Project Dev. We're going to choose my dev account and now I'm going to go into split screen so you can see it at the same time. All right, here we are on a contact record page and in order to add our card we're going to click on Customize Record and then we're going to click on Default view. We're going to just let's go ahead and add a custom tab just to make this easier to see it. And then we're going to click on Add Cards and then we can click on apps and this will show all of our apps, including our public and private ones. And you can click the UIE public app with Charts one. And then you can also click on this little Discover App cards if you want to discover any of our integrations on our app marketplace that use the new app cards. All right, now we're going to go ahead and click Save and Exit and then to get back to our Contact record page, really easy, just click back. And now we can see that we have the flag developing locally. So, so now any changes that we make, we can go ahead and see that on our screen. So the first thing we're going to do is we need to add in some dummy data for our simple line chart. Again, this one only has three points of data. So we're just going to have this little array with some objects with some data in there. And for our bar chart, since we're using fetch, we actually need to use the use date so that we can persist that data when we grab it. So we're going to create a const. We're going to say book data and set book data. We're going to have that set to equal use state and for now let's just set that to null. Next we're going to add the use effect and this is going to be set to an anonymous function and we're going to have that so that we can now fetch our data from our third party account. Again, this is specifically for public apps. If you were doing this in a private app, you would use a serverless function to call this data. Now we're going to go ahead and use our fetch data. So we're going to make a constant, we're going to call fetch data. We're going to set this to an async function because we want this to only return once we get the proper data. And now inside of our fetch data we're going to let the URL equal our URL that we need to get our no auth data. And then after that we're going to do a const response and, and we're going to do await so we can await for that to be done. And this is where we're going to do HubSpot fetch and we need to pass along the URL. And then inside of here we have a timeout. And the timeout is set to two seconds. And the method we're going to use is get. And now we're going to just add in a try catch where we're going to write our call and we're just going to add the error to the console so that we can understand what happened. Fail to parse as JSON and then with the error message. All right, cool. So now inside of our try catch we are going to create a const called get book data. And this is going to await the response JSON. And now we want to make sure that it works. So I'm going to just add in a console log to get the book data to, just to see what it looks like and then we'll send along the book data. And now we're going to run set book data because this is us using that use state. And in the set book data we're going to get the book data. And I know because I've used this API before, that there are 80 entries inside of this call and 80 entries is going to be a little bit big for us. So let's go ahead and slice that data and we're just going to get 0 through 8. That should be enough. And now what we have to do is we have to make sure our data is in a format that's going to work within our bar chart. So with any data that you use inside of this chart, you have to make sure you format it before you add it to your chart as a data source. You cannot manipulate it within the chart itself. So in order to do that, we're going to use the map function and then we're going to say for each book we're going to map this out to return an object with the title we can call book title and then the length, which is going to be our Y axis and we're going to call book page count. So whatever you need your data to look like, you can go ahead and set it like this where you can map over the data and put it into the format that you need. All right, now that we have that, we need to go down here and use fetch data. We're going to call the fetch data and we're going to say dot match. This is going to be just again for error handling and we are going to say console dot error, something went wrong and send along the error message. And now that we have our fetch set up, we can go ahead and start building out the charts. So first let's work on the simple line chart. And to call a line chart, all you have to do is say line chart and then the options you'll have are the data and we're going to go ahead and pass along our sales over time sample. And now we have to define the axes. So there's the x and y axes. With each axes you have to define the field that you're going to call and that's going to be the name inside of the data. So whatever this key value pair is called, that's what you need to call inside of the field. So we have the date as the x axis because it's going to be sales over time. So we have the date and then we have the field type. So the different field types you have are date, time, category and linear. For this one we just want the dates to actually be a category instead of a date time. And then the last thing we can do is go ahead and add a label to this. So the label will just make it human readable. So we're just going to go ahead and add that to capitalize date. And then now we need to add in our Y axis. And again we need to set up the field with the data set to sales. For the field type this one because it's a number, we're set it to linear and then let's call the label count of sales. All right, now that we have that set up, there are some options that you can add to your line chart just to make it look a little bit prettier. So you can do show data labels and this is a boolean. You can also say show legend and show tool tips. And you can check out all of this information within our developer documentation for all of those options. Make sure to actually close out our line chart. And it is a self closing one. And now when we save it, you can see that our chart has shown up and if we hover over it we can see the tooltip right there. All right, now let's go ahead and add a divider. And now we're going to do our book data using a bar chart. So let's just add another text here that reads simple bar chart with fetched data. And because we did all of the work before to make sure that our data is set up properly, it will be very easy to add in our data into our bar chart. So we'll call our var chart and again we need to send along the data. And we will set this to our book data, which again, that came from doing the use state. And now we have our different axes, we have the X axes and we're going to set this field to title, field type to category and label to book title. Add in our Y axes as well. Our field will be the length one, Our field type will be linear. And let's add a label of page count. And now what we're going to do is we are going to add options to our axes and this is going to allow us to have that nice color change that you saw at the beginning. We're going to use group field by color and we're going to choose the title as our demarcation for different ones. And now let's, let's go ahead and set some more options on the outside of our data. We're going to show legend true, show tooltips true. And now that we've saved, we now have that bar chart showing up with all of our data. All right, y', all, that is how you use the new charts. So make sure to check out the resources because there's so much great information there. Let us know what you would do with these new charts and I'll see you in another video. Bye. Bye. Bye.