WPF ColorGrid DataBinding

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Christopher
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

Re: WPF ColorGrid DataBinding

Post by Christopher » Wed Apr 28, 2021 8:36 am

Hello,
jfrtx wrote:
Tue Apr 27, 2021 5:54 pm
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
Screenshot from 2021-04-28 10-30-39.png (98.56 KiB) Viewed 19501 times
Adding your data in at runtime:
Screenshot from 2021-04-28 10-31-05.png
Screenshot from 2021-04-28 10-31-05.png (26.57 KiB) Viewed 19501 times
Gives us the following:
Screenshot from 2021-04-28 10-29-45.png
Screenshot from 2021-04-28 10-29-45.png (49.88 KiB) Viewed 19501 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
Screenshot from 2021-04-28 10-26-19.png (39.74 KiB) Viewed 19501 times
To give you:
Screenshot from 2021-04-28 10-25-06.png
Screenshot from 2021-04-28 10-25-06.png (114.99 KiB) Viewed 19501 times
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

jfrtx
Newbie
Newbie
Posts: 16
Joined: Wed Jul 01, 2020 12:00 am

Re: WPF ColorGrid DataBinding

Post by jfrtx » Thu Apr 29, 2021 3:02 pm

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
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

Re: WPF ColorGrid DataBinding

Post by Christopher » Fri Apr 30, 2021 10:59 am

Hello,
Christopher wrote:
Wed Apr 28, 2021 8:36 am
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
Screenshot 2021-04-30 124313.png (57.18 KiB) Viewed 19482 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.
Christopher wrote:
Wed Apr 28, 2021 8:36 am
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.
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

jfrtx
Newbie
Newbie
Posts: 16
Joined: Wed Jul 01, 2020 12:00 am

Re: WPF ColorGrid DataBinding

Post by jfrtx » Sun May 02, 2021 12:07 am

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
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

Re: WPF ColorGrid DataBinding

Post by Christopher » Mon May 03, 2021 9:27 am

Hello,

You're welcome!
jfrtx wrote:
Sun May 02, 2021 12:07 am
"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
Screenshot 2021-05-03 111349.png (121.66 KiB) Viewed 19399 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
Screenshot 2021-05-03 111211.png (47.28 KiB) Viewed 19399 times
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

jfrtx
Newbie
Newbie
Posts: 16
Joined: Wed Jul 01, 2020 12:00 am

Re: WPF ColorGrid DataBinding

Post by jfrtx » Mon May 03, 2021 3:03 pm

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
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

Re: WPF ColorGrid DataBinding

Post by Christopher » Mon May 03, 2021 3:32 pm

jfrtx wrote:
Mon May 03, 2021 3:03 pm
I am still having problems. Can you attach your source code or post to github?
Of course. This project should be okay.
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

jfrtx
Newbie
Newbie
Posts: 16
Joined: Wed Jul 01, 2020 12:00 am

Re: WPF ColorGrid DataBinding

Post by jfrtx » Mon May 03, 2021 11:56 pm

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
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

Re: WPF ColorGrid DataBinding

Post by Christopher » Tue May 04, 2021 9:58 am

Hello,
jfrtx wrote:
Mon May 03, 2021 11:56 pm
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
Screenshot from 2021-05-04 11-56-30.png (109.17 KiB) Viewed 19380 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.
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

jfrtx
Newbie
Newbie
Posts: 16
Joined: Wed Jul 01, 2020 12:00 am

Re: WPF ColorGrid DataBinding

Post by jfrtx » Tue May 04, 2021 5:39 pm

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
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

Re: WPF ColorGrid DataBinding

Post by Christopher » Tue May 04, 2021 6:19 pm

jfrtx wrote:
Tue May 04, 2021 5:39 pm
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
Screenshot from 2021-05-04 20-14-48.png (51.83 KiB) Viewed 19364 times
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

jfrtx
Newbie
Newbie
Posts: 16
Joined: Wed Jul 01, 2020 12:00 am

Re: WPF ColorGrid DataBinding

Post by jfrtx » Thu May 06, 2021 8:42 pm

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)
Attachments
Capture.JPG
Capture.JPG (23.55 KiB) Viewed 19320 times

Christopher
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

Re: WPF ColorGrid DataBinding

Post by Christopher » Fri May 07, 2021 9:36 am

Hello,
jfrtx wrote:
Thu May 06, 2021 8:42 pm
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.
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

jfrtx
Newbie
Newbie
Posts: 16
Joined: Wed Jul 01, 2020 12:00 am

Re: WPF ColorGrid DataBinding

Post by jfrtx » Fri May 07, 2021 2:01 pm

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
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

Re: WPF ColorGrid DataBinding

Post by Christopher » Fri May 07, 2021 2:20 pm

Hello,
Christopher wrote:
Fri May 07, 2021 9:36 am
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.
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

Post Reply