How to: Automatically Generate Bubble Chart Items from a Datasource

• Apr 15, 2018

To generate bubble charts from a data source, do the following.

1. Create a BubbleChartDataAdapter object and assign it to the VectorLayer.Data property.
2. Bind a data source to the DataSourceAdapterBase.DataSource property of the object.
3. Specify mappings to assign data fields to bubble properties. To do this, specify the MapItemMappingInfoBase.Latitude, MapItemMappingInfoBase.Longitude and MapBubbleMappingInfo.Value properties of the MapBubbleMappingInfo object assigned to the BubbleChartDataAdapter.Mappings property.
4. Specify settings which are used to generate map bubble charts. To do this, specify the MapBubbleSettings object’s properties. This object can be accessed using the BubbleChartDataAdapter.BubbleSettings property of the adapter.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-automatically-generate-bubble-chart-items-from-a-datasource-t180068.

MainWindow.xaml

<dxm:VectorLayer x:Name="earthquakesLayer" ShapeFill="Orange" ToolTipEnabled="True" 
                 ToolTipPattern="{}{Month}/{Day}/{Year}&#x0a;Magnitude: %V%&#x0a;Depth: {Depth}km">
    <dxm:BubbleChartDataAdapter DataSource="{Binding Data}" 
                                ItemMaxSize="60" ItemMinSize="10">
        <dxm:BubbleChartDataAdapter.AttributeMappings>
            <dxm:MapItemAttributeMapping Member="day" Name="Day"/>
            <dxm:MapItemAttributeMapping Member="mon" Name="Month"/>
            <dxm:MapItemAttributeMapping Member="yr" Name="Year"/>
            <dxm:MapItemAttributeMapping Member="dep" Name="Depth"/>
        </dxm:BubbleChartDataAdapter.AttributeMappings>
        <dxm:BubbleChartDataAdapter.Mappings>
            <dxm:MapBubbleMappingInfo Latitude="glat" Longitude="glon" Value="mag"/>
        </dxm:BubbleChartDataAdapter.Mappings>
        <dxm:BubbleChartDataAdapter.BubbleSettings>
            <dxm:MapBubbleSettings MarkerType="Circle"/>
        </dxm:BubbleChartDataAdapter.BubbleSettings>
    </dxm:BubbleChartDataAdapter>
</dxm:VectorLayer>