Jump to content

Highcharts Component


Recommended Posts

 

Hello everyone!

A while ago I looked for a component or something that made it easy to use Highcharts in Unigui but I was unsuccessful.

So I decided to develop my own component to do this.

After 2 months of work is in a more stable version and decided to share with the community.

 

I remind you that Highcharts is free for personal use only.

 

Download from github: https://github.com/andriwsluna/Unigui-Components

With this component it is possible to generate a chart with only 6 lines of code. Follow :

EchoHightChart1.HighChartOptions.title.text.Value := 'Introduction';
EchoHightChart1.HighChartOptions.series.Datasource.DataSet := FDMemTable1;
EchoHightChart1.HighChartOptions.series.List.FieldNameForSerie := 'Operation';
EchoHightChart1.HighChartOptions.series.List.FieldNameForX  := 'month';
EchoHightChart1.HighChartOptions.series.List.FieldNameForY  := 'value';
EchoHightChart1.Load;

 

 

Note that there is a Datasource for data access.

See demo:

 

chart.png.8ed12fffd7f6ee8d61986cca9e6ed2be.png

chart.thumb.png.31aa5239c8c56e0a77a4ac0c88176546.png

PM me to contribute with this project.

Thanks.

 

  • Like 11
  • Upvote 1
Link to comment
Share on other sites

  • 2 weeks later...
On 21/08/2019 at 16:45, Andriws Luna said:

 

Olá a todos!

Há um tempo atrás, procurei um componente ou algo que facilitasse o uso do Highcharts no Unigui, mas não obtive êxito.

Então, decidi desenvolver meu próprio componente para fazer isso.

Após 2 meses de trabalho, está em uma versão mais estável e decidiu compartilhar com a comunidade.

 

Lembro que o Highcharts é gratuito apenas para uso pessoal.

 

Faça o download no github:  https://github.com/andriwsluna/Unigui-Components


EchoHightChart1.HighChartOptions.title.text.Value: = 'Introdução';
EchoHightChart1.HighChartOptions.series.Datasource.DataSet: = FDMemTable1;
EchoHightChart1.HighChartOptions.series.List.FieldNameForSerie: = 'Operação';
EchoHightChart1.HighChartOptions.series.List.FieldNameForX: = 'month';
EchoHightChart1.HighChartOptions.series.List.FieldNameForY: = 'value';
EchoHightChart1.Load;

 

 

Observe que existe uma fonte de dados para acesso a dados.

Veja a demonstração:

 

chart.png.8ed12fffd7f6ee8d61986cca9e6ed2be.png

chart.thumb.png.31aa5239c8c56e0a77a4ac0c88176546.png

PM me a contribuir com este projeto.

Obrigado.

 

Esses do cilindro como vc fez?

Link to comment
Share on other sites

  • 5 months later...
16 hours ago, mmurgas said:

Estimado Andriws, que version de Unigui se requiere para ejecutar. Me da error.

Gracias 

--------------------------------------------

 

Dear Andriws, what version of Unigui is required to run. It gives me an error.

Thank you

 

 

 

 

Version 1.90.0.1508

 

  • Like 1
Link to comment
Share on other sites

Thanks! :rolleyes:

(I had to change from 24 to 26 on the below in the package file as I'm using a newer version of Delphi.)

 

requires
  rtl,
  vcl,
  vclimg,
  dbrtl,
  soaprtl,
  FireDAC,
  FireDACCommonDriver,
  FireDACCommon,
  vcldb,
  uniGUI26,
  uniGUI26Core,
  uniTools26,
  uIndy26,

  bindengine,
  bindcomp;

contains
  uEchoHightChart in 'source\uEchoHightChart.pas';
 

  • Like 2
Link to comment
Share on other sites

  • 1 month later...
On 04/09/2019 at 09:14, eduardosuruagy said:

Esses cilindro como vc fez?

 

On 21/08/2019 at 16:45, Andriws Luna said:

 

Olá a todos!

Há um tempo atrás, procurei um componente ou algo que facilitasse o uso do Highcharts no Unigui, mas não obtive êxito.

Então, decidi desenvolver meu próprio componente para fazer isso.

Após 2 meses de trabalho, está em uma versão mais estável e decidiu compartilhar com a comunidade.

 

Lembro que o Highcharts é gratuito apenas para uso pessoal.

 

Faça o download no github:  https://github.com/andriwsluna/Unigui-Components


EchoHightChart1.HighChartOptions.title.text.Value: = 'Introdução';
EchoHightChart1.HighChartOptions.series.Datasource.DataSet: = FDMemTable1;
EchoHightChart1.HighChartOptions.series.List.FieldNameForSerie: = 'Operação';
EchoHightChart1.HighChartOptions.series.List.FieldNameForX: = 'month';
EchoHightChart1.HighChartOptions.series.List.FieldNameForY: = 'value';
EchoHightChart1.Load;

 

 

Observe que existe uma fonte de dados para acesso a dados.

Veja a demonstração:

 

chart.png.8ed12fffd7f6ee8d61986cca9e6ed2be.png

chart.thumb.png.31aa5239c8c56e0a77a4ac0c88176546.png

PM me a contribuir com este projeto.

Obrigado.

 

Is there an example of how we can use this cylinder graph?

Link to comment
Share on other sites

  • 2 months later...

Hi, 

I do get a lot of memory leak warnings in your component. I haven't used the generic RTTI-functions before either, which makes it more complicated to understand - but it seems not to work... 

Is this something you have looked at? You write that it is stable, but have you as well checked it for memory leaks?

 

image.thumb.png.c83a40cdaf38df7c820777f33cefcd48.png

 


procedure THighValue.FreeChilds;
VAR
     Contexto: TRttiContext;
     Classe: TRttiType;
     Field: TRttiField;
     obj: THighValue;
begin
     Classe:=Contexto.GetType(self.ClassType);
     for Field in Classe.GetDeclaredFields do
     BEGIN
          IF (Field.Visibility in [TMemberVisibility.mvPublic, TMemberVisibility.mvPublic]) THEN
          BEGIN

               if (Assigned(Field.FieldType.BaseType)) and (Field.FieldType.BaseType.Name = 'THighValue') then
               BEGIN
                    obj:=THighValue(Field.getValue(self).AsObject);
                    if Assigned(obj) then
                    BEGIN
                         obj.Free;
                    END;
               END;
          END;
     END;
end;

Link to comment
Share on other sites

On 6/24/2020 at 1:08 PM, alfr said:

Hi, 

I do get a lot of memory leak warnings in your component. I haven't used the generic RTTI-functions before either, which makes it more complicated to understand - but it seems not to work... 

Is this something you have looked at? You write that it is stable, but have you as well checked it for memory leaks?

 

image.thumb.png.c83a40cdaf38df7c820777f33cefcd48.png

 


procedure THighValue.FreeChilds;
VAR
     Contexto: TRttiContext;
     Classe: TRttiType;
     Field: TRttiField;
     obj: THighValue;
begin
     Classe:=Contexto.GetType(self.ClassType);
     for Field in Classe.GetDeclaredFields do
     BEGIN
          IF (Field.Visibility in [TMemberVisibility.mvPublic, TMemberVisibility.mvPublic]) THEN
          BEGIN

               if (Assigned(Field.FieldType.BaseType)) and (Field.FieldType.BaseType.Name = 'THighValue') then
               BEGIN
                    obj:=THighValue(Field.getValue(self).AsObject);
                    if Assigned(obj) then
                    BEGIN
                         obj.Free;
                    END;
               END;
          END;
     END;
end;

Hi!

Thank you for detecting this flaw in my code.

I mentioned that the component was "more stable" and not "completely stable", not least because the unigui (which is paid for) is not completely stable.

I developed this code on my own, without any help, so there are likely to be flaws. Then use it at your own risk.

Anyway, your comment helped me to find the problem and solve it. Please update your project from Git.

Link to comment
Share on other sites

Sure. Thanks for sharing and replying back to me! :rolleyes:

I've spend quite some time testing and working on the memory problems. Perhaps your goal was to handle this more dynamic?, but I've instead handle it more traditional. So I've added a lot of destructers on the various objects. Also to get around the reference count problem with the ChildList:TObjectlist<THighValue>  I've change it not to own its objects. So I believe all leaks now are fixed. (I don't get the memory leak dialog warning any longer.)

I've also done some other small changes. 

One thing that I found helpful working with HighChart is to have the x-values in Highchart date format and then just format the data labels as needed

function DateTimeToHighChartDateTime(d:TDateTime):int64;
begin
     Result:=DateTimeToUnix(D) * 1000;
end;
 

I as well have a need for reloading the Graph when the user change various things. As it takes some milliseconds for the urlFrame to load the temp data-file from the web server over internet, the object flicker some then. So to get around this, I have a procedure that handle this internally within unigui. So instead setting the HTML in the UrlFrame directly. This gives a more smoother and quicker appearence.

I attach the uEchoHightChart.pas - file if you're interested in reviewing any of it.

Thanks for your help!

  • Like 1
Link to comment
Share on other sites

  • 8 months later...

Hi Sherzod,

  What I need to do based on the HighCharts JFiddle example is to call: series.setData([y,  y*2, y+1, y/2]);

   I don't want to have to redraw the whole chart as the series data will be changing quite often.

   How can I do this in Delphi so that the chart just updates the series? 

 

 

Link to comment
Share on other sites

  • 2 years later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...