Tag: histogram

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.