Charts are not Updating Properly

[mos]

Hi, we are currently having an issue with the HighCharts, we are using Delphi XE2 environment and are using THTMLFrameCharts

Please note as well, I've tried using both our existing and latest highcharts code.

Initially, after logging in and initial page is the Charts, once a data has been put in, the specific data in the charts will update, so only the related bar or point will move.
When switching to a different frame, a different view which are chosen from a treemenu, then coming back to the Charts, and a data will come in, the charts will not update anymore.
And even tested it out by directly executing JS code in the browser's console, still nothing.

Below is the setData code being used, and are added via JS (UniSession.AddJS()), which is also the same code executed in the console:
Highcharts.charts[0].series[0].setData([{name:"101",y:4,drilldown:"DrillDown_101"},{name:"102",y:9,drilldown:"DrillDown_102"},{name:"103",y:4,drilldown:"DrillDown_103"},{name:"104",y:4,drilldown:"DrillDown_104"}]);
Highcharts.charts[0].options.drilldown.series.push({type: "bar",name: "101",color: "#ef6986",id: "DrillDown_101",showInLegend: true,dataLabels:{enabled: true, format: "{point.y}"},tooltip:{animation: true, enabled: true, hideDelay: 500, pointFormat: "{point.y}"},data:[["In",2],["Out",2]]});
Highcharts.charts[0].options.drilldown.series.push({type: "bar",name: "102",color: "#ef6986",id: "DrillDown_102",showInLegend: true,dataLabels:{enabled: true, format: "{point.y}"},tooltip:{animation: true, enabled: true, hideDelay: 500, pointFormat: "{point.y}"},data:[["In",3],["Out",6]]});
Highcharts.charts[0].options.drilldown.series.push({type: "bar",name: "103",color: "#ef6986",id: "DrillDown_103",showInLegend: true,dataLabels:{enabled: true, format: "{point.y}"},tooltip:{animation: true, enabled: true, hideDelay: 500, pointFormat: "{point.y}"},data:[["In",0],["Out",4]]});
Highcharts.charts[0].options.drilldown.series.push({type: "bar",name: "104",color: "#ef6986",id: "DrillDown_104",showInLegend: true,dataLabels:{enabled: true, format: "{point.y}"},tooltip:{animation: true, enabled: true, hideDelay: 500, pointFormat: "{point.y}"},data:[["In",0],["Out",4]]});

And here is a screenshot of the code executed in the console but nothing happened with the charts:

Would appreciate all the help we can get.

Thanks

[mos]

I have created a demo program that replicates the issue that we have.

demo.rar

[Sherzod]

3 hours ago, mos said:

demo.rar 7.22 MB · 3 downloads

[mos]

17 hours ago, Sherzod said:

Hi,

Sorry about that, forgot to add a file.

Attached is a fixed version

demo.rar

[Sherzod]

4 hours ago, mos said:

Attached is a fixed version

Hello,

Which version of Delphi are you using?

[Sherzod]

Ok, you are using Delphi XE2. 

[Sherzod]

Seems LkJSON v1.07 does not compile with the latest Delphi versions.

[mos]

1 hour ago, Sherzod said:

Seems LkJSON v1.07 does not compile with the latest Delphi versions.

Just opted to remove LkJson and used DBCJson instead.

demo.rar

[mos]

Hi,

 

Our charts are now working well.

But there still remains the issue if we are gonna be working with charts with drilldown.

 

I've attached out demo program made in Delphi XE2.

demo.zip

[alfr]

I haven't looked on your sample, but I have a simlair object based on the uniCustomUrlFrame. For it to work properly, I can set my html first when the OnFrameLoaded event occur. If I set the HTML earlier, it looks ok, but seems some dependency is missing or not set, as the javascript (like a drilldown) is not kicked off/run. So for it to work well I therefore let the OnFrameLoaded event occur and in it set the HTML.text.

[mos]

On 5/26/2021 at 6:37 PM, alfr said:

I haven't looked on your sample, but I have a simlair object based on the uniCustomUrlFrame. For it to work properly, I can set my html first when the OnFrameLoaded event occur. If I set the HTML earlier, it looks ok, but seems some dependency is missing or not set, as the javascript (like a drilldown) is not kicked off/run. So for it to work well I therefore let the OnFrameLoaded event occur and in it set the HTML.text.

Hi, thanks for the suggestion, but could you give us more info on this? or maybe a sample?

thank you

[alfr]

To my understanding UniGui sets about:blank into the frame when created. So if the OnFrameLoaded event not had time to happen, before you set the HTML yourself, it seems that something about the frame is not initiated fully, so it wouldn't respond ok thereafter. To get around this - wait for the OnFrameLoaded event to occur first - and then set your HTML. 

Below an example. tempHTML is my wanted HTML. HTML is the HTML property within the TChart.  

 

procedure TChart.OnFrameLoaded(Sender: TObject);
begin
    if (tempHTML.Text<>'') and (HTML.Text<>tempHTML.Text) then
    begin
    	HTML.Text:=tempHTML.Text;
    	tempHTML.clear;
    end;
end;

 

[mos]

Thanks alfr.

 

But to be a bit more specific with the issue we have on hand, here is what we have.

> The charts have drilldown values
> Updating the charts when they are not in drilldown is perfectly working

The issue is, when updating the charts while on drilldown, that's the problem.

When passing this command directly in the web browser's console, it's working perfectly fine

chart = $('#containerO3B6').highcharts();
if(chart.drillUpButton != undefined){chart.drillUpButton.element.onclick();}

Now, when the exact same command is passed by Delphi using the following code

sJSCommand := 'chart = $(' + QuotedStr('#container' + JSName) + ').highcharts();';
JSInterface.JSCode(sJSCommand);
if fDrillDown then
begin
  try
    sJSCommand := 'if(chart.drillUpButton != undefined){chart.drillUpButton.element.onclick();}';
    JSInterface.JSCode(sJSCommand);
  except
    Log('DrillUp Exception - ' + E.Message);
  end;
end;

The error doesn't show in the browser, but when checking the debug logs created, an exception is caught

DrillUp Exception - Config Option: O3B6->if(chart.drillUpButton != undefined){chart.drillUpButton.element.onclick();}<br/>is refering a previous request,<br/>it's not allowed in AJAX request or JS handler.<br/>Use equivalent Public Property or Method instead.

 

If anyone has any solution for this, it would be greatly appreciated.

 

Thank you

[alfr]

Your latest demo project still is not possible to complie - problem with ulkJson. So sorry can't assist.

[mos]

All is good now, there's no more issue with the charts, just needed to switch from JSInterface.JSCode(sJSCommand); to UniSession.AddJS(sJSCommand);