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
The line chart is a single value axis chart, ValueX, ValueY are for charts with two numeric axes like Scatter, etc.
Try a DataMapping value that looks like this instead:
DataMapping="Label = Timestamp; Value = AmountOfPower"
see: http://help.infragistics.com/NetAdvantage/DV/2009.2/CLR3.5/?page=SL_DV_xamWebChart_DataMapping_for_Single_Value_Axis_Charts.html
-Graham
Thanks for getting back to me Grahm. I can make line work now so thanks. What I really want is the scatter line. When I changed the datamapping as you said, but it still gives me the error:
"The scatter chart needs ValueX and ValueY. The values have to be set for every data point using ChartParameters collection."
I have defined them in the series ChartParameter collection for both ValueX and ValueY so Im not sure what I am doing wrong.
Thanks again for your help.
The DataMapping you were using originally is appropriate for scatter charts which have 2 value axes.
<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>
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?
I missed typed. Sorry about that.
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.
I'll take a look at it. Just for FYI my Model code behind looks as follows:
using
System;
System.Collections.Generic;
System.Text;
System.Windows;
System.Windows.Controls;
System.Windows.Data;
System.Windows.Documents;
System.Windows.Input;
System.Windows.Media;
System.Windows.Media.Imaging;
System.Windows.Shapes;
System.ComponentModel;
System.Collections.ObjectModel;
namespace
SmartGrid.Models
{
Add(
new PowerDataPoint(DateTime.Now, 2305.1));
new PowerDataPoint(DateTime.Now.AddMinutes(15), 2335.1));
new PowerDataPoint(DateTime.Now.AddMinutes(30), 2373.1));
new PowerDataPoint(DateTime.Now.AddMinutes(45), 2435.1));
new PowerDataPoint(DateTime.Now.AddMinutes(60), 2483.1));
new PowerDataPoint(DateTime.Now.AddMinutes(75), 2515.1));
new PowerDataPoint(DateTime.Now.AddMinutes(90), 2651.1));
new PowerDataPoint(DateTime.Now.AddMinutes(105), 3005.1));
new PowerDataPoint(DateTime.Now.AddMinutes(120), 3219.1));
new PowerDataPoint(DateTime.Now.AddMinutes(135), 3298.1));
new PowerDataPoint(DateTime.Now.AddMinutes(150), 3392.4));
new PowerDataPoint(DateTime.Now.AddMinutes(165), 3429.2));
new PowerDataPoint(DateTime.Now.AddMinutes(180), 3430.2));
new PowerDataPoint(DateTime.Now.AddMinutes(195), 3429.6));
new PowerDataPoint(DateTime.Now.AddMinutes(210), 3395.7));
new PowerDataPoint(DateTime.Now.AddMinutes(225), 3295.1));
new PowerDataPoint(DateTime.Now.AddMinutes(240), 2936.4));
new PowerDataPoint(DateTime.Now.AddMinutes(255), 2729.6));
new PowerDataPoint(DateTime.Now.AddMinutes(270), 2611.9));
new PowerDataPoint(DateTime.Now.AddMinutes(285), 2435.0));
}
Hmm... I may need to see your code behind and data source to point out what is wrong then. Watch out for any misspellings or case differences in your bindings or property names. Here is a working sample based on your xaml.
The Xaml:
<UserControl.Resources> <local:PowerPerHourDataSource x:Key="PowerPerHourDataSource" /> </UserControl.Resources> <Grid x:Name="LayoutRoot"> <igChart:XamWebChart Margin="0,0,0,0" DataContext="{Binding Source={StaticResource PowerPerHourDataSource}, Path=PowerPerHour}"> <igChart:XamWebChart.Series> <igChart:Series ChartType="ScatterLine" DataMapping="ValueX = Timestamp; ValueY = AmountOfPower" DataSource="{Binding}" Label="Power Per Hour"> </igChart:Series> </igChart:XamWebChart.Series> </igChart:XamWebChart> </Grid>
And the code behind:
public class PowerDataPoint { public DateTime Timestamp { get; set; } public double AmountOfPower { get; set; } } public class PowerPerHourDataSource { public ObservableCollection<PowerDataPoint> PowerPerHour { get; set; } public PowerPerHourDataSource() { PowerPerHour = new ObservableCollection<PowerDataPoint>() { new PowerDataPoint() { Timestamp = DateTime.Now.AddHours(-6), AmountOfPower = 5.0 }, new PowerDataPoint() { Timestamp = DateTime.Now.AddHours(-5), AmountOfPower = 6.0 }, new PowerDataPoint() { Timestamp = DateTime.Now.AddHours(-4), AmountOfPower = 7.0 }, new PowerDataPoint() { Timestamp = DateTime.Now.AddHours(-3), AmountOfPower = 8.0 }, new PowerDataPoint() { Timestamp = DateTime.Now.AddHours(-2), AmountOfPower = 9.0 }, }; } }
If you examine how this sample is different from your code it should hopefully help you find the issue.-Graham
I made the change, but it still gives me the same error/warning message.