Colors and Tooltips for Embedding Analytics
Watch this video to learn how to use colors and tool-tips to provide additional context to your charts.
Sometimes, combining two charts into one is the best way to display two metrics that might each occupy its own chart. For example, color can display one metric; size can illustrate the other. A sales by city bar chart works as a common example, using sales and percent change as the metrics. The video also shows how to create a tooltip and an items array.
The next topic that I'm gonna talk about is how to use colors and tool-tips to provide additional context to your charts. So, imagine you have a situation where you need to analyze two different metrics, and you want to put that in a dashboard. So, the simplest thing to do would be to just add side by side two charts that look pretty similar with the one chart looking at metric number one and the second chart looking at metric number two.
Combining Metrics from Two Charts in a Single Chart
Now, while that might be the easy route to take, it's best if you combine these metrics in a single chart and use color to show the values of one particular metric and then perhaps choose size to show the values for the other metric. Let me show you an example on how that can be done.
A Sales by City Bar Chart
Let me show you an example on how I would do that. So, in this example, we're looking at a bar chart that is showing us sales broken down by city. We also have a top level parent of “State” so that we can see the cities that belong to each state. On the left hand side, we have a picker that allows us to choose the two different metrics that we're interested in analyzing. So, first we're looking at sales, and we also want to analyze the percent change. Like I said, it would be simple to just add these two charts into a dashboard, but I'm gonna show you how to do that into a single chart. In this other dashboard, we're actually showing you a single visualization that will be displaying both metrics at the same time. As you can see, we can still see our states and each city, and we can see by size what are our sales and by color what is our percent change.
Color Ranges for Legends
At the top, we have a little legend that will show us what are the different color ranges, and we have the same metric pickers at the bottom of the chart like in the previous example, but instead of just showing one metric at a time, we're now showing two metrics at the same time. If we look at our tooltips, we're actually showing you a comparison of each city against each other, and we can easily see which are the cities that we're highlighting on.
The Code for a Tooltip
So, let's jump into the code, and let me show you how I developed this tooltip. Now that we're in the code, you'll notice that I have a content function that I am passing to my tooltip creator. Most charting libraries will give you the ability to provide some HTML to modify the contents of the tooltip. So, if we look at our tooltip, we have a header at the very top, and then we have a list of cities and the metric values. So, in my content function, I'm passing some HTML strings to build up that content.
Creating an Items Array
One of the things that I need to do is to create an array of items that ultimately will be rendered as rows. And the first thing that I do is take the data element that I'm going to be hovering over, and I'm gonna store that in my items array. And then the second thing that I do is I make sure I take the top 10 cities within this state of California, and I am going to be pushing those items into the same array.
Finally, at the bottom, I'm going to make some style modifications to the text of the tooltip. So, in this case, when I'm hovering over San Diego, since I have a green background, I'm going to change the text to be of color white. And then, finally, I'm going to return the value of that content.