Interactive Data display in c#

Question

I have some csv files that I try to read and then divide them in two columns or list and plot them in a mathematical chart. The csv files contains two columns, one for voltage and one for time. I read the csv files and use Interactive Data display

using Microsoft.Win32;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Windows;
using System.Windows.Controls;


namespace TWord.Pages
{
    /// <summary>
    /// Interaction logic for Pico.xaml
    /// </summary>
    public partial class Pico : Page
    {
        /// <summary>
        ///  Members
        /// </summary>
        int numEvent;
        StreamReader myCSVStream;
        int currentSlide;
        ListOfList<double> AllEventsList;


        /// <summary>
        /// Constructor
        /// </summary>
        public Pico()
        {
            InitializeComponent();
        }

        #region Button Event
        /// <summary>
        /// Implement the button function to read the csv files.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btnCSV_Browser_Click(object sender, RoutedEventArgs e)
        {
            // Creates a null stream

            OpenFileDialog openFileDialog = new OpenFileDialog();

            openFileDialog.Multiselect = openFileDialog.RestoreDirectory = true;

            // Initial directory to open to
            openFileDialog.InitialDirectory = Environment.GetFolderPath(Environment.SpecialFolder.Desktop);

            // only open the csv files
            openFileDialog.Filter = "csv files (*.csv)|*.csv|All files (*.*)|*.*";

            // Applying filter index
            openFileDialog.FilterIndex = 2;

            // Create a new instance of list of lists and
            // run the ReadCSV for each of files.
            if (openFileDialog.ShowDialog() == true)
            {
                // Names of the files imported
                string[] filePath = openFileDialog.FileNames;

                // Path of the file
                numEvent = openFileDialog.FileNames.Length;

                AllEventsList = new ListOfList<double>();

                foreach (var address in filePath)
                {
                    ReadCSV(address);
                }
            }

            // only if thr browser had done the work
            //if (AllEventsList != null)
            //   DrawPlot(0);

        }


        #endregion

        #region Help Functions
        /// <summary>
        /// Help function to make graphs and reading the csv files.
        /// </summary>

        private void ReadCSV(string s)
        {

            string line;

            // new stream to read each line
            myCSVStream = new StreamReader(s);

            // one list for voltage
            List<double> voltage = new List<double>();

            // one list for time
            List<double> time = new List<double>();


            // reading whole csv file and split it into two columns
            while ((line = myCSVStream.ReadLine()) != null)
            {

                try
                {
                    string[] parm = line.Trim().Split(',');
                    voltage.Add(double.Parse(parm[0], CultureInfo.InvariantCulture));
                    time.Add(double.Parse(parm[1], CultureInfo.InvariantCulture));

                }
                catch { }
            }

            // add it to the list of lists.
            AllEventsList.Add(voltage);
            AllEventsList.Add(time);

            // Draw the first plot
            DrawPlot(0);
        }
        #endregion


        #region
        /// <summary>
        /// Drawing the plot for the CSVs
        /// </summary>
        private void DrawPlot(int i)
        {
            // Array for Voltage
            double[] voltage = AllEventsList[2 * i].ToArray();
            // Array for time
            double[] time = AllEventsList[2 * i + 1].ToArray();

            //plot to the linegraph
            linegraph.Plot(time,voltage,);
        }

        #endregion

    }
}

The XAML file to this is according to :

<GroupBox Grid.Row="1" Grid.Column="0" Header="Sampled points" Style="{StaticResource GroupboxStyle}" FontFamily="{StaticResource LatoThin}" Foreground="{StaticResource TercoTextBrush}">
    <d3:Chart BottomTitle="Time" LeftTitle="voltage" Margin="-10" Style="{DynamicResource ChartStyle}">
        <d3:LineGraph x:Name="linegraph" Description="Simple linegraph" Stroke="Blue" StrokeThickness="2" Margin="-19,0,0,-23"/>
    </d3:Chart>
</GroupBox>

The result is that the line itself sticks out of the graph grid. as image below: Ive been sitting here and tried to modify the style of the graph with no luck. Anyone had this problem? The reason I use Interactive Data display is that it is very simple to use. Just needs two arrays and you are done. If you have any better suggestions that is Free of charge I would be happy to know about it. but not Oxyplot . I couldn't make it work

Answer 1

Your margin for your LineGraph XAML markup is shifting the line.

Margin is specified as:

<object Margin="left,top,right,bottom"/>

So a margin of -19,0,0,-23 specifies a shift to a xaml element 19 units to the left and 23 units down. Which is what you are seeing.

Change:

<d3:LineGraph x:Name="linegraph" Margin="-19,0,0,-23" Description="Simple linegraph" Stroke="Blue" StrokeThickness="2" />

To:

<d3:LineGraph x:Name="linegraph" Margin="0" Description="Simple linegraph" Stroke="Blue" StrokeThickness="2" />