[youtube] width="420" height="315" src="http://www.youtube.com/embed/guZzAmB_-7o" [/youtube]
In the next how-to video about our newest jQuery sample app, we're going to take you behind the scenes of how we've built the bar chart for the dashboard. This chart is made up of a number of different elements, and before we dig into the code I'd like to familiarize you with some of the different parts.
Let's take a closer look at the chart itself. One of the features of our chart is its versatility. The chart that you see here is made up of three axes and five series, all used together to achieve the visualization that you see here. Let's start with the axes. The y axis is numeric and formatted using the logarithmic scale. Now if you're not familiar, Wikipedia defines the logarithmic scale as a non-linear scale used when there's a large range of quantities. That's exactly what we have here. This chart is plotting sessions and conversions.
Now conventionally a website's conversions are about 1% of sessions. Without the logarithmic scale the visualization for the conversions seen here in green would only appear as a few pixels on the stacked bar chart. Instead, as the logarithmic scale starts at ten and then completes up at around 100,000 we can show relatively small amounts like the conversions alongside relevantly large amounts such as the sessions which you see here in yellow on the chart. Visually, there's a single categorical axis that represents the time period, but in code there are in fact two x axes, one for the current date range and a second for the previous date range. This approach makes it easy to render the two date ranges together all in the same chart.
Now for series. Like I said, this chart uses five different series to visualize essentially two different data points for two different date ranges on a single chart. The series are one for sessions on the current date range, another for sessions on the previous date range. The same works for conversions: one for the current date range and another one for the previous date range. The last series is a custom tool tip series that renders the tool tip for all the data found in a single category.
Now that you're familiar with the anatomy of the chart, let's talk a look at it in code and you can see how it's implemented for the marketing dashboard. As you begin working with the solution for the marketing dashboard, you'll encounter a Javascript module called rendering service. Now this is a service that's use to render many of the different elements that you see on the page, and as we go down here you can see there's a specific function just for the chart. I'm going to skip past some of this logic for a minute. We'll come back to some of it. What I'd like to focus your attention on right now is the initial instantiation of the IG data chart.
Let's focus on the definition right now for the axes. The first axis defined here is the y axis. It has a name of stats and it's a numeric y axis. We've given it a title of log because, as you can see here, islogarithmic is set to true. Now we want to show that title in a vertical orientation so title angle is set here to 270. Now something that you might find interesting about this axis is that we've customized the labels for it. Rather than having a label that goes from zero all the way up to 100,000 and showing all of the zeroes within that label, we found that that much detail made it quite confusing. By using this function to format the label, anything over 1,000 is divided by 1,000 and appended with the abbreviation of k next to it. As you look at the scale you can see we have the lower numbers as is and the higher numbers with the k abbreviation. It just takes out some of the visual noise out of the chart.
Now let's look at the first category axis. Here we have this named as time, and it's the category x axis which holds the value for the first date range. The label is set here to title because the data that will be flowing through the chart has a value for title which will either evaluate to day one, day two, or week one week two, or month one month two and so on. The gap value is the amount of space that's in between the different series, and overlap is the amount of space between another axis rendered next to it. The last axis here is time for conversions, and this is a category x axis as well. We're hiding the visibility in this case because it's essentially the same thing as before since we're putting the two date ranges right next to each other.
Now we'll turn our attention to the series. You'll notice that the series definition is being passed in by this variable here of bar series. This is defined earlier within the script. Here bar series is being declared and we're calling into our utility module for bar series options. We'll discuss what's generated in that function in just a moment. Once those series are generated we're explicitly setting the data source for the last date range for conversions and for sessions. Finally down here you see that we're pushing in a category series for the tool tips. The type is set to category tool tip layer, and this tool tip will get its content from properties found in each one of the series. I'll show you that next.
Now let's take a look at the definition for the bar series options function. We'll go over to our utility module and come down to bar series options. Here we're creating each one of the series that I described earlier. You'll notice that each series has unique values for the same properties: name, x axis, value member path and so on. The first one here is for sessions. The x axis is time, and if you remember if that was the first axis that we looked at just a moment ago. The value member path is the member name of the data item that comes in so it knows where to get the value in order to plot on the chart. The title will show up in the legend, and this is sessions. Then we give the color to the bar itself. The brush and outline are set to the same color.
Then we have tool tip template. Now if you recall from the tool tip series I said it would use a property off each series in order to get its content. This is the property here that it uses. Within this markup we're just creating a simple structure in order to hold the label and the value. Since this is the one that will show up first we're adding the title in so that you can see whether it's per day, per week, or per month. Conversions is set up much the same, accept it's pointing to the conversions data member. Then that's also the same for previous sessions and also previous conversions.
That set all of the unique values for each one of the series, and now we have this loop that simply sets all the common items in each one of the series. The y axis is stats for all of them. They're each a column type. The border radius is set to zero. We'd like the chart to animate so we give it a transition duration, and then enable it, and then also make sure to show the tool tip. Once all that is done we return up the series, and now the chart has all the information it needs in order to display quite a lot of information in a clear and concise way. Thanks for joining me into this exploration into the marketing dashboard and using the IG data chart. If you haven't already, I be sure to download and work with the code yourself – we hope you enjoy!
