Cannot assign new Title to streams of a UniChart

[Sherzod]

@Woutero

Sorry I couldn't help you migrate your code from Delphi.

But if this is acceptable for you, I will try to give you a temporary solution using a client side function.

[Sherzod]

@Woutero

Another approach:

1. UniChart1.ClientEvents.ExtEvents ->

function afterrender(sender, eOpts)
{
    sender._setTitle = function() {
        var argsArray = Array.from(arguments);
        sender.chart.series[0].setTitle(argsArray);
    }
}

2. Usage:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  //Suppose we have two UniBarSeries: Series3 and Series6

  Series6.Title := 'New title';
  UniChart3.JSInterface.JSCall('_setTitle', [Series3.Title, Series6.Title]);
end;

 

[Woutero]

Sherzod
Thanks, I will try the method above and report back.
I was able to make some progress on the C++ code.
The following C++ code for SetTitle compile under C++ Builder 10.4.

void __fastcall TMainForm::SetTitle(TUniBarSeries *AUniSeries, UnicodeString ATitle)
{
  int I;
  UnicodeString Titles = "";

  if ((ATitle != "")  && (AUniSeries->Title != ATitle))
  {
    AUniSeries->Title = ATitle;
    for (I=0; I<AUniSeries->Parent->SeriesList->Count; I++)
    {
       TUniBarSeries *BarSeries = new TUniBarSeries(AUniSeries->Parent);
       BarSeries = (TUniBarSeries *) AUniSeries->Parent->SeriesList->Series[I];
       Titles = Titles + "\"" + BarSeries->Title + "\",";
    }

      Titles = RemoveTrailingChar(Titles, ',');

      // Up until here Titles agree with running in Delphi, yet series Titles are not updated on chart when the next line is executed
      AUniSeries->Parent->JSInterface->JSCall((UnicodeString)L"chart.series[0].setTitle",ARRAYOFCONST((Titles)));
  }

}

In debug mode, it generates exactly the same output in Titles when compared to running in Delphi.
Yet, the labels are not updated on the chart.
So we now only have one line of Delphi code that we need to get a working C++ translation.

DELPHI:

with AUniBarSeries.Parent.JSInterface do
      JSCall('chart.series[0].setTitle', [JSArray(Titles)]);

C++:
 AUniSeries->Parent->JSInterface->JSCall((UnicodeString)L"chart.series[0].setTitle",ARRAYOFCONST((Titles)));
 

[Woutero]

4 hours ago, Sherzod said:

 

1. UniChart1.ClientEvents.ExtEvents ->

function afterrender(sender, eOpts)
{
    sender._setTitle = function() {
        var argsArray = Array.from(arguments);
        sender.chart.series[0].setTitle(argsArray);
    }
}

Sherzod

When I use this code, it just hangs at startup of http://localhost:8077/

Do we use the ExtEvents script as is?

[Sherzod]

@Woutero

What error are you seeing in the browser console?

[Woutero]

Uncaught SyntaxError: Unexpected token ')'

[Woutero]

Sherzod

Good news, success!
I had some time to double check everything.
There was a } character missing in the afterrender event, causing the freeze.
Finally I was able to display 3 new titles for a UniBarSeries using the C++ code

 UnicodeString TestStr1, TestStr2, TestStr3;
 TestStr1 = "Test1";
 TestStr2 = "Test2";
 TestStr3 = "Test3";

  UniChart3->JSInterface->JSCall("_setTitle", ARRAYOFCONST((TestStr1,TestStr2,TestStr3)));

No need for using SetTitle().

Thank so much, you're a genius!

[Sherzod]

Very good!

Thanks.

[Woutero]

Sherzod
Your solution for the Titles is working like a charm,  thanks.
But how can I set the Stacked property of a UniBarSeries via the SeriesList?
In other words if Series[0], Series[1] and Series[2] are all UniBarSeries, I want to do:

UniChart1->SeriesList->Series[0]->Stacked = false;
UniChart1->SeriesList->Series[1]->Stacked = false;
UniChart1->SeriesList->Series[2]->Stacked = false;
 

[Woutero]

Sherzod

I was able to set the Stacked property for the underlying UniBarSeries using the following C++ procedure:

void __fastcall TForm1::SetStacked(TUniChartSeries *AUniSeries, bool IsStacked)
{
  int I;

    for (I=0; I<AUniSeries->Parent->SeriesList->Count; I++)
    {
       TUniBarSeries *BarSeries = new TUniBarSeries(AUniSeries->Parent);
       BarSeries = (TUniBarSeries *) AUniSeries->Parent->SeriesList->Series[I];
       BarSeries->Stacked = IsStacked;
    }
}

But, the actual charts are not updated. So we are sitting with a similar problem as with Titles. I assume we will have to use an afterrender event to update the Stacked property of the UniBarSeries on the Chart?  But how?

[Sherzod]

Hello, 

Try to use chart.redraw() on the client side. 

[Woutero]

As in  JSInterface.JSCall('chart.redraw', []);

Or within a Event?

[Sherzod]

2 minutes ago, Woutero said:

UniChart1.JSInterface.JSCall('chart.redraw', []);

Yes, try...

[Woutero]

Sherzod

No unfortunately it does not work. Even when I use UniBarSeries1->Stacked = true;  UniBarSeries2->Stacked = true; UniBarSeries3->Stacked = true;

it does not work.

Only the original Stacked setting as per the UniBarSeries on the UniChart at design time is used. If I change the Stacked property at runtime, the UniChart does not use the new setting.

Remember, I also cannot create Series dynamically in C++, I can only create Series upfront on the UniChart via design.

Is there any way how one can set the Stacked setting during run time via JavaScript?

 

[Sherzod]

Hi,

Do you have all series Stacked = False in designtime?

[Sherzod]

16 minutes ago, Woutero said:

Is there any way how one can set the Stacked setting during run time via JavaScript?

Try this approach:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  UniChart1.JSInterface.JSCall('chart.series[0].setStacked', [False]); //True
  UniChart1.JSInterface.JSCallDefer('chart.redraw', [], 10);
end;

 

[Woutero]

Sherzod

C++:  bool tbool=False; 

UniChart1->JSInterface->JSCall("chart.series[0].setStacked", ((tbool)));   

works, thanks so much!

[Woutero]

Sherzod

I need to change/increase the Bar width of bars in the series, at runtime.

 

In another thread you provided a solution to set the MaxBarWidth via the beforeInit event:

function chart.beforeInit(sender, config)
{
      config.series[0].marker = false;     
      
      config.series[0].renderer = function(a) {
          a.attr.maxBarWidth=10;
      };

 

But how can I set the BarWidth via a JSInterface.JSCall?

Similar to  UniChart1.JSInterface.JSCall('chart.series[0].setStacked', [False]);

[Sherzod]

Hello,

You can define a variable and change this variable also during runtime.

[Woutero]

Thanks. Can you please give an example, so that I can see the correct syntax?

[Woutero]

Sherzod
I get a 'Cannot read properties of undefined (reading '0')' error when I use the code:

UniChart1->ClientEvents->UniEvents:

function beforeInit(sender, config)
{
   config.series[0].renderer = function(a) {
          a.attr.maxBarWidth=50;
      };
}

[Sherzod]

4 hours ago, Woutero said:

function beforeInit(sender, config)

First of all, this is the wrong place.

 

5 hours ago, Woutero said:

Can you please give an example, so that I can see the correct syntax?

I'll try to analyze.

[Sherzod]

On 2/24/2024 at 11:03 AM, Woutero said:

But how can I set the BarWidth via a JSInterface.JSCall?

Hello,

I haven't found an easy way to do this.

When the chart size is smaller, barWidth will still not be taken into account.

What do you need this for?

[Woutero]

Sherzod

I simply want to make the chart looks better. Such narrow bars do not look right. Look at the same chart within VCL Delphi:

The bars in Delphi are much wider which is proportional to the chart as a whole.

[Sherzod]

17 minutes ago, Woutero said:

The bars in Delphi are much wider which is proportional to the chart as a whole.

Okay.

On 2/24/2024 at 12:00 PM, Woutero said:

config.series[0].renderer = function(a) {
          a.attr.maxBarWidth=50;
      };

Then just set a large number, for example 1000 instead of 50.