WPF ColorGrid DataBinding

[Christopher]

Hello,

I am not sure I understand your question. Are you asking if the code snippet I supplied for a change in the constructor compiles and runs?

No. What I mean is that using the latest NuGet package, we can create a WPF application that doesn't reference TeeChart.Xaml.WPF:

Screenshot from 2021-04-28 10-30-39.png (98.56 KiB) Viewed 34919 times

Adding your data in at runtime:

Screenshot from 2021-04-28 10-31-05.png (26.57 KiB) Viewed 34919 times

Gives us the following:

Screenshot from 2021-04-28 10-29-45.png (49.88 KiB) Viewed 34919 times

However, the TeeChart.Xaml.WPF assembly in the latest NuGet package does not contain the property IrregularGrid - we've added that in now, meaning that in a future version you will be able to do this:

Screenshot from 2021-04-28 10-26-19.png (39.74 KiB) Viewed 34919 times

To give you:

Screenshot from 2021-04-28 10-25-06.png (114.99 KiB) Viewed 34919 times

[jfrtx]

Thanks, I understand that setting colorgrid.IrregularGrid = true works. But, as you can see from the example, the data is regular except for numerical precision. It would be best that if the user sets IrregularGrid=false then ColorGrid should treat the data as regular and then find the stepsize. I am assuming that when IrregularGrid = true that teechart is doing some sort of interpolation and that there is a performance impact. In the example you can make a comparison by running the following two cases and look at performance when you resize the window.

Case 1:
colorgrid.IrregularGrid = true;
Data[k] = new Series3DData { X = x, Y = Math.Sin(k / (double)(nx * nz) * Math.PI * 2) * Height, Z = z };

Case 2:
colorgrid.IrregularGrid = false;
Data[k] = new Series3DData { X = i, Y = Math.Sin(k / (double)(nx * nz) * Math.PI * 2) * Height, Z = j };

Notice the changes in the two cases are:
x -> i
z -> j

Case 2 is much faster and responsive then Case 1

In addition, how can I remove the colorgrid gridlines in xaml?

[Christopher]

Hello,

Case 2 is much faster and responsive then Case 1

Yes, if you had access to the source code you would be able to see that this is expected. Please let me briefly explain. RegularGrid and IrregularGrid are somewhat of a misnomer, as it would be more precise to call these properties 'OneStepGrid' and 'GreaterThanOneStepGrid'. For speed optimization, for not having to perform calculations to determine the step - which depends on the difference in value between one value and another, whether this value is constant throughout the added data or whether this value increases or decreases by specific factors - 'RegularGrid' assumes that the (x,z) grid has a step of one ('1'), meaning no such calculations have to be performed. The idea is that you can use this optimization to speedily render 'GreaterThanOneStepGrids' by retrofitting the axes labels, e.g.

Code: Select all

        public MainWindow()
        {
            InitializeComponent();

            var labelsLeft = new Dictionary<int, string>();
            var labelsBottom = new Dictionary<int, string>();
            var series = new ColorGrid(tChart1.Chart)
            {
                IrregularGrid = false
            };

            int nx = 11;
            int nz = 21;
            double dx = 2.0 / (nx - 1);
            double dz = 2.0 / (nz - 1);

            int k = 0;
            for (int i = 0; i < nx; i++)
            {
                double x = -1.0 + i * dx;

                for (int j = 0; j < nz; j++)
                {
                    double z = -1.0 + j * dz;
                    //series.Add(x, Math.Sin(k / (double)(nx * nz) * Math.PI * 2) * Height, z);
                    series.Add(i, Math.Sin(k / (double)(nx * nz) * Math.PI * 2) * Height, j);


                    if (!labelsBottom.ContainsKey(i))
                    {
                        labelsBottom.Add(i, x.ToString());
                    }

                    if (!labelsLeft.ContainsKey(j))
                    {
                        labelsLeft.Add(j, z.ToString());
                    }
                    k++;
                }
            }

            foreach (var item in labelsBottom)
            {
                tChart1.Axes.Bottom.Labels.Items.Add(item.Key, item.Value);
            }

            foreach (var item in labelsLeft)
            {
                tChart1.Axes.Left.Labels.Items.Add(item.Key, item.Value);
            }
        } 

Which gives me this (a small bug in the present NuGet gives a slightly different result - this fix will be in the next NuGet):

Screenshot 2021-04-30 124313.png (57.18 KiB) Viewed 34900 times

However, this is more complex to achieve in Xaml, and would require Data binding to the Labels.Items property which is presently not available.

In addition, how can I remove the colorgrid gridlines in xaml?

The Pen properties of the Xaml Chart have yet to be implemented - I have added this to our issue tracker with id=2419.

[jfrtx]

Hi Christopher,

Thanks for all your helpful replies.

I am trying to implement your latest suggestions with reference to using a RegularGrid and setting tChart1.Axes.Bottom.Labels. To experiment I have followed your example in which you define the colorgrid in code behind. I can do this in .NET Framework but am having problems with .NET5. In my project I am using the Steema.TeeChart.NET50.WPF NuGet package. I have defined the TChart in xaml as "<teechart:TChart x:Name="tchart1">". However, I am having problems in the code behind when setting "var series = new ColorGrid(tchart1.Chart);". I get the following error:

"Error CS1061 'TChart' does not contain a definition for 'Chart' and no accessible extension method 'Chart' accepting a first argument of type 'TChart' could be found (are you missing a using directive or an assembly reference?)"

I am able to implement your suggestion only if I define the TChart in the code behind as:

Code: Select all

var tChart = new TChart();
contentControl.Content = tChart;
var series = new ColorGrid(tChart.Chart)
{
    IrregularGrid = false
};

[Christopher]

Hello,

You're welcome!

"Error CS1061 'TChart' does not contain a definition for 'Chart' and no accessible extension method 'Chart' accepting a first argument of type 'TChart' could be found (are you missing a using directive or an assembly reference?)"

Not sure about this one. Things seems to be fine when I do this at my end:

Screenshot 2021-05-03 111349.png (121.66 KiB) Viewed 34817 times

Using the following code:

Code: Select all

       public MainWindow()
        {
            InitializeComponent();

            TestChart(tChart1);
        }

        private void TestChart(TChart chart)
        {
            var labelsLeft = new Dictionary<int, string>();
            var labelsBottom = new Dictionary<int, string>();
            var series = new ColorGrid(chart.Chart)
            {
                IrregularGrid = false
            };

            int nx = 11;
            int nz = 21;
            double dx = 2.0 / (nx - 1);
            double dz = 2.0 / (nz - 1);

            int k = 0;
            for (int i = 0; i < nx; i++)
            {
                double x = -1.0 + i * dx;

                for (int j = 0; j < nz; j++)
                {
                    double z = -1.0 + j * dz;
                    //series.Add(x, Math.Sin(k / (double)(nx * nz) * Math.PI * 2) * Height, z);
                    series.Add(i, Math.Sin(k / (double)(nx * nz) * Math.PI * 2) * Height, j);


                    if (!labelsBottom.ContainsKey(i))
                    {
                        labelsBottom.Add(i, x.ToString("0.00"));
                    }

                    if (!labelsLeft.ContainsKey(j))
                    {
                        labelsLeft.Add(j, z.ToString("0.00"));
                    }
                    k++;
                }
            }

            foreach (var item in labelsBottom)
            {
                chart.Axes.Bottom.Labels.Items.Add(item.Key, item.Value);
            }

            foreach (var item in labelsLeft)
            {
                chart.Axes.Left.Labels.Items.Add(item.Key, item.Value);
            }
        }

Which gives me the expected result (with the defect I mentioned earlier):

Screenshot 2021-05-03 111211.png (47.28 KiB) Viewed 34817 times

[jfrtx]

I am still having problems. Can you attach your source code or post to github?

what is your xaml namespace "WPF" set to?

Code: Select all

xmlns:WPF="clr-namespace:TeeChart.Xaml.WPF;assembly=TeeChart.Xaml.WPF"

[Christopher]

I am still having problems. Can you attach your source code or post to github?

Of course. This project should be okay.

[jfrtx]

Christopher,

I noticed that your WPF namespace is:

Code: Select all

xmlns:WPF="clr-namespace:Steema.TeeChart.WPF;assembly=TeeChart.WPF"

whereas I am using

Code: Select all

xmlns:WPF="clr-namespace:TeeChart.Xaml.WPF;assembly=TeeChart.Xaml.WPF"

I guess this get's back to one of your earlier posts. For .NET5 WPF apps, should we use TeeChart.Xaml.WPF or TeeChart.WPF namespace in xaml? If we use TeeChart.WPF, is this then inconsistent with some of our earlier conversation related to defining a TChart and ColorGrid in xaml?

[Christopher]

Hello,

I guess this get's back to one of your earlier posts. For .NET5 WPF apps, should we use TeeChart.Xaml.WPF or TeeChart.WPF namespace in xaml? If we use TeeChart.WPF, is this then inconsistent with some of our earlier conversation related to defining a TChart and ColorGrid in xaml?

Yes, it's not immediately obvious what's going on here.

Essentially, TChart has two assemblies for WPF:

1. TeeChart.WPF.dll
2. TeeChart.Xaml.WPF.dll

The second of these is a wrapper of the first, and enables TChart's objects (Series, Axes, Titles etc.) to be edited at designtime in Xaml. The first of these - TeeChart.WPF.dll - can be placed in Xaml, but none of its objects can be edited at designtime in Xaml.

There is a place where these two meet - that is, it is possible to extract the wrapped TChart instance of the first assembly when using the second - and I have added an example of how to do this here (and here). When you now open the ColorGrid binding example, you will see that the Grid Pen is now white and with a greater width.

Screenshot from 2021-05-04 11-56-30.png (109.17 KiB) Viewed 34798 times

It is in this way, if you so wished, that you could run the 'retrofitted label' code that we've been discussing in this thread while using the TeeChart.Xaml.WPF.dll assembly.

[jfrtx]

The two namespaces are still confusing and I will review your examples. As a final question, How does one control the axis labels using your example from the 4/30 post where I am using a regularGrid and redefining the axis labels? For example, in the example you used, if you set

int nx = 101;
int nz = 201;

How can I get each axis to display major tick mark and labels with an increment of 0.2? I tried setting chart.Axes.Bottom.Increment = 0.2; but that did not work.

[Christopher]

How can I get each axis to display major tick mark and labels with an increment of 0.2? I tried setting chart.Axes.Bottom.Increment = 0.2; but that did not work.

No, because when we use Labels.Items for our labels, as in the 'retrofitting labels' code, TChart understands Axes labels as manually defined, so the automatic label properties such as Increment do not work.

Probably the easiest thing to do is to reduce the number of labels we collect in the dictionaries, i.e.

Code: Select all

      int nx = 101;
      int nz = 201;
      double dx = 2.0 / (nx - 1);
      double dz = 2.0 / (nz - 1);

      int k = 0;
      for (int i = 0; i < nx; i++)
      {
        double x = -1.0 + i * dx;

        for (int j = 0; j < nz; j++)
        {
          double z = -1.0 + j * dz;
          //series.Add(x, Math.Sin(k / (double)(nx * nz) * Math.PI * 2) * Height, z);
          series.Add(i, Math.Sin(k / (double)(nx * nz) * Math.PI * 2) * Height, j);

          if(i % 10 == 0)
          {
            if (!labelsBottom.ContainsKey(i))
            {
              labelsBottom.Add(i, x.ToString("0.0"));
            }
          }

          if(j % 20 == 0)
          {
            if (!labelsLeft.ContainsKey(j))
            {
              labelsLeft.Add(j, z.ToString("0.0"));
            }
          }
          k++;
        }
      }

Screenshot from 2021-05-04 20-14-48.png (51.83 KiB) Viewed 34782 times

[jfrtx]

Hi Christopher,

In the examples grid data we have been using you will notice that the y and z data is on a RegularGrid. It ends up being slightly irregular due to numerical rounding. It would be nice if ColorGrid would treat this as a RegularGrid, i.e. compute min, max, and step of x and z values and display the correct axis labels rather than the user having to retrofit labels in code. Also if the user specifies it as regularGrid then they only need to specify a vector of values for the axis rather than all the points for the 2D grid. Maybe my comments do not apply to the colorgrid since this can be a 3D dimension of shaded grid points. Maybe it would be best to define a new series called HeatMap which is an x-y plot with the data values in z being the map values. For example, HeatMap( double[] x, double[] y, double[,] data) x and y would be equally spaced data points. The legend would be a continuous color scale as shown in the attachment (This would be similar to the imagesc function in Matlab)

[Christopher]

Hello,

It ends up being slightly irregular due to numerical rounding.

We published new NuGets for TChart .NET Framework 4/.NET 5 yesterday which include a fix for the defect I've mentioned in this thread - can you still reproduce this rounding problem in this new version? If so, could you please paste in some code so we can reproduce it here?

I have added a feature request for a new Heat Map series to our issue tracker with id=2422.

[jfrtx]

The figure above is not from TeeChart, it was generated from Matlab. I was using it as an example for a continuous legend bar. The post was to ask for Steema to add a HeatMap series that has the following signature

Code: Select all

double Nx = 101;
double Ny = 201
double[] x = new double[Nx];
double[] y = new double[Ny];
double[,] data = new double[Ny,Nx];

//where x and y are uniformly spaced data.

HeatMap(double[] x, double[] y, double[,] data);

The HeatMap would be displayed with the legend as shown in the figure.

Sorry for the confusion, Does TeeChart have another series that already does this?

[Christopher]

Hello,

Does TeeChart have another series that already does this?

No. As I say, I've add a feature request for a Heat Map series into our issue tracker with id=2422.