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
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
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.
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 ;-)
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.
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.
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 :-)
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.
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?
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
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
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 is a Principal Technical Support Engineer in the ASP.NET AJAX division. Ever since he joined Telerik in early 2011 as a novice, his main focus has been improving the services and customer care the company offers. Apart from work, Marin is an avid reader and usually enjoys the worlds of fantasy and Sci-Fi literature. You can find him on Twitter, Goodreads, LinkedIn and GooglePlus.