Can the colour of the Donut pie be user-defined?

[MilanN]

Is it possible to assign colour to the different donut pie pieces based on a user-defined function? I am trying to use the donut chart to display temperature gradient and based on the Label field, I would like the colour of the piece be decided? Is there any function that could help me do that or can a user-defined function be written to set such a thing? If, so where can I find or write the function?
Please, guide.

[Yeray]

Hello Milan,

Yes, you can set a different color for each slice. Each slice has a value, a label and a color you can modify as you want. The exact syntax for it depends on the TeeChart version and development environment you are using. In .NET you could do something like:

Code: Select all

pie1.Colors[0] = Color.Red;

In VCL:

Code: Select all

Series1.ValueColor[0]:=clRed;

etc...
And of course you can have your function that returns a color, instead of assigning a color as I did in the examples above.

[MilanN]

Hello Yeray,

Thank you very much for your advice. I am now able to change the colour of each slice.

The project that I am working on requires me to display the temperatures obtained from the thermocouples placed along the circumference of a furnace. About 300 or more thermocouples are present along the circumference giving real-time values which have to be presented on an HMI dialog with varying colours for different temperatures. The problem is that the furnace is split into 3 levels and each of the levels has 300 such thermocouples. I was thinking of using donut chart as the donut hole can be increased and it would look like the circumference of the furnace. Could you suggest me some ideas, how I could display these 3 levels within one chart more effectively. Any suggestions?

Milan

[Yeray]

Hello Milan,

You could draw the three Donuts like in the demo at "All features\Welcome !\Chart styles\Standard\Pie\Multiple Pies". They, you'll have a value for each thermocouple (and probably all the values should be the same to look proportional), updating their colors when needed.
I think the Donut series would represent it well if the sensors are in the same distance to the center or if this distance isn't relevant. However, if you the position of the thermocouples should also be represented, you may need to use a TPointSeries or a TPoint3DSeries (or three).

[MilanN]

Hello Yaray,

Thank you very much for answering my queries.

I have been experimenting with the Donut chart for a while now. One of the observations I made is that, when I inserted multiple pies in the same tChart element, the 3rd donut onwards would automatically get placed besides the first one. Can the donuts be placed one over the other? I know that placing it in a Rectangle before drawing is an option, but can they be placed like concentric circles with the same axis and/or the same centre. Because when you place them in different rectangles and change the tChart.Aspect.Elevation to look at it at a different angle, you see them placed one beside the other.

Can you suggest anything for placing the donut charts concentrically ?

One more observation that I made was that, when two donut charts were placed in the same tChart then, changing the XRadius of one would change the XRadius of the other. Can the XRadius of the two donuts be set differently ?

As I mentioned before, I want to assign different colours to the slices depending on the temperature. So is there any function that would provide a color gradient which would calculate the RGB values depending on the value of the temperature. If not, do you have any ideas for doing this.

Milan

[Yeray]

Helo Milan,

I have been experimenting with the Donut chart for a while now. One of the observations I made is that, when I inserted multiple pies in the same tChart element, the 3rd donut onwards would automatically get placed besides the first one. Can the donuts be placed one over the other? I know that placing it in a Rectangle before drawing is an option, but can they be placed like concentric circles with the same axis and/or the same centre. Because when you place them in different rectangles and change the tChart.Aspect.Elevation to look at it at a different angle, you see them placed one beside the other.

Can you suggest anything for placing the donut charts concentrically ?

This can be done modifying the ChartRect in a similar way than in the "Multiple Pies" example mentioned before, but adjusting all the rects to have the same Left and Right positions but slightly different positions in Top and Bottom.

One more observation that I made was that, when two donut charts were placed in the same tChart then, changing the XRadius of one would change the XRadius of the other. Can the XRadius of the two donuts be set differently ?

This is by design. When one donut X or Y radius is modified, all the donuts are also modified to have the same proportions. I've added to the wish list the possibility to add a new property to control if you want all the donuts to have the same radius or not (TV52015814).

As I mentioned before, I want to assign different colours to the slices depending on the temperature. So is there any function that would provide a color gradient which would calculate the RGB values depending on the value of the temperature. If not, do you have any ideas for doing this.

You could use one of the TeeChart palettes or create your custom palette to do this. For example you could use the WarmPalette.
In the following example I've modified the sources for not to call the SetOtherCustomRadius function when a radius is modified. So the picture below is how it will look when [TV52015814] will be applied. Without this modification, the donuts have the same radius.
Is this something similar to what you are trying to achieve?

ConcentricDonuts.png (27.29 KiB) Viewed 62265 times

Code: Select all

uses TeCanvas;

procedure TForm1.FormCreate(Sender: TObject);
var nSeries, nValue: Integer;
    tmpColor: TColor;
begin
  Chart1.Title.Visible:=false;
  Chart1.Legend.Visible:=false;

  for nSeries:=0 to Chart1.SeriesCount-1 do
  with Chart1[nSeries] as TPieSeries do
  begin
    for nValue:=0 to 299 do
    begin
      tmpColor:=WarmPalette[nValue*(SeriesIndex+1) mod length(WarmPalette)];
      Add(1, '', tmpColor);
    end;

    CustomXRadius:=200-25*nSeries;
    CustomYRadius:=200-25*nSeries;
    Marks.Visible:=false;
    Shadow.Visible:=false;

    BeforeDrawValues:=SeriesBeforeDrawValues;
  end;
end;

procedure TForm1.SeriesBeforeDrawValues(Sender: TObject);
var SeriesIndex, verticalOffset: Integer;
    tmpRect: TRect;
begin
  for SeriesIndex:=0 to Chart1.SeriesCount-1 do
    if Sender=Chart1[SeriesIndex] then
    begin
      verticalOffset:=SeriesIndex*Chart1.Chart3DPercent;
      break;
    end;

  with Sender as TPieSeries do
  begin
    tmpRect.Left:=Round(Chart1.Width/2-CustomXRadius);
    tmpRect.Right:=Round(Chart1.Width/2+CustomXRadius);
    tmpRect.Top:=Round(Chart1.Height/2-CustomYRadius+Chart1.Chart3DPercent*Chart1.SeriesCount-verticalOffset);
    tmpRect.Bottom:=Round(Chart1.Height/2+CustomYRadius-verticalOffset);
  end;
  Chart1.ChartRect:=tmpRect;
end;

[MilanN]

Dear Yeray,

What I am trying to do is very much like what you interpreted. The only difference being that I am looking at making only 2 concentric donuts with different XRadius (one being smaller than the other) and 7 of the same arrangement in the same TChart or multiple TCharts, whichever looks more realistic. By realistic I mean, I am trying to make two extremely thin donut charts placed one inside the other so that it actually looks like an array of temperature sensors placed along the circumference of the furnace, one array inside and teh other outside. I did not totally understand how the colour palette can be used, I am using Tchart for .NET 2010 and working on Visual Studio 2010, how would I implement the Warm pallette in this environment. Could you guide with the instructions to be used. Also, how do I create a colour palette on my own?

By when will the new property [TV52015814] be added ? Can I do something so that the SetOtherCustomRadius is not called?

Thank You.

Milan

[Yeray]

Hello,

What I am trying to do is very much like what you interpreted. The only difference being that I am looking at making only 2 concentric donuts with different XRadius (one being smaller than the other) and 7 of the same arrangement in the same TChart or multiple TCharts, whichever looks more realistic. By realistic I mean, I am trying to make two extremely thin donut charts placed one inside the other so that it actually looks like an array of temperature sensors placed along the circumference of the furnace, one array inside and teh other outside.

Varying the ChartRect set in the BeforeDrawValues event you should be able to custom position and size your donuts where you wish. Looking at the simpler example in the features demo at "All features\Welcome !\Chart styles\Standard\Pie\Multiple Pies" you'll probably understand better how it works.

I did not totally understand how the colour palette can be used, I am using Tchart for .NET 2010 and working on Visual Studio 2010, how would I implement the Warm pallette in this environment. Could you guide with the instructions to be used. Also, how do I create a colour palette on my own?

A palette is just an array of colors. In the example I just used a color or another from the palette depending on the index of the value and the series.
You can see another simple example of the palettes and custom palettes usage at "All Features\Welcome !\Themes\Custom Palettes" in the features demo program.

Here it is the code above translated to C# and the result I get with TeeChart .NET (using the new property UniqueCustomRadius):

Chart1.png (176.16 KiB) Viewed 62195 times

Code: Select all

        private void InitializeChart()
        {
            int nSeries, nValue;
            Color tmpColor;

            tChart1.Header.Visible=false;
            tChart1.Legend.Visible=false;

            for (nSeries=0; nSeries<3; nSeries++)
            {
                Steema.TeeChart.Styles.Donut donut = new Steema.TeeChart.Styles.Donut(tChart1.Chart);
                
                for (nValue=0; nValue<300; nValue++)
                {
                    tmpColor = Steema.TeeChart.Themes.Theme.WarmPalette[nValue * (nSeries + 1) % Steema.TeeChart.Themes.Theme.WarmPalette.Length];
                    donut.Add(1, "", tmpColor);
                }

                donut.UniqueCustomRadius = false;  //new property
                donut.CustomXRadius = 200 - 25 * nSeries;
                donut.CustomYRadius = 200 - 25 * nSeries;
                donut.Marks.Visible = false;
                donut.Shadow.Visible = false;

                donut.BeforeDrawValues += new Steema.TeeChart.PaintChartEventHandler(pie_BeforeDrawValues);
            }
        }

        void pie_BeforeDrawValues(object sender, Steema.TeeChart.Drawing.Graphics3D g)
        {
            int SeriesIndex, verticalOffset;
            Rectangle tmpRect;

            verticalOffset = 0;
            for (SeriesIndex=0; SeriesIndex<tChart1.Series.Count; SeriesIndex++)
            {
                if (sender==tChart1[SeriesIndex])
                {
                    verticalOffset=SeriesIndex*tChart1.Aspect.Chart3DPercent;
                    break;
                }
            }

            Steema.TeeChart.Styles.Donut donut = sender as Steema.TeeChart.Styles.Donut;

            tmpRect = new Rectangle(tChart1.Width / 2 - donut.CustomXRadius,
                tChart1.Height / 2 - donut.CustomYRadius + tChart1.Aspect.Chart3DPercent * tChart1.Series.Count - verticalOffset - 30,
                donut.CustomXRadius * 2,
                donut.CustomYRadius * 2 - verticalOffset);
  
            tChart1.Chart.ChartRect=tmpRect;
        }

By when will the new property [TV52015814] be added ? Can I do something so that the SetOtherCustomRadius is not called?

A new property UniqueCustomRadius (true by default) will be available with the next maintenance release. Setting it to false, the SetOtherCustomRadius won't be called when setting CustomXRadius or CustomYRadius properties.