Telerik Telerik
The Telerik Blogs
  • Meet RadPivotMap and RadTreeMap (SL/WPF)

    Wednesday, August 03, 2011 by Vladimir Milev | Comments 0

    With the Q2 2011 release the Data Visualization team at Telerik released a beta version of two new controls: RadPivotMap and RadTreeMap. These two controls represent Telerik’s offering for treemap type visualizations. Probably the first question that comes to mind is why have we shipped two separate controls for what seems to be the job for one? This question is what this blog post is about. Keep reading.

     

    treemap

     

    When we started our work on Telerik’s tree mapping product we took a step back and researched how these kinds of visualizations are used. We did an extensive research on what kinds of data people visualize using treemaps. The results from our investigation turned out to be really interesting.

     

    A large portion of treemaps we could find on the web are using your typical run-of-the-mill hierarchical data. That is you have real nesting between your data objects. On the other hand, there is a significant portion of people who are grouping flat data and displaying the grouped hierarchy using a treemap. We determined that both groups are significant enough for us to provide support for them out of the box.

     

    So we decided we should support both flat and hierarchical data sources in our new product and moved on to the design of our API. It is here that we hit a serious roadblock. We couldn’t produce a good API design which would handle these different types of data in a single control – the requirements and the implementation details were simply too different.

     

    Certainly an option we had back then was to pick one of the two. If we picked the hierarchical version of the API then we would have to ask our customers who want to work with flat data to group their data manually beforehand and prepare it carefully for consumption by the control. This, however, goes against one of the core ideologies of the RAD controls (facilitating actual rapid application development). On the other hand, if we picked the flat data version, then we would ship a product which was incapable of fulfilling the needs of a huge portion of our customers which was also a no-go.

     

    With the above options out of the way the only path forwards was to build these two controls and so we did:

     

    RadTreeMap – when you need to visualize a truly hierarchical set of data.

    RadPivotMap – when you need to group your tables to derive a hierarchical view of our data.

     

    The rest is history. Let us know how you like these two new additions to the growing number of data visualization tools Telerik is offering. It is beta time and this is the best time for you to voice your feedback!

  • Speaking at NT Conference in Slovenia

    Monday, May 23, 2011 by Vladimir Milev | Comments 0

    165517_493510233320_63374328320_6012742_6868319_n

    Tomorrow I will be delivering a lecture at the NT Conference in beautiful Slovenia. My talk will be about one of my favorite topics as of late:

     

    Proper usage of data visualization in your dashboard and business applications

    “Many dashboards and business apps we see every day suffer from poor design causing them to fail their primary purpose: to convey a lot of information in a small amount of space in a manner that is clear and immediate. If you attend this lecture you will learn how to avoid the most common mistakes in data visualization and will gain valuable insight on how to better present your data”

     

    If you are at the NT conference and you this stuff interests you I would be more than happy to answer your questions on speak with you after the lecture.

     

    Telerik fans will be happy to hear that together with me here in Slovenia is Stephen Forte who will be talking about agile and OData.

     

    Apart from having us speak there, Telerik is also a bronze sponsor of the event and running a promotion on Team Pulse for everyone who attends, so make sure to check in your backpack for that promotion coupon!

  • Ignite your DataViz with Telerik Sparklines for Silverlight/WPF

    Thursday, November 11, 2010 by Vladimir Milev | Comments 0

    More and more customers are building dashboards and other rich line of business applications for Silverlight and WPF are discovering the potential of these platforms for data visualization. Not only are UI frameworks constantly evolving but there are new advancements in the field of dataViz itself which make the whole ecosystem even more interesting. Keeping up with with the industry trends Telerik is expanding it’s product portfolio with new controls to enable our customers to build fast, robust and rich dashboards in minutes.

     

    One such addition which I will talk about today is our new sparklines controls. At first look the sparkline seems like a minified chart control, but the graphic has a fundamentally different purpose and application. Here is a short description:

     

    A sparkline is a type of information graphic characterized by its small size and high data density. Sparklines present trends and variations associated with some measurement, such as average temperature or stock market activity, in a simple and condensed way. Several sparklines are often used together as elements of a small multiple. (To learn more about the theory of sparklines from their creator Edward Tufte click this link)

     

    Many component vendors are not realizing this difference and are using their chart controls to emulate a sparkline instead. Our team decided that best way to bring sparklines to our customers is to make them first class citizens in our suite. But what is this? Why am I speaking in plural? Why, yes, this is because we are actually shipping five different controls under the Sparklines product:

    • RadLinearSparkline – the classic sparkline implementation
    • RadAreaSparkline – similar to the linear one, but includes the surface area relevant to the curve.
    • RadColumnSparkline – a sparkline visualization using columns
    • RadWinLossSparkline – a win/loss column graph similar to the one seen in Microsoft Excel
    • RadScatterSparkline – scatter graph demonstrating spatial locality of data.

     

     sparks

     

    So the question you are probably asking yourselves is – why should I use RadSparklines instead of just a regular chart control? Well, that’s an excellent question and here are some answers which should help you decide:

    • Memory footprint – Because sparklines are much simpler they do not contain a lot of the features a regular chart control has. This allows many instances of the sparkline controls to be hosted together in a more complex control such as RadGridview at a minimal performance and memory cost.
    • Superior performance – Because the sparklines are more streamlined and specific this has allowed us to greatly optimize their data binding and rendering performance. The controls allow extremely fast UI updates of thousands of data points in just a few milliseconds. Expect a dedicated blog post about sparkline performance soon!
    • Cleaner XAML – Using any traditional chart control requires a lot of XAML to achieve the simplistic sparkline look. One needs to turn off many features that are usually enabled by default and this results in complex configuration code in order to perform a much simpler task.
    • Easy styling API – A lot of common brushes and styles are available at control level making customization of spark lines extremely easy and retemplating is only required for very specific scenarios.
    • Simple, yet powerful – While sparklines skip on some features that don’t make sense in their visualization domain they do have a lot of advanced functionality specific to them:
      • Indicators: including first, last, high, low, negative.
      • Normal range
      • Custom axis(reference line) position
      • Empty Values (drop point, show as zero)

     

    We hope you like the 5 new sparkline controls. If you have feedback for us don’t hesitate to share it!

     

    Happy dashboarding!

  • Silverlight: RadChart codeless binding to RIA Services DomainDataSource

    Thursday, July 15, 2010 by Vladimir Milev | Comments 1

    Hello RadChart fans everywhere! With the introduction of Silverlight 4 just a couple of months ago a lot of our customers are asking if they can use the cool RIA controls with RadChart without writing any C# or VB code at all. With MVVM pattern getting so popular with Silverlight developers it is all about the XAML these days. Without further ado let’s answer the question:

     

    The short answer is: Yes! The long answer: Yes, and it’s a total breeze! Just take a look at some code:

    Code Snippet
    <Grid x:Name="LayoutRoot" Background="White">
        <riaControls:DomainDataSource AutoLoad="True" Name="productDomainDataSource" QueryName="GetProductsQuery">
            <riaControls:DomainDataSource.DomainContext>
                <my:DomainService1 />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>
        <telerik:RadChart ItemsSource="{Binding Data, ElementName=productDomainDataSource}">
            <telerik:RadChart.SeriesMappings>
                <telerik:SeriesMapping LegendLabel="Product Quantities">
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping FieldName="ProductName" DataPointMember="XCategory" />
                        <telerik:ItemMapping FieldName="UnitsInStock" DataPointMember="YValue" />
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>
            </telerik:RadChart.SeriesMappings>
        </telerik:RadChart>
    </Grid>

    This is just setting up the basics, of course. You can go further and specify label formatting, appearance, and even data manipulation features such as filtering, sorting, grouping, aggregation all using pure XAML without ever writing a line of C# or VB or having to re-template something. It all just works out of the box!

     

    To make your lives easier I have prepared a small sample and attached it to this blog post.

     

  • What’s new in RadChart for 2010 Q1 (Silverlight / WPF)

    Thursday, March 25, 2010 by Vladimir Milev | Comments 0

    Greetings, RadChart fans! It is with great pleasure that I present this short highlight of our accomplishments for the Q1 release :). We’ve worked very hard to make the best silverlight and WPF charting product even better. Here is some of what we did during the past few months.

     

    1) Zooming&Scrolling and the new sampling engine:

    Without a doubt one of the most important things we did. This new feature allows you to bind your chart to a very large set of data with blazing performance. Don’t take my word for itgive it a try!

    RadChart_Sampling

     

    2) New Smart Label Positioning and Spider-like labels feature:

    This new feature really helps with very busy graphs. You can play with the different settings we offer in this example.

    RadChart_SmartLabels

     

     

    3) Sorting and Filtering.

    Much like our RadGridview control the chart now allows you to sort and filter your data out of the box with a single line of code!

    RadChart_Sorting_Filter

     

    4) Legend improvements

    We’ve also been paying attention to those of you who wanted a much improved legend. It is now possible to customize the look and feel of legend items and legend position with a single click.

    RadChart_LegendFeatures

     

     

    5) Custom palette brushes.

    You have told us that you want to easily customize all palette colors using a single clean API from both XAML and code behind. The new custom palette brushes API does exactly that.

    RadChart_CustomPalettes

     

    There are numerous other improvements as well, as much improved themes, performance optimizations and other features that we did. If you want to dig in further check the release notes and changes and backwards compatibility topics.

     

    Feel free to share the pains and gains of working with RadChart. Our team is always open to receiving constructive feedback and beer :-)

  • How fast is your chart?

    Tuesday, February 23, 2010 by Vladimir Milev | Comments 0

    Howdy folks! It has been a while since I last blogged. To compensate for it, however, I am bringing some exciting news to our loyal RadChart users.

    While not blogging I have been busy working with two of the smartest people in our company to bring you some really dramatic performance improvements to RadChart. I have to admit that in the past performance was not paramount for our product. We focused on features, appearance, ease of use to produce one of the most versatile charting components on the market. Today, however, marks the beginning of another direction. Starting with the Q1 2010 release, RadChart will also be one of the fastest silverlight charts out there.


    What better way to demonstrate this than to bind the chart to a very large data source – say 1 million records? Not a problem!



    So how does this work? Obviously we can’t possibly show all that data on screen. The spot above doesn’t even have a million pixels to draw itself.


    So what do we do? The solution is simple – do what charts do best – summarize the data. RadChart achieves this using a technique called Sampling. Put simply the control splits data into groups and aggregates each group using one of the many provided sampling functions (you can even write your own). The end result is a graph that summarizes the real data close enough while performing infinitely faster.


    To make it easier to drill-down inside and navigate the entire data source we have also provided zooming and scrolling functionality much like the one present in RadChart for ASP.NET AJAX, but this time we have also included modified RadSlider to make it even more convenient to browse.


    Finally some notes:

    • You can try the new performance improvements for yourself if you download the beta 1 release which already shipped last week.
    • I know the data looks cheesy, but hey, we need to generate it if you need this much and keep the download size small.


    Happy charting!

  • What’s new in RadChart for Silverlight Q3 2009

    Wednesday, November 11, 2009 by Vladimir Milev | Comments 0

    It has been a busy Q for the data visualization team at telerik! Our flagship chart product saw many improvements and new features the last four months and today I will summarize the most important ones for you. Here are the 5 big ones:

     

    1. Grouping and Aggregation – RadChart now utilizes our powerful data engine already present in the RadGridView control to allow for a really fast grouping and aggregation of data. This comes built-in and works with all supported data sources! You can read more here.

    image

    2. Multiple YAxis support – RadChart will now allow you to add unlimited number of additional YAxes to suit your more complex comparison scenarios. For more info you can check this blog post.

    image

    3. Horizontal Bars – Due to popular demand we now feature horizontal bars. They are in every way exactly like the normal bars, except being rendered horizontally. Find out more about those here.

    image

    4. Negative Values - RadChart is now able to draw series below the X-Axis to achieve a more visually appealing rendering of negative values. For more check this example.

    image

    5. Exporting features - RadChart is now able to export the rendered chart to different formats like: PNG, BMP, XLSX, SVG. Further reading available in this blog post.

    image

     

    I sincerely hope you like the way RadChart is shaping up. Much of the decisions we make are a direct result of customer feedback. We are committed to continue developing and improving the industry leading Silverlight charting solution.

  • RadChart for SL/WPF: Data grouping and aggregation

    Friday, September 18, 2009 by Vladimir Milev | Comments 4

    Howdy folks! The RadControls for XAML Q3 Beta1 is out and it features an updated version of the RadChart control. We receive dozens of feature requests every day and one of the more substantial ones is the ability to analyze data with RadChart. The feature I will describe today is a great step in that direction. I’m talking of course about data grouping and aggregation.

     

    Just like grouping and aggregate functions are one of the major features of our GridView control they can be used with the charts as well (if you have the beta). Basically the feature allows you to group business objects according to some criteria and calculate aggregate functions on those groups. That ability is surprisingly useful and a very powerful way to build charts that let you summarize business data in seconds.

     

    Let’s take a look at the data that we want to break down in the RadChart. The table below shows the properties of our business object and their types. The second row is just a sample record showing what kind of records we have.

     

    Year (int)

    Quarter (string)

    Make (string)

    Region (string)

    Sales (double)

    2008

    Q1 Toyota Europe 122

     

    Now let’s look what that data looks like when we have no grouping or aggregations enabled. The only ItemMapping we have created for this chart is the following:

    seriesMapping1.ItemMappings.Add(new ItemMapping("Sales", DataPointMember.YValue));
    It simply maps all Sales data to the YValues of the diagram.

     

    chart1

     

    Now that’s not much help is it? Although the data plotted is mostly unintelligible we can see there is some sort of pattern to it. Let’s explore what we can do with some of that new grouping goodness. Let’s group the data by Year and Make and see if we can better visualize the relations in the data:

     

    seriesMapping1.GroupingSettings.GroupDescriptors.Add(new ChartGroupDescriptor("Year"));
    seriesMapping1.GroupingSettings.GroupDescriptors.Add(new ChartGroupDescriptor("Make"));

    Here’s what we get:

    chart2

     

    Aha! We’re on to something. Already it is much more clear what’s going on. The year 2008 obviously has much better sales for both manufacturers. Also, we can compare how each company is doing against its competition each year. But we want more! Let’s say we are the CEO of one of the companies and we are interested in the BIG picture. We’ll use some aggregation functions for that. Here is how to do it:

     

    seriesMapping1.GroupingSettings.GroupDescriptors.Add(new ChartGroupDescriptor("Make"));
    seriesMapping1.GroupingSettings.GroupDescriptors.Add(new ChartGroupDescriptor("Year"));
    seriesMapping1.ItemMappings.Add(new ItemMapping("Year", DataPointMember.XCategory));
    seriesMapping1.ItemMappings.Add(new ItemMapping("Sales", DataPointMember.YValue, ChartAggregateFunction.Sum));
     

    Notice how we are using the new constructor of the ItemMapping class which allows us to tell RadChart that we are not interested in Sales value of each record, but rather the sum of all records in each data group. Also, we are adding an additional ItemMapping to split the data in two categories – one for each year. Here is the final result:

     

    chart3

     

    Now this is some first-class BI behavior built-in the control. There is absolutely no messing with the data before feeding it to the control. Everything is done internally with the exceptional speed and quality of the RadGridView data engine.

     

    But wait. There is more. Let’s try to obtain something much more complex. Say we want to see a break down per region of how both competing companies are doing every year using a stacked series and stack series groups:

    seriesMapping1.SeriesDefinition = new StackedBarSeriesDefinition();
    seriesMapping1.GroupingSettings.GroupDescriptors.Add(new ChartGroupDescriptor("Make"));
    seriesMapping1.GroupingSettings.GroupDescriptors.Add(new ChartGroupDescriptor("Year"));
    seriesMapping1.GroupingSettings.GroupDescriptors.Add(new ChartGroupDescriptor("Region"));
    seriesMapping1.StackGroupFieldName = "Make";
    seriesMapping1.ItemMappings.Add(new ItemMapping("Region", DataPointMember.XCategory));
    seriesMapping1.ItemMappings.Add(new ItemMapping("Sales", DataPointMember.YValue, ChartAggregateFunction.Sum));

    chart4

     

    In the above graph you can see the data broken down by Regions, Companies and Years. For example we will now be able to tell how Toyota is competing to Tata in Europe on a Year-By-Year basis AND for the whole period at the same time. This is possible thanks to the specifics of our Stacked Bar series and the ability to assign a different StackGroup for each company. This is a pretty complex data query by all standards and it is now possible to do in RadChart out-of-the-box with less then 8 lines of code!

     

    I sincerely hope you guys find this new grouping and aggregation functionality in RadChart useful. You can play with it right now by downloading the beta!

  • Silverlight: RadChart for Export to Image

    Tuesday, September 08, 2009 by Vladimir Milev | Comments 4

    Good news everyone! Exporting Silverlight charts to images has been a common request for our Silverlight chart. I’m glad to announce that the functionality is already done and checked in our development branch. This means that everything is on track for the Q3 2009 release (and maybe a beta release before that!).

     

    But why not for Q2? Well, there are a couple of reasons. Q2 release was still Silverlight 2 based and there were technological difficulties that didn’t allow us to implement this feature. Firstly, Silverlight 2 didn’t have the writeable bitmap class which facilitates rasterizing the chart rendering and secondly there was no way to write to a file. Now that Silverlight 3 is out there are no roadblocks and we’ve implemented the export functionality. I will walk you through it in the next paragraph.

     

    Consider the following code snippet:

    //PART 1 - Show the dialog and obtain a stream to the new file
    SaveFileDialog dialog = new SaveFileDialog();
    dialog.DefaultExt = "png";
    dialog.Filter = "*.png | PNG File";

    if (!(bool)dialog.ShowDialog())
    return;

    Stream fileStream = dialog.OpenFile();

    //PART 2 - use the stream to write the file output.
    RadChart1.ExportToImage(fileStream, new Telerik.Windows.Media.Imaging.PngBitmapEncoder());
    fileStream.Close();

    As you can see the code is split into two parts. The first part should be familiar to all silverlight 3 develoeprs. It uses the new SaveFileDialog class to display a save dialog and obtain a reference to a stream to the newly created file. The second part demonstrates how to pass that stream to the RadChart API and export the chart content to a PNG file. Since Silverlight does not have any encoders for PNG or BMP you will need to use the encoders we provided to you along RadChart. These are our own encoders which are implemented according the PNG and BMP specifications. The BMP encoder name is Telerik.Windows.Media.Imaging.BmpBitmapEncoder.

     

    But there’s more! Not only did we implement exporting to PNG and BMP, but there is a way to export to EXCEL and XPS too. To do so you simply need to use a different method:

    RadChart1.ExportToExcelML(fileStream);
    RadChart1.ExportToXps(fileStream);

    There are a lot of other things the charting team has been busy with. Stay tuned to the telerik blogs to learn about more exciting features to come out for Q3 2009.

  • RadChart for WPF/SL Automatic Data Binding to Nested Collections

    Monday, June 08, 2009 by Vladimir Milev | Comments 2

    Seamless operation with diverse data sources is paramount for any data visualization solution. RadChart already supports automatic data binding to IEnumerable sources as seen in this example: http://demos.telerik.com/silverlight/#Chart/DataBinding. With the growing of Silverlight data sources and support for various data services, however, a new scenario is becoming more common: data binding to a collection of collections or nested collections. I am glad to announce that a new feature is coming in the Q2 2009 release which will make this automatic.

    Consider the following code snippet:

    private void FillWithData()
    {
       
    var list1 = new List<double>() { 1, 3, 5, 7, 9 }; //Odd Numbers
        var list2 = new List<double>() { 2, 4, 6, 8, 10 }; //Even Numbers
        var combinedList = new List<double>[] { list1, list2 };
        
       
    SeriesMapping seriesMapping1 = new SeriesMapping() { LegendLabel = "List1", CollectionIndex = 0 };
       
    SeriesMapping seriesMapping2 = new SeriesMapping() { LegendLabel = "List2", CollectionIndex = 1 };
       
    seriesMapping1.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.YValue });
       
    seriesMapping2.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.YValue });
       
    SeriesMappingCollection seriesMappings = new SeriesMappingCollection() { seriesMapping1, seriesMapping2 };

       
    RadChart1.SeriesMappings = seriesMappings;
       
    RadChart1.ItemsSource = combinedList;
    }

    This method shows how to set up RadChart’s series mappings to activate the feature. The first three lines are simply code for creating the nested data and inserting it into a parent collection (an array in this case). Next, we create our series mappings as usual, but now we specify a new property - “CollectionIndex” which basically tells RadChart that its ItemsSource is a collection of collections and maps each nested collection to a particular data series. The next two lines are pretty standard and should not be a surprise to RadChart veterans as they simply map the numeric data to the YValues of the series. Finally, we set the mappings and data to the chart and we’re done!

    chart_databinding

    Simple, isn’t it? Let us know what your most common business scenarios are and what data source you use with RadChart most often. As always we will try to make things easier for you.

  1. 1
  2. 2
  3. 3
  4. 4
  5. »