topic Re: Help with a simple Line Chart in ArcGIS API for Silverlight Questions

Help with a simple Line Chart

JoshV — Wed, 09 Mar 2011 20:48:42 GMT

Hello All-

I have a simple Silverlight Application that uses a Timeline and I just want to put in a simple Line Chart above the timeline that will dynamically change if possible. I've been looking at this link (http://www.silverlight.net/content/samples/sl4/toolkitcontrolsamples/run/default.html) but in the Line Series Section for the XAML I do not understand how they are passing the values to the chart. Does anyone have any good examples of code that show the chart linked to a layer in the Map?

Many Thanks,

Re: Help with a simple Line Chart

JenniferNery — Fri, 10 Dec 2021 23:16:55 GMT

I have not used LineSeries myself but if you look at the code and chart sample, you will notice that they set ItemsSource, IndependentValueBinding (X-axis) and DependentValueBinding (Y-axis).

  <chartingToolkit:Chart Title="Typical Use">
                    <chartingToolkit:ChartSeries>
                        <chartingToolkit:LineSeries Title="Particulate Levels" ItemsSource="{Binding LevelsInRainfall, Source={StaticResource ParticulateLevel}}" IndependentValueBinding="{Binding Rainfall}" DependentValueBinding="{Binding Particulate}"/>
                    </chartingToolkit:Chart.Series>
                </chartingToolkit:Chart>

This might also be helpful: http://leeontech.wordpress.com/2009/03/13/showing-and-hiding-series-in-chart/

Re: Help with a simple Line Chart

JoshV — Wed, 09 Mar 2011 22:26:01 GMT

I have not used LineSeries myself but if you look at the code and chart sample, you will notice that they set ItemsSource, IndependentValueBinding (X-axis) and DependentValueBinding (Y-axis).

Hi Jennifer- Where is "Rainfall" and "Particulate" coming from? I can tell its affecting the X and Y axis but am not sure where exactly its coming from. Also what would I do differently to have it read from a layer in my Map? Thanks Jennifer

Re: Help with a simple Line Chart

DominiqueBroux — Fri, 10 Dec 2021 23:16:58 GMT

If you need to get one line or one column by graphic, the ItemSources of your chart can be the Graphics property of your layer.

Something like (based on this sample : http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#TemporalRendererTracks) :

<Charting:Chart>
<Charting:Chart.Series>
<Charting:ColumnSeries Title="Wind Speed" ItemsSource="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].Graphics}" IndependentValueBinding="{Binding Attributes[EVENTID]}" DependentValueBinding="{Binding Attributes[WINDSPEED]}"/>
</Charting:ColumnSeries>
</Charting:Chart.Series>
</Charting:Chart>

Then, when using TimeAware layers, the difficulty is to filter the graphics in order your chart to display only the graphics in the current time extent and/or only the last observations.

Let do that with the hurricane sample.

1) Let's write a method returning the graphics corresponding to the last observations of the time extent (thanks LINQ):

private IEnumerable<Graphic> GetLastObservations(IEnumerable<Graphic> graphics)
{
return from g in graphics
where g.TimeExtent.Intersects(MyMap.TimeExtent)
group g by g.Attributes["EVENTID"] into grp
select grp.OrderByDescending(g => g.Attributes["Date_Time"]).First();
}

2) Define a property to return the LastObservations:

private readonly ObservableCollection<Graphic> _lastObservations = new ObservableCollection<Graphic>();
public ObservableCollection<Graphic> LastObservations { get { return _lastObservations; } }

3) Define a method setting this LastObservations property:

private void SetLastObservations()
{
    var layer = MyMap.Layers["MyHurricaneFeatureLayer"] as GraphicsLayer;
    LastObservations.Clear();
    foreach (var g in GetLastObservations(layer.Graphics))
        LastObservations.Add(g);
}

4) Call SetLastObservations when the collection can change i.e. when the feature layer updates and when the time extent changes:

private void FeatureLayer_UpdateCompleted(object sender, EventArgs e)
{
    SetLastObservations();
}
 
private void MyMap_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
    if (e.PropertyName == "TimeExtent")
        SetLastObservations();
}

4) In XAML, hook up these events
5) Modify the chart to take care of this LastObservations property

<Charting:Chart><Charting:Chart.Series>
<Charting:ColumnSeries Title="Wind Speed" ItemsSource="{Binding LastObservations}" IndependentValueBinding="{Binding Attributes[EVENTID]}" DependentValueBinding="{Binding Attributes[WINDSPEED]}">
</Charting:ColumnSeries>
</Charting:Chart.Series>
<Charting:Chart.Axes>
<Charting:LinearAxis Orientation="Y" Minimum="0" Maximum="120" Interval="20" ShowGridLines="True" FontStyle="Italic"/>
</Charting:Chart.Axes>
</Charting:Chart>

6) Set the datacontext of your control to itself:

public TemporalRendererTracks()
{
    InitializeComponent();
    DataContext = this;
}

Hope I didn't forget some steps!

Re: Help with a simple Line Chart

JoshV — Thu, 10 Mar 2011 17:15:49 GMT

If you need to get one line or one column by graphic, the ItemSources of your chart can be the Graphics property of your layer.

Something like (based on this sample : http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#TemporalRendererTracks) :

Hi Dominique- Thank you for posting this reply. Where you are saying

<Chart.Chart>

what do I need to do to reference Chart so I can that part working?

Re: Help with a simple Line Chart

DominiqueBroux — Thu, 10 Mar 2011 18:35:33 GMT

In your project, add a reference to System.Windows.Controls.DataVisualization.Toolkit.

and in your xaml, add this line:

 xmlns:Charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

Re: Help with a simple Line Chart

JoshV — Thu, 10 Mar 2011 19:58:32 GMT

In your project, add a reference to System.Windows.Controls.DataVisualization.Toolkit.

and in your xaml, add this line:
xmlns:Charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

Hi Dominique- The reference you gave me worked so now I'm trying to test all the code you provided. The Graph comes in my Silverlight just fine but when I run the website in my browser nothing ever gets drawn in the graph. No line or or anything. I'm testing to see if the Layer name I used instead of MyHurricaneFeatureLayer is an issue. I used your code nearly exactly accept changed MyHurricaneFeatureLayer to WellsFeatureLayer and the Attributes in my layer I need to use are in a column called EOM (X-axis) and column called Adj_Close (Y-Axis). If you have any suggestions I'd be glad to hear them. Thanks again Dominique

Also, the WellsFeatureLayer is just from my Dynamic Layer but I added a line after the dynamic service in my XAML like this:

<esri:FeatureLayer ID="WellsFeatureLayer" Url="http://serverprd02/ArcGIS/rest/services/SilverLightDir/Wells_Timeline/MapServer/0" />

Re: Help with a simple Line Chart

DominiqueBroux — Fri, 10 Dec 2021 23:17:00 GMT

No clue.

Do you get something if you use the first version I gave that doesn't need any code:

 
<Charting:Chart>
<Charting:Chart.Series>
<Charting:ColumnSeries Title="Wind Speed" ItemsSource="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].Graphics}" IndependentValueBinding="{Binding Attributes[EVENTID]}" DependentValueBinding="{Binding Attributes[WINDSPEED]}"/>
</Charting:ColumnSeries>
</Charting:Chart.Series>
</Charting:Chart>

Re: Help with a simple Line Chart

JoshV — Fri, 10 Dec 2021 23:17:03 GMT

No clue.

Do you get something if you use the first version I gave that doesn't need any code:

 
<Charting:Chart>
<Charting:Chart.Series>
<Charting:ColumnSeries Title="Wind Speed" ItemsSource="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].Graphics}" IndependentValueBinding="{Binding Attributes[EVENTID]}" DependentValueBinding="{Binding Attributes[WINDSPEED]}"/>
</Charting:ColumnSeries>
</Charting:Chart.Series>
</Charting:Chart>

Hi Dominique- Thank you again for the fast response. I used just your code above and made some minor changes and I will post it below in case you see any problems. First, I'm not sure if this is the issue but I published my MSD to a MapService and that MapService is what I was calling in your code below. Do I need to publish it as more than a Mapservice because I'm not sure how the Chart will know which layer to use in my MapService. I tried just declaring a FeatureLayer but not sure if that was the way to do it.

<esri:ArcGISDynamicMapServiceLayer ID="WellsLayer" Opacity="0.8" 
                    Url="http://serverprd02/ArcGIS/rest/services/SilverLightDir/Wells_Timeline/MapServer"
                     Initialized="ArcGISDynamicMapServiceLayer_Initialized" />


            <esri:FeatureLayer ID="WellsFeatureLayer" Url="http://serverprd02/ArcGIS/rest/services/SilverLightDir/Wells_Timeline/MapServer/0" />

Second, below is my code of small changes I made in the chart. Any issue? I also attached a picture of the Attribute Table showing the two columns in my Wells Layer in my MapService that I need to use for this Chart.

<charting:Chart HorizontalAlignment="Left" VerticalAlignment="Bottom">
            <charting:Chart.Series>
                <charting:ColumnSeries Title="Wind Speed" ItemsSource="{Binding ElementName=map1, Path=Layers[WellsLayer].Graphics}" IndependentValueBinding="{Binding Attributes[EOM]}" DependentValueBinding="{Binding Attributes[Adj_Close]}">
                </charting:ColumnSeries>
            </charting:Chart.Series>
        </charting:Chart>

Thoughts? I'm sure I'm forgetting something and that's why my Chart is not drawing. I feel this is very close to working.

Re: Help with a simple Line Chart

DominiqueBroux — Fri, 10 Dec 2021 23:17:06 GMT

You feature layer ID is WellsFeatureLayer (not WellsLayer).

 
Path=Layers[WellsFeatureLayer].Graphics

Re: Help with a simple Line Chart

JoshV — Fri, 10 Dec 2021 23:17:09 GMT

You feature layer ID is WellsFeatureLayer (not WellsLayer).
 
Path=Layers[WellsFeatureLayer].Graphics

Hi Dominique- If I set it to WellsFeatureLayer then I get the attached error message (picture attached). It states an Object Reference is not set. Did I declare the WellsFeatureLayer correctly or did I need to publish my MapService as something more than just a MapService?

 <esri:FeatureLayer ID="WellsFeatureLayer" Url="http://serverprd02/ArcGIS/rest/services/SilverLightDir/Wells_Timeline/MapServer/0" />

Re: Help with a simple Line Chart

DominiqueBroux — Fri, 11 Mar 2011 11:45:49 GMT

You need to initialize the OutFields property of your feature layer :
OutFields="*" or OutFields="EOM,Adj_Close"

Sorry, I should have noticed that at your previous post but I missed the point.

Re: Help with a simple Line Chart

JoshV — Fri, 10 Dec 2021 23:17:12 GMT

You need to initialize the OutFields property of your feature layer :
OutFields="*" or OutFields="EOM,Adj_Close"

Sorry, I should have noticed that at your previous post but I missed the point.

You beat me to the response 😉 Here is what I was typing.. If I add the below code where I declare my FeatureLayer and run my App I do not get the error above but when I select anything in the App I just get an hour glass. any idea why I get an hour glass? I'll keep testing

<esri:FeatureLayer ID="WellsFeatureLayer" Url="http://serverprd02/ArcGIS/rest/services/SilverLightDir/Wells_Timeline/MapServer/0" >
                <esri:FeatureLayer.OutFields>
                    <sys:String>EOM</sys:String>
                    <sys:String>Adj_Close</sys:String>
                </esri:FeatureLayer.OutFields>
            </esri:FeatureLayer>

Re: Help with a simple Line Chart

DominiqueBroux — Fri, 11 Mar 2011 12:00:49 GMT

any idea why I get an hour glass?

Perhaps just slow because too much objects in the chart. How many features in your layer?
If it's the case, the filtering by timeextent will help.

Re: Help with a simple Line Chart

JoshV — Fri, 10 Dec 2021 23:17:15 GMT

Perhaps just slow because too much objects in the chart. How many features in your layer?
If it's the case, the filtering by timeextent will help.

The WellsFeatureLayer has 2,551 features is that too many? I tried commenting all the code in the codebehind out like you mentioned yesterday so I'm just using the code in XAML but it still locks up. I will uncomment all the codebehind code you provided me and wait a few more seconds before selecting anything in the Map to see if that works. My TimeSlider control is called MyTimeSlider so where you have this line in the codebehind does it need to say "== MyTimeSlider" or "== TimeEvent"?

if (e.PropertyName == "TimeEvent")
                SetLastObservations();

Also I attached my MainPage.XAML.cs as a text file in case you see any issues.

Best regards,

Re: Help with a simple Line Chart

DominiqueBroux — Fri, 10 Dec 2021 23:17:17 GMT

does it need to say "== MyTimeSlider" or "== TimeEvent"?

"TimeEvent" : it's the name of the map property which has changed.

public void TemporalRendererTracks()
{
InitializeComponent();
DataContext = this;
}

TemporalRendererTracks was the name of the sample class.
Remove that code and complete your class constructor:

 
public MainPage()
        {
            InitializeComponent();
            DataContext = this;  
        }

return from g in graphics
where g.TimeExtent.Intersects(map1.TimeExtent)
group g by g.Attributes["EOM"] into grp
select grp.OrderByDescending(g => g.Attributes["EOM"]).First();

In your case, you don't need the 2 last lines (useful to get the last observation corresponding to an ID). Try with just :

 return from g in graphics
where g.TimeExtent.Intersects(map1.TimeExtent);

Re: Help with a simple Line Chart

JoshV — Fri, 11 Mar 2011 13:29:20 GMT

I trimmed down my Wells Feature class to just 5 Wells and republished my service and the App will run and the Chart displays. The Chart seems static though and shows all records at once so I'm not sure what's going on there. I didn't think 2000 records would be that much for this to handle so I guess I will try to add the full 2000 record Wells layer as a layer and have the Chart pull off of a simplified Wells layer (maybe 20 records) in that same service. Thoughts?

Re: Help with a simple Line Chart

DominiqueBroux — Fri, 11 Mar 2011 13:54:59 GMT

The Chart seems static though

Check with the debugger that SetLastObservations is being called when the time extent changed.

I didn't think 2000 records would be that much for this to handle

It's likely only an optimization matter.
A chart can handle 2000 objects but with this binding ItemsSource="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].Graphics}", as Graphics is an observable collection, the chart is reinitialized each time a graphic is added to the feature layer so 2000 times in your case.
Hovever the timeextent filtering should reduce this number. How many features are displayed at a time?

If you have too ma,y features, you can optimize by replacing the ObservableCollection by a simple collection (IEnumerable) and by firing by yourself the PropertyChanged event each time the collection changed (or another option is to use a dependency property, up to you).

Re: Help with a simple Line Chart

JoshV — Fri, 11 Mar 2011 17:23:57 GMT

Hi Dominique- I found out why nothing was drawing on my Chart after repointing my data back to the 2000 record Wells Feature Class. The If Statement in map1_PropertyChanged was never entering SetLastObservations(), so I changed the If condition to where it does enter SetLastObservations. But now I'm getting an error inside SetLastObservations inside the foreach loop. The error is attached. Do I need to actually have a graphics layer present in my Map? Could that be what is causing the error?

Re: Help with a simple Line Chart

JoshV — Fri, 11 Mar 2011 18:37:11 GMT

Check with the debugger that SetLastObservations is being called when the time extent changed.

It's likely only an optimization matter.
A chart can handle 2000 objects but with this binding ItemsSource="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].Graphics}", as Graphics is an observable collection, the chart is reinitialized each time a graphic is added to the feature layer so 2000 times in your case.
Hovever the timeextent filtering should reduce this number. How many features are displayed at a time?

If you have too ma,y features, you can optimize by replacing the ObservableCollection by a simple collection (IEnumerable) and by firing by yourself the PropertyChanged event each time the collection changed (or another option is to use a dependency property, up to you).

After debugging multiple times, it appears that the program always errors when adding the graphics to LastObservations. I've tried it with a FeatureClass that only has 5 records and I've tried it with my original FeatureClass of 2000 records but always errors at

LastObservations.Add(g);

Funny thing is that on the Chart, the Date for the first feature will appear in my X-Axis but no line graph is drawn and then the error occurs. It's very close it seems to working. I deeply appreciate all your help Dominique and look forward to hearing from you.

-Regards,