SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

1
0

I would like to create a level meter, maybe something like this:

http://www.howtoguides.co.uk/VU_meter.png

I assume a bar chart, but am looking for suggestions.
BTW, I just switched from OxyPlot to SciChart, what a difference! I am so impressed!

Thanks,
-Robert

  • You must to post comments
1
0

Hey Robert,

Super pleased you love SciChart! I would love to hear your experiences and thoughts if you email us.

Regarding the voltage meter / VU chart, well, knowing how to configure SciChart is Priceless… For everything else there’s Mastercard! đŸ˜‰

We managed to achieve it with the following code:

XAML

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication3"
        xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="100">
    <Grid>
        <Grid.Resources>
            <local:VuPaletteProvider x:Key="VuPaletteProvider"/>
        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="55"/>
            <ColumnDefinition Width="40"/>
        </Grid.ColumnDefinitions>

        <!-- Left channel -->
        <s:SciChartSurface BorderThickness="0" Padding="0,10">

            <s:SciChartSurface.RenderableSeries>
                <s:FastColumnRenderableSeries DataPointWidth="0.8" PaletteProvider="{StaticResource VuPaletteProvider}" x:Name="columnSeries0"/>
            </s:SciChartSurface.RenderableSeries>
            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisAlignment="Bottom" Visibility="Collapsed" DrawMajorBands="False" DrawMajorGridLines="False" DrawMajorTicks="False" DrawMinorTicks="False" DrawMinorGridLines="False"/>
            </s:SciChartSurface.YAxis>

            <s:SciChartSurface.XAxis>
                <s:NumericAxis AxisAlignment="Right" DrawMajorGridLines="False" DrawMinorGridLines="False" 
                               AutoRange="Never" VisibleRange="0,10" FlipCoordinates="True"/>
            </s:SciChartSurface.XAxis>
        </s:SciChartSurface>

        <!-- Right channel -->
        <s:SciChartSurface Grid.Column="1" BorderThickness="0" Padding="0,10">

            <s:SciChartSurface.RenderableSeries>
                <s:FastColumnRenderableSeries DataPointWidth="0.8" PaletteProvider="{StaticResource VuPaletteProvider}" x:Name="columnSeries1"/>
            </s:SciChartSurface.RenderableSeries>
            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisAlignment="Bottom" Visibility="Collapsed" DrawMajorBands="False" DrawMajorGridLines="False" DrawMajorTicks="False" DrawMinorTicks="False" DrawMinorGridLines="False"/>
            </s:SciChartSurface.YAxis>

            <s:SciChartSurface.XAxis>
                <s:NumericAxis AxisAlignment="Left" DrawMajorGridLines="False" DrawMinorGridLines="False" DrawLabels="False"
                               AutoRange="Never" VisibleRange="0,10" FlipCoordinates="True"/>
            </s:SciChartSurface.XAxis>
        </s:SciChartSurface>
    </Grid>
</Window>

Code Behind

using System.Windows;
using Abt.Controls.SciChart.Model.DataSeries;

namespace WpfApplication3
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.Loaded += (s, e) =>
            {
                // Here we define our data. 
                // Y-values (1,1,1,1,) are dummy data
                // The information is int he X value. Having X = 0,1,2,3 = VU at 3
                // having X = 0,1,2,3,4,5,6,7,8 = VU at 8 and in the red zone
                // Update the xyDataSeries by clearing / appending new data to get an animated effect
                var xyData = new XyDataSeries<int, int>();
                xyData.Append(new[] { 0,1,2,3,4,5,6,7,8}, new int[] { 1,1,1,1,1,1,1,1,1 });

                columnSeries0.DataSeries = xyData;
                columnSeries1.DataSeries = xyData;
            };
        }
    }
}

VuPaletteProvider

using System;
using System.Windows.Media;
using Abt.Controls.SciChart.Visuals.RenderableSeries;

namespace WpfApplication3
{
    // This is where we define colors for X-Values
    // If X is 0 to 3, return Green
    // If X is >3 and <7, return Amber
    // If X is > 7, return red
    public class VuPaletteProvider : IPaletteProvider
    {
        public Color? GetColor(IRenderableSeries series, double xValue, double yValue)
        {
            // Experiment here with your levels :) 
            return xValue < 3.0 ? Colors.Green : xValue < 7.0 ? Colors.Orange : Colors.Red;
        }

        public Color? OverrideColor(IRenderableSeries series, double xValue, double openValue, double highValue, double lowValue,
            double closeValue)
        {
            throw new NotImplementedException();
        }

        public Color? OverrideColor(IRenderableSeries series, double xValue, double yValue, double zValue)
        {
            throw new NotImplementedException();
        }
    }
}

Result

See attached image

Let me know if this helps!

Andrew

Images
  • You must to post comments
1
0

I have this so far: (Excuse the random garish colors)

enter image description here

Another issue, I have a frequency response plot:
enter image description here

For the response, I have a logarithmic x-axis, range 10 – 20,000.
I am missing the label at 20,000. How can I force that label?
Can I add x axis major grid lines at other x-values? A typical frequency response plot would have major grid lines at:
20, 50, 100, 200, 500, 1000, 2000, 5000, 10k, & 20k.

Thanks,
-Robert

  • Andrew
    Hi Robert, beautiful VU meter and frequency response! :)The 20,000 label isn't shown as there is no major gridline at 20,000. To get this to show, you will need to override the AxisBase.TickProvider (overrides tick generation).We have an article on how to do this here: http://support.scichart.com/index.php?/Knowledgebase/Article/View/17201/30/advanced-tick-frequency-overridingNote that TickProviders are dynamic and update the ticks as you zoom. What I suggest you do is take one of ours as a basis and simply call the base method but also include VisibleRange.Max at the end of the array of ticks calculated by our provider.The base class you want is LogarithmicNumericTickProvider.Hope this helps!! Andrew
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.