Column Chart of Feature Data Grid

DanielSanders

I have a map with a graphics layer and a feature data grid. The feature data grid has only two columns: area name and area value. I would like to create a column chart based on the data in the feature data grid, with area name (1st column) on the x-axis and area value (2nd column) on the y-axis (for example, county name and population 2000).
To accomplish this should I
a) bind the chart to the graphics layer on the map,
b) bind the chart to the feature data grid, or
c) bind the chart to a listbox that is created with the data?

I've tried different things, but can't it to work (I'm not very familiar with binding syntax).

<esri:FeatureDataGrid Grid.Row="2" x:Name="MyDataGrid"
  Map="{Binding ElementName=MyMap}"
  GraphicsLayer="{Binding ElementName=MyMap, Path=Layers.[MyGraphicsLayer]}" />
<toolkit:Chart Margin="10,4,0,0" Name="chart1" Title="Chart Title">
  <toolkit:ColumnSeries ItemsSource="{Binding ElementName=MyMap, Path=Layers.[MyGraphicsLayer]}" IndependentValueBinding="{Binding [AreaName]}" DependentValueBinding="{Binding [AreaValue]}">
  </toolkit:ColumnSeries>
</toolkit:Chart>

Thanks for your help...

DominiqueBroux

Code sample giving the attached result:

 
<Grid x:Name="LayoutRoot">
 <esri:Map x:Name="MyMap">
  <esri:ArcGISTiledMapServiceLayer ID="BaseLayer" Visible="True"
                Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  <esri:FeatureLayer ID="MyGraphicsLayer" Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2"
       Mode="OnDemand" OutFields="*" OnDemandCacheSize="5"  /> 
 </esri:Map>
 <esri:FeatureDataGrid Grid.Row="2" x:Name="MyDataGrid" Height="180" VerticalAlignment="Bottom" Map="{Binding ElementName=MyMap}"
       GraphicsLayer="{Binding ElementName=MyMap, Path=Layers.[MyGraphicsLayer]}" />
 <charting:Chart Name="myChart" Title="Population" Height="300" Width="400" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{StaticResource CommonBackgroundBrush}">
  <charting:ColumnSeries Title="Population 1990" ItemsSource="{Binding ElementName=MyMap, Path=Layers[MyGraphicsLayer].Graphics}"
        DependentValuePath="Attributes[POP1990]" IndependentValuePath="Attributes[STATE_NAME]"
        IsSelectionEnabled="True" SelectionChanged="ColumnSeries_SelectionChanged"/>
  <charting:ColumnSeries Title="Population 1999" ItemsSource="{Binding ElementName=MyMap, Path=Layers[MyGraphicsLayer].Graphics}"
        DependentValuePath="Attributes[POP1999]" IndependentValuePath="Attributes[STATE_NAME]"
        SelectedItem="{Binding ElementName=MyMap, Path=Layers[MyGraphicsLayer].SelectedGraphics[0]}" />
   <charting:Chart.Axes>
   <charting:CategoryAxis Orientation="X"  SortOrder="Ascending">
    <charting:CategoryAxis.AxisLabelStyle>
     <!-- Text Vertical -->
     <Style TargetType="charting:AxisLabel">
      <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
      <Setter Property="RenderTransform">
       <Setter.Value>
        <RotateTransform Angle="-90"/>
       </Setter.Value>
      </Setter>
     </Style>
    </charting:CategoryAxis.AxisLabelStyle>
   </charting:CategoryAxis>
  </charting:Chart.Axes>
 </charting:Chart>
</Grid>

For one series the synchronization with the first selected graphic is done by xaml ( SelectedItem="{Binding ElementName=MyMap, Path=Layers[MyGraphicsLayer].SelectedGraphics[0]}" ), for the other series, the synchronization is done by code (from chart to graphic selection):

 
private void ColumnSeries_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
  Graphic g = (sender as ColumnSeries).SelectedItem as Graphic;
  if (g != null)
    g.Selected = true;
}

charting.png