Tag: histogram | SciChart

Questions

1 vote

6k views

WPF Position LabelProvider TickProvider histogram offset

I am using the 2D Heatmap with text as my working prototype. I wish to have a secondary Axis on the opposite side of my man Axis that displays a count for that row or column. To display this information is simple enough through using the LabelProvider (although two lines maybe a bit tricky), and I can do some stuff with the TickProvider when it gets a bit too busy.

My question is on how I can position these TickLabels to be in the center of a row/column?

My first thought was I could be cheeky and set the margin value to offset it in its style but it seems it only works so far with the TickLabel just displayed below the tick.

        <Style x:Key="LeftAxisLabelStyle" TargetType="s:NumericTickLabel">
                   <Setter Property="Margin" Value="0,0,0,-30"/>
        </Style>

enter image description here

What I am trying to achieve seems to be the default positioning for column charts, and histograms. I was wondering if there is a behind the scenes option or an override I’ve missed to set this?

Alternatively annotations maybe the way to go but I get the impression that this is more for on chart labels rather than for Axis?

p.s. I think when dealing with multiple Axes, you should give an warning/error if an “Id” is not given to secondary Axis as the graph will just show blank.

Matthew Bristow asked 5 years ago
last active 5 years ago

0 votes

2 answers

5k views

Rendering a Histogram

WPF WPF 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.

Dave Frey asked 5 years ago
last active 5 years ago