how to put chart directly on map

[MaxenceIRITIE]

hi,

i have done my project using silverlight and it possible to display some charts depending to application context. I need to put these chart on the map to become more expressive for users. But i don't know how to make it. In the help, i saw it's possible to display chart on popup and it's not what i need. I need to draw more than twenty chart directly in georeferenced location.

[HugoCardenas]

I just finished putting a nice chart on an "esri:InfoWindow"; it may not be that "expressive", but it is quite good.  I can place hundreds of charts, even "expressive" ones (if anyone knows the meaning of this), using the same "esri:InfoWindow" and providing you have a big screen to preview them all at once.  I used "Telerik" chart control inside the "esri:InfoWindow" control.  I bind the data to the chart at run-time, when the user clicks the feature.  I bind an ObservableCollection(T) to it.  It works nice, really.

References to Telerik libraries:

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

XAML code (I bind the spectrum of the "BinData" property and the "MinFrequency" for frequency in Hz):

      <esri:InfoWindow x:Name="MyInfoWindow" MouseLeftButtonUp="MyInfoWindow_MouseLeftButtonUp" Map="{Binding ElementName=MyMap}" Width="500" Height="300">
        <Grid>
          <Border>
            <chart:RadChart x:Name="RadChart1">
              <chart:RadChart.DefaultView>
                <charting:ChartDefaultView>
                  <charting:ChartDefaultView.ChartArea>
                    <charting:ChartArea LegendName="legend" Margin="0,0,20,0">
                      <charting:ChartArea.AxisY>
                        <charting:AxisY AutoRange="False" MinValue="0" MaxValue="220" Step="20" MinorTicksVisibility="Collapsed">
                          <charting:AxisY.AxisStyles>
                            <charting:AxisStyles ItemLabelStyle="{StaticResource CustomYAxisItemLabelStyle}"></charting:AxisStyles>
                          </charting:AxisY.AxisStyles>
                        </charting:AxisY>
                      </charting:ChartArea.AxisY>
                      <charting:ChartArea.AxisX>
                        <charting:AxisX>
                          <charting:AxisX.AxisStyles>
                            <charting:AxisStyles ItemLabelStyle="{StaticResource CustomYAxisItemLabelStyle}"></charting:AxisStyles>
                          </charting:AxisX.AxisStyles>
                        </charting:AxisX>
                      </charting:ChartArea.AxisX>
                    </charting:ChartArea>
                  </charting:ChartDefaultView.ChartArea>
                  <charting:ChartDefaultView.ChartLegend>
                    <charting:ChartLegend x:Name="legend" Visibility="Collapsed" />
                  </charting:ChartDefaultView.ChartLegend>
                </charting:ChartDefaultView>
              </chart:RadChart.DefaultView>
              <chart:RadChart.SeriesMappings>
                <charting:SeriesMapping LegendLabel="Spectrum">
                  <charting:SeriesMapping.SeriesDefinition>
                    <charting:HorizontalBarSeriesDefinition ShowItemLabels="True">
                    </charting:HorizontalBarSeriesDefinition>
                  </charting:SeriesMapping.SeriesDefinition>
                  <charting:ItemMapping DataPointMember="XCategory" FieldName="MinFrequency" />
                  <charting:ItemMapping DataPointMember="YValue" FieldName="BinData" />
                </charting:SeriesMapping>
              </chart:RadChart.SeriesMappings>
            </chart:RadChart>
          </Border>
        </Grid>
      </esri:InfoWindow>

A very basic style for the labels (you can get quite "expressive") if needed:

<Style x:Key="CustomYAxisItemLabelStyle" TargetType="TextBlock">
   <Setter Property="TextAlignment" Value="Left" />
   <Setter Property="FontSize" Value="8" />
</Style>

Graphics layer (feature service can be used as well)

<esri:GraphicsLayer ID="LeakLoggers" Renderer="{StaticResource LeakLoggerRenderer}" MouseLeftButtonDown="LeakLoggers_MouseLeftButtonDown" />

Mouse left button event: code-behind.  The property "NoiseSpectra" is a Dictionary<long, ObservableCollection<LoggerSpectrum>> holding each device id as a Key and a collection of "LoggerSpectrum" instances.
So, when the user clicks a device (a point) on the map, I retrieve the id of the clicked point; then, I retrieve the spectrum data for this id from the Dictionary.  Once I have it, I bind the collection to the chart (cf. below).

    private void LeakLoggers_MouseLeftButtonDown(object sender, GraphicMouseButtonEventArgs e)
    {
      long dcomId = 0;
      try
      {
        dcomId = Convert.ToInt64(e.Graphic.Attributes["DcomId"]);
      }
      catch { }

      // Retrieve the noise spectrum for this LD Logger
      ObservableCollection<LoggerSpectrum> oneSpectrum;
      bool foundSpectrum = NoiseSpectra.TryGetValue(dcomId, out oneSpectrum);

      if (foundSpectrum)
      {
        MyInfoWindow.Anchor = new ESRI.ArcGIS.Client.Geometry.MapPoint(e.Graphic.Geometry.Extent.XMin, e.Graphic.Geometry.Extent.YMin);
        MyInfoWindow.IsOpen = true;

        RadChart1.ItemsSource = oneSpectrum;
      }
    }

The "esri:InfoWindow" raises its mouse left button up to hide the chart when the chart is clicked.

private void MyInfoWindow_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
   MyInfoWindow.IsOpen = false;
}

As I said, you can place hundreds of charts in this info window - you would have to make it really big.  Mine is just 500 x 300.
Hope this helps.
Hugo.

[DominiqueBroux]

This sample might help.

[MaxenceIRITIE · Accepted solution]

thank you for my problem addressed.
I found a simple solution to be implemented by relying on the indication of 'Droux' and this downloadable sample.


1 - Import Project ESRI.ArcGIS.Samples.PieChartSymbology or its DLL. (downloadable on the link given)
2 - use the imported project.

In my case, I wrote a method to define a graphic containing a symbol modeled on the pie chart as shown below

        Graphic proc_get_pieSymbol(double gps_x, double gps_y, KeyValuePair<string, int>[] _serie)         {              // PIE Symbol definition             PieMarkerSymbol _symbol = new ESRI.ArcGIS.Samples.PieChartSymbology.PieMarkerSymbol();              // Graphic definition             Graphic _graphic = new Graphic();              // Independant value definition             foreach (var elt in _serie)             {                 _symbol.Fields.Add(new ESRI.ArcGIS.Samples.PieChartSymbology.Field() { DisplayName = elt.Key, FieldName = elt.Key });             }              // Attach the preview symbol to a graphic for graphic layer             _graphic.Symbol = _symbol;              // Definition of dependant value. Note KeyValuePair<string, objet> is necessary to define value. The key must be an sepecific "independant value" and "object" is the dependant.             // In my case, object is <int>             foreach (var elt in _serie)             {                 _graphic.Attributes.Add(new KeyValuePair<string, object>(elt.Key, elt.Value));             }              // definition of destination gps position on the map             _graphic.Geometry = new MapPoint(gps_x, gps_y);               // the pie Symbol as Graphic for Graphics Layer is right now!              return _graphic;         }

I hope this post will help other developers!