SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
I’m trying to render Histograms at runtime where the bins’ information like upper and lower bounds and width are known. However when I set the DataPointWidth to 0.2 for example, the bin spacing is different. Here is my code and XAML:
// We can create a histogram with evenly spaced bins
// by specifying the lower bound, the upper bound,
// and the number of bins:
var histogram = Histogram.CreateEmpty(values.Min(), values.Max(), numberOfBins);
double width = (values.Max() - values.Min()) / numberOfBins;
histogram.Tabulate(values);
foreach (var bin in histogram.BinsAndValues)
{
XyDataSeries<double, double> dataSeries = new XyDataSeries<double, double>();
dataSeries.Append(bin.Key.LowerBound, bin.Value);
pointList.Add(new ColumnRenderableSeriesViewModel() { DataSeries = dataSeries, StrokeThickness = 2, Stroke = Colors.Gray, Fill = Brushes.CornflowerBlue, DataPointWidth = 0.2 });
}
ChartData = new ObservableCollection<IRenderableSeriesViewModel>(pointList);
<Style x:Key="BaseColumnStyle" TargetType="s:FastColumnRenderableSeries">
<Setter Property="Opacity" Value="0.3"/>
<Setter Property="StrokeThickness" Value="2"/>
</Style>
<Style x:Key="BlueColumnStyle" BasedOn="{StaticResource BaseColumnStyle}" TargetType="s:FastColumnRenderableSeries">
<Setter Property="Fill" Value="CornflowerBlue"/>
</Style>
<!-- Define styles for the SciChartSurface -->
<Style x:Key="SciChartSurfaceStyle" TargetType="s:SciChartSurface">
<Setter Property="Background" Value="White"/>
<Setter Property="Padding" Value="20"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontFamily" Value="Arial Black"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
<!-- Define styles for the GridLinesPanel -->
<Style x:Key="GridLinesPanelStyle" TargetType="s:GridLinesPanel">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
</Style>
<!-- Using the LayoutTransform is much more apropriate in this point -->
<!-- the RenderTransform is used for demonstration purposes only, -->
<!-- for the compatibility with Silverlight reasons -->
<Style x:Key="AxisLabelStyle" TargetType="s:DefaultTickLabel">
<!--<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="-15"/>
</Setter.Value>
</Setter>-->
<Setter Property="Margin" Value="0"/>
</Style>
<!-- Define styles for the X and Y Axes -->
<Style x:Key="AxisStyle" TargetType="s:AxisBase">
<Setter Property="FontSize" Value="18"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="TitleFontSize" Value="12"/>
<Setter Property="TitleFontWeight" Value="Bold"/>
<Setter Property="TickTextBrush" Value="Black"/>
<Setter Property="DrawMajorBands" Value="False"/>
<Setter Property="DrawMinorGridLines" Value="False"/>
<Setter Property="DrawMinorTicks" Value="False" />
<Setter Property="DrawMajorTicks" Value="False"/>
<Setter Property="TickLabelStyle" Value="{StaticResource AxisLabelStyle}"/>
<Setter Property="MajorGridLineStyle">
<Setter.Value>
<Style TargetType="Line">
<Setter Property="Stroke" Value="LightGray"/>
<Setter Property="StrokeThickness" Value="1"/>
</Style>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<s:SciChartSurface x:Name="histogram" ChartTitle="{Binding ChartTitle}" RenderableSeries="{s:SeriesBinding ChartData}"
Style="{StaticResource SciChartSurfaceStyle}" GridLinesPanelStyle="{StaticResource GridLinesPanelStyle}">
<s:SciChartSurface.XAxis>
<s:NumericAxis AxisTitle="{Binding XAxisTitle}" Style="{StaticResource AxisStyle}" AutoRange="Always"/>
</s:SciChartSurface.XAxis>
<s:SciChartSurface.YAxis>
<s:NumericAxis AxisTitle="{Binding YAxisTitle}" AxisAlignment="Left" Style="{StaticResource AxisStyle}"/>
</s:SciChartSurface.YAxis>
</s:SciChartSurface>
</Grid>
How can I make the bin spacing the same independent of bin width? See my attachment of two different histograms with the DataPointWidth for each.
Hi Yuriy,
I would like to keep the DataPointWidth constant and have all the bins (columns) with minimal or no gap like the histogram on the right. Do I have to calculate that value based on the data I’m plotting?
Thanks,
Mark
Yuriy,
Your reply helped me find where I was making a mistake. I moved the line where I’m adding a ColumnRenderableSeriesViewModel to the XyDataSeries out the for loop.
Thanks,
Mark
Please login first to submit.