Telerik blogs

You must have noticed we have been working aggressively on improving the data visualization arsenal of Telerik's ASP.NET AJAX controls over the past year. This is why we thought it was about time we combined the new Gauge, PivotGrid and AutoCompleteBox controls with the enhanced HTML5 Chart into a simple and compact website application. Naturally, with all the hype about this year's Olympic Games the theme for the app was quite obvious. ;)

The sample ASP.NET app Olympic Games showcases how easy it is to provide data presentation and management functionality to your users and how you can integrate several major controls with just a few lines of code. Of course, we ran into several cases where we had to take a different approach to our controls and this blog post will tell you more about them.

olympig-games-sample-app-landing-page

Let's begin

The landing page has a chart that will show you the medals each country has earned over the years. This is configured through an AutoCompleteBox and a Slider. At the bottom there is a mighty Pivot grid. Just a few controls and a custom scenario, what could pose a threat ;-)

Using many custom colors in the chart

First, we wanted to use different series colors in the HtmlChart on the main page, yet this can be tricky when you let your users configure the control – you simply cannot know how many series they will choose to display and the control offers only 5 built-in. Thus, we decided to utilize the approach described in our documentation – a simple static class with a color list and its even simpler usage when you create the series.

Delving into the chart databinding

Since the number of medals in every chart series is retreived from the same column in the datasource, it was not possible to set the DataField for every series statically on the page. To make things worse – the user chooses how many series the code has to add, so we had to think of a clever way to get around this, too. The simplest solution was to create a DataTable that has a unique column for storing the number of medals for each country and give that to the chart in a simple loop. This also fit nicely with the dynamic colors.

Meet the PivotGrid

Keep scrolling down on this page, because it has much more to offer. The PivotGrid allows you to get in-depth information with just a few clicks. You can filter it or add columns to display even more data than your screen can handle. Well, this isn’t a problem, I just wanted to show off :-)

Going forward

Now take a look at the Medals Per Sport and Athlete Comparison pages. They use controls you’ve already seen before, so I will only cover the more interesting aspects.

Chart Interactions

See how you can click on the bars of the chart and display more detailed information about the particular item. This is implemented via the Client-side events the control offers – we get the clicked item in the browser to avoid another query to the database and only then initiate an AJAX request to load the detailed information. How many charts out there can do this so easily?

Some eye candy

Have you noticed the cool flags that we included in the AutoCompleteBox on the main page and in the ComboBox in the Medals By Sport page? This was easily done by adding a span element with a background image to the AutoCompleteBox when its client-side event onClientEntryAdded is fired and by modifying the ItemTemplate of the ComboBox items. You can also see ten pretty gauges in the Top Results by Sport page. You may have already seen that in the Gauge Overview online demo, but I wanted to make sure you haven't missed it :-)

Give it a try

Take a look at this new site, poke around the code and perhaps you’ll get a few neat ideas for your own projects. Download the full source and modify it to your heart’s content and see what else you can do with it :-) Feel free to leave a comment below, whether you just liked it or if you want to suggest an improvement, all feedback is welcome!


Marin Bratanov
About the Author

Marin Bratanov

Marin Bratanov was a Principal Technical Support Engineer in the Blazor division.

Related Posts

Comments

Comments are disabled in preview mode.