copyPasteGhost
asked on
Silverlight Sparkline chart not showing data easy one
Hello I am very new to sliverlight. I want to make a simple sparkline chart.
Here is the XAML.
<Grid Margin="0,0,0,0" Height="32" Width="78">
<toolkit:Chart Width="75" Height="28" Margin="0,0,0,0" Name="TotalChart">
<toolkit:Chart.Series>
<toolkit:LineSeries IndependentValueBinding="{ Binding Date}" DependentValueBinding="{Bi nding TotalValue}">
<toolkit:LineSeries.DataPo intStyle>
<Style TargetType="Control">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</toolkit:LineSeries.DataP ointStyle>
</toolkit:LineSeries>
</toolkit:Chart.Series>
<toolkit:Chart.Template>
<ControlTemplate TargetType="toolkit:Chart" >
<Grid x:Name="ChartArea">
<Grid x:Name="PlotArea" Background="LightGray">
<Grid x:Name="GridLinesContainer " />
<Grid x:Name="SeriesContainer" />
</Grid>
</Grid>
</ControlTemplate>
</toolkit:Chart.Template>
<toolkit:Chart.Axes>
<toolkit:DateTimeAxis Orientation="X" MaxHeight="1" Opacity="0" Minimum="2010/01/01" Maximum="2010/02/08"/>
<toolkit:LinearAxis Orientation="Y" MaxWidth="1" Opacity="0" Minimum="0" Maximum="1500"/>
</toolkit:Chart.Axes>
</toolkit:Chart>
</Grid>
Here is the .CS
public partial class SmallLineGraph : UserControl {
public SmallLineGraph() {
InitializeComponent();
List<DataStuff> oTest = new List<DataStuff>();
oTest.Add(new DataStuff { Date = new DateTime(2010, 1, 1), TotalValue = 100 });
oTest.Add(new DataStuff { Date = new DateTime(2010, 1, 2), TotalValue = 120 });
oTest.Add(new DataStuff { Date = new DateTime(2010, 1, 3), TotalValue = 200 });
oTest.Add(new DataStuff { Date = new DateTime(2010, 1, 4), TotalValue = 224 });
oTest.Add(new DataStuff { Date = new DateTime(2010, 1, 5), TotalValue = 500 });
oTest.Add(new DataStuff { Date = new DateTime(2010, 2, 1), TotalValue = 1000 });
TotalChart.DataContext = oTest;
}
}
public class DataStuff {
public DateTime Date { get; set; }
public decimal TotalValue { get; set; }
}
right now the chart comes up empty. Any ideas?
thanks
CPG
Here is the XAML.
<Grid Margin="0,0,0,0" Height="32" Width="78">
<toolkit:Chart Width="75" Height="28" Margin="0,0,0,0" Name="TotalChart">
<toolkit:Chart.Series>
<toolkit:LineSeries IndependentValueBinding="{
<toolkit:LineSeries.DataPo
<Style TargetType="Control">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</toolkit:LineSeries.DataP
</toolkit:LineSeries>
</toolkit:Chart.Series>
<toolkit:Chart.Template>
<ControlTemplate TargetType="toolkit:Chart"
<Grid x:Name="ChartArea">
<Grid x:Name="PlotArea" Background="LightGray">
<Grid x:Name="GridLinesContainer
<Grid x:Name="SeriesContainer" />
</Grid>
</Grid>
</ControlTemplate>
</toolkit:Chart.Template>
<toolkit:Chart.Axes>
<toolkit:DateTimeAxis Orientation="X" MaxHeight="1" Opacity="0" Minimum="2010/01/01" Maximum="2010/02/08"/>
<toolkit:LinearAxis Orientation="Y" MaxWidth="1" Opacity="0" Minimum="0" Maximum="1500"/>
</toolkit:Chart.Axes>
</toolkit:Chart>
</Grid>
Here is the .CS
public partial class SmallLineGraph : UserControl {
public SmallLineGraph() {
InitializeComponent();
List<DataStuff> oTest = new List<DataStuff>();
oTest.Add(new DataStuff { Date = new DateTime(2010, 1, 1), TotalValue = 100 });
oTest.Add(new DataStuff { Date = new DateTime(2010, 1, 2), TotalValue = 120 });
oTest.Add(new DataStuff { Date = new DateTime(2010, 1, 3), TotalValue = 200 });
oTest.Add(new DataStuff { Date = new DateTime(2010, 1, 4), TotalValue = 224 });
oTest.Add(new DataStuff { Date = new DateTime(2010, 1, 5), TotalValue = 500 });
oTest.Add(new DataStuff { Date = new DateTime(2010, 2, 1), TotalValue = 1000 });
TotalChart.DataContext = oTest;
}
}
public class DataStuff {
public DateTime Date { get; set; }
public decimal TotalValue { get; set; }
}
right now the chart comes up empty. Any ideas?
thanks
CPG
http://www.webresourcesdepot.com/category/goodies/charts/page/4/
ASKER
I'm really looking for a silverlight solution...
Thanks though.
Thanks though.
I can't see anything wrong with the code-behind - I slipped it into a WPF project and it populated a ListBox without a hassle.
The only difference was that I set the DataContext for the whole Window:
this.DataContext = oTest;
I'm not familiar with the Chart control - what is the idea of Opacity="0" on the axis (DateTimeAxis etc.)? Wouldn't that render the axis as transparent?
The only difference was that I set the DataContext for the whole Window:
this.DataContext = oTest;
I'm not familiar with the Chart control - what is the idea of Opacity="0" on the axis (DateTimeAxis etc.)? Wouldn't that render the axis as transparent?
ASKER
yes I really just want to see the lines.
Attached is what I'm trying to achieve.
CPG
SparklineSample.png
Attached is what I'm trying to achieve.
CPG
SparklineSample.png
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I found that same example and went with that. Thanks for the help