Scatter Chart ( bubbles?)

4 posts, 1 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 12 Jan 2010 Link to this post

    I am trying to decoratively create a Scatter Chart that is data bound.

    I understand that your latest version support creating scatter charts with BubbleSeries. But how can I do this is XAML? The only examples in your gallery are done in code.

    If I am using a Bubble Chart, how do I do this in XAML. I am using VS2010 and Blend SL4 (and your SL4 toolkit) but I am getting nothing but syntax errors:

             xmlns:tc="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"


            <tc:RadChart
                x:Name="chartObject"
                ItemsSource="{Binding EventData, Mode=OneWay}"
                d:LayoutOverrides="Width, Height">
                <tc:RadChart.SeriesMappings>
                    <tc:RadChart.SeriesMappings.SeriesDefinition>
                    <tc:RadChart.SeriesMappings.SeriesDefinition.BubbleSize.
                    </tc:RadChart.SeriesMappings.SeriesDefinition>
                </tc:RadChart.SeriesMappings>
            </tc:RadChart>

    The documentation is thin on this subject (I read through all your help API help on RadCharts) and the only help I have is this one exmaple in the gallery done in C#. Can you post something like this simple example done entirely in XAML? I also want to style the DataPoints. So a place holder for where one binds the DataPointTemplate to a <DataTemplate> would be great. (I already have enough information for how to create a DataTemplate and bind it to values from the collection).


            private void FillSampleChartData()
            {
                SeriesMapping sm1 = new SeriesMapping();
                sm1.SeriesDefinition = new BubbleSeriesDefinition();
                sm1.LegendLabel = "Bubble Series 1";
                sm1.CollectionIndex = 0;

                ItemMapping imY1 = new ItemMapping("Y", DataPointMember.YValue);
                ItemMapping imBS1 = new ItemMapping("BubbleSize", DataPointMember.BubbleSize);

                sm1.ItemMappings.Add(imY1);
                sm1.ItemMappings.Add(imBS1);

                SeriesMapping sm2 = new SeriesMapping();
                sm2.SeriesDefinition = new BubbleSeriesDefinition();
                sm2.LegendLabel = "Bubble Series 2";
                sm2.CollectionIndex = 1;

                ItemMapping imY2 = new ItemMapping("Y", DataPointMember.YValue);
                ItemMapping imBS2 = new ItemMapping("BubbleSize", DataPointMember.BubbleSize);

                sm2.ItemMappings.Add(imY2);
                sm2.ItemMappings.Add(imBS2);

                RadChart1.SeriesMappings.Add(sm1);
                RadChart1.SeriesMappings.Add(sm2);

                List<List<UserDataPoint>> itemsSource = new List<List<UserDataPoint>>() { SeriesExtensions.GetUserBubbleData(), SeriesExtensions.GetUserBubbleMixedData() };

                RadChart1.ItemsSource = itemsSource;
            }
        }
    }




  2. Answer
    Ves
    Admin
    Ves avatar
    2879 posts

    Posted 15 Jan 2010 Link to this post

    Hi Dr.YSG,

    The bubble series is capable of rendering unsorted data. You will not need to sort the data in code behind. Please, make sure are using the latest assemblies available. I will pass your feedback on the DataTemplate to our developers for further consideration. For now - RadChart allows you to re-template the series as shown in this help topic, it is dedicated to bars, but the approach is valid for bubbles too.

     I have attached a small example -- it shows how to create a RadChart with two bubble series, populated with unsorted data. The series mappings are created in XAML, the entire code-behind is only used to generate data. In addition, one of the series is re-templated to show red squares with variable size (depending on BubbleSize) and position (depending on XValue and YValue).
    Hope this helps.

    Best regards,
    Ves
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. DevCraft banner
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 20 Jan 2010 Link to this post

    This was a very good starter. I have something partially working with a code-behind. But I am using the MVVM paradigm, so I don't want to set the itemsource in a code behind, but searching your help did not show me how to do this in XAML. In addition, I want a seperate itemsource for each series and I want the visibilty to also be mapped to a ViewModel propertly. In the siverlight toolkit it looks like this:

            <chart:Chart Title="Deaths Vs. Passengers" 
                         Margin="0,24,0,0" 
                         LegendStyle="{StaticResource NoLegend}"
                <chart:BubbleSeries x:Name="EventSeries" 
                                    DependentValuePath="Passengers" 
                                    IndependentValuePath="Deaths" 
                                    Visibility="{Binding EventDisplay, Converter={StaticResource Bool2Visible}, Mode=OneWay}" 
                                    SizeValuePath="Size" 
                                    ItemsSource="{Binding EventData, Mode=OneWay}" 
                                    Title="Deaths Vs. Passengers" 
                                    DataPointStyle="{StaticResource EventBubble}" /> 
                <chart:BubbleSeries x:Name="ClusterSeries" 
                                    DependentValuePath="PassengersAvg" 
                                    IndependentValuePath="DeathsAvg" 
                                    SizeValuePath="YearAvg" 
                                    Visibility="{Binding ClusterDisplay, Converter={StaticResource Bool2Visible}, Mode=OneWay}" 
                                    ItemsSource="{Binding ClusterData, Mode=OneWay}" 
                                    DataPointStyle="{StaticResource ClusterBubble}" /> 
            </chart:Chart> 

  5. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 21 Jan 2010 Link to this post

    I found ItemsSource in buried in a example. So I consider this thread answered. Thank you.


Back to Top