I am trying to build a simple chart that graphs amount of powner used over time. I must be missing something very obvious because its not working. I have bound my graph to the observable collection (which has hard coded values in it in the constructor just for testing), set the datamapping..no data. I added axis...still not working. I wanted to do this via scatter line, but I just get the warning about setting parameters (which I do, but it doesn't work). I know I am just missing something. Here is the xaml:
<igChart:XamWebChart Margin="0,0,0,0" DataContext="{Binding PowerPerHour, Source={StaticResource PowerPerHourDataSource}}"> <igChart:XamWebChart.Axes> <igChart:Axis DataContext="{Binding Path=TimeStamp, Mode=OneWay}" x:Name="AxisX"/> <igChart:Axis DataContext="{Binding Path=AmountOfPower, Mode=OneWay}" x:Name="AxisY" AxisType="PrimaryY" AutoRange="False" Maximum="3800" Minimum="2000" Unit="250"/> </igChart:XamWebChart.Axes> <igChart:XamWebChart.Series> <igChart:Series ChartType="Line" AxisX="AxisX" AxisY="AxisY" DataMapping="ValueX=Timestamp; ValueY=AmountOfPower" DataSource="{Binding Path=PowerPerHour, Mode=OneWay}" Label="Power Per Hour"/> </igChart:XamWebChart.Series> </igChart:XamWebChart>
The observable collection exposes a ObservableCollection<PowerDataPoint>
Where PowerDataPoint exposes two fields:
public DateTime Timestap { get;; set; }
public double AmountOfPower { get; set; }
Anybody that could help I would apprieciate it.
Thanks
You need to remove Path=PowerPerHour from the DataSource binding of the series. You are aready scoping down to that property in the DataContext on the chart. If you try to find the PowerPerHour property on your collection of PowerDataPoint it will find not items.
-Graham
I missed typed. Sorry about that.
By the way, is that typo in your Timstamp property in the first post a transcription error, or is that how it looks in your code?
<igChart:XamWebChart Margin="0,0,0,0" DataContext="{Binding Source={StaticResource PowerPerHourDataSource}, Path=PowerPerHour}"> <igChart:XamWebChart.Axes> <igChart:Axis DataContext="{Binding Path=TimeStamp, Mode=OneWay}" x:Name="AxisX"/> <igChart:Axis DataContext="{Binding Path=AmountOfPower, Mode=OneWay}" x:Name="AxisY" AxisType="PrimaryY" AutoRange="False" Maximum="3800" Minimum="2000" Unit="250"/> </igChart:XamWebChart.Axes> <igChart:XamWebChart.Series> <igChart:Series ChartType="ScatterLine" DataMapping="ValueX=Timestamp; ValueY=AmountOfPower" DataSource="{Binding Path=PowerPerHour, Mode=OneWay}" Label="Power Per Hour"> <igChart:Series.ChartParameters> <igChart:ChartParameter Type="ValueX" Value="Timestamp"/> <igChart:ChartParameter Type="ValueY" Value="AmountOfPower"/> </igChart:Series.ChartParameters> </igChart:Series> </igChart:XamWebChart.Series> </igChart:XamWebChart>
The DataMapping you were using originally is appropriate for scatter charts which have 2 value axes.