Scatter Chart ( bubbles?)

[Dr.YSG]

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;
        }
    }
}

[Ves]

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.

[Dr.YSG]

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>

[Dr.YSG]

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