Getting Started with the jQuery Marketing Dashboard

In one of our newest tutorial videos, we're going to introduce you to the Infragistics jQuery marketing dashboard, which makes use of our date picker, our chart control, our map, our donut control, and the bullet graph controls.

What we'd like to do in this video is show you how to get the application running and familiarize you with the controls and the data found here within the dashboard. After you download the code and open up the zip file you'll have a solution and also the folder that's associated with that solution. What we'll do is open that up in Visual Studio. Once it's loaded, the first thing that you'll want to do is enable NuGet Package Restore. That way, all of the project references that are not on your machine for this application are brought down off the web.

Now with the references available you can build the solution. Now that the build has succeeded we can launch the application. As you run your application you'll be presented with a screen that looks something a lot like this. Now the idea behind the dashboard is that if you were to take all the different data points that you might want to track on a specific website and bring it all together in a single place, this is one way that you might want to build a dashboard for this.

Quickly just looking around you can see that we're tracking sessions and conversions, how much money we're spending on getting those conversions, and down to the individual conversion cost. The bar chart tells us a little bit about the sessions in relation to the conversions that we have in a given time period. Then the map will tell us about where that traffic is coming from geographically.

The campaign health section tells us some information about the different conversions that are happening on the site and where they're coming from, either pay per click, email, banners, or third party. Now I want to show you something that you'll see the first time you encounter this dashboard, and that's the welcome screen.

Now a few things that you need to keep in mind is that all the data presented within this application is randomly generated. That's done on purpose because as you download and run this application you'll notice all you had to do is run the solution. Didn't have to set up any databases and you didn't have to change any configuration files. By randomly generating the data it makes it very easy for you to get going with this application.

The other thing that I'd like to point out is the nature of the bar chart. We're using the logarithmic scale on the “y” axis of the chart. Let's look at the chart itself. As you look within here you can see that the green area tracks conversions and the yellow area tracks sessions. Notice how the scale grows. It starts at 10, very low number at the bottom, goes all the way up to 100,000 at the top. While the conversions are relatively low number compared to the visits for this time period, they're plotted together within the chart so that you can easily see how those data points are changing within the context of time and seeing it all together within a single chart.

We can change this view and take a look at the sessions by medium. Here they come in as organic, paid, direct, referral, and email. Behind the scenes this is using the same chart. We're just changing the visualization of the data in order to achieve the different effect. As we come down to the map we're able to take the data based off the date range, and when we press play it will plot that data on the map against the given time period.

Taking a look at the bullet graphs you have an opportunity to see quite a bit of information available all in one spot. You'll notice that for pay per click the value for this range is over 2,800 conversions that were based off of pay per click. That happens to be 74% of the target that was set for this time period. Here within this one control you can easily visualize the value and its target. If you want to see the percentage overall of the pay per click out of the whole you can see that for the current date range, which is the outer donut, and the previous date range which is the inner donut, 37% of all conversions are made up by pay per click conversions.

Now you'll notice as I click that button the chart animates, and that's one of the default behaviors of these controls, is as we change the data you notice that the values are animating across the bullet graphs and the charts. That's a quick orientation into the marketing dashboard. I do hope you'll join us for other videos that dive into the code and teach you a little bit about the details of working with some of our controls in depth.