Highcharts Component

[Andriws Luna]

 

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:

 

PM me to contribute with this project.

Thanks.

 

[epos4u]

Thank you

 

[Sherzod]

Thank you for your contribution!

[delagoutte]

big thanks

[mehmet07]

thanks

[walterf3]

Nice!

[eduardosuruagy]

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:

 

PM me a contribuir com este projeto.

Obrigado.

 

Esses do cilindro como vc fez?

[sinanaydin]

perfect !

[Andriws Luna]

On 9/4/2019 at 9:14 AM, eduardosuruagy said:

Esses do cilindro como vc fez?

Fiz baseado neste: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-solid/

[mmurgas]

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

 

 

 

 

[Andriws Luna]

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

 

[alfr]

Thanks! 

(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';
 

[freedowsRoO]

On 2/18/2020 at 9:31 AM, Andriws Luna said:

Version 1.90.0.1508

 

Hello! You did an amazing work dude!!!! Thanks!!
 

I have a little question, can you post some example of the solid gauge to us? Thanks a lot!

[eduardosuruagy]

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:

 

PM me a contribuir com este projeto.

Obrigado.

 

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

[alfr]

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?

 

 

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;

[Andriws Luna]

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?

 

 

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.

[alfr]

Sure. Thanks for sharing and replying back to me! 

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!

[mos]

Hi,

  Does anyone know how I can do live chart series updating like this: Live Bar Chart Updating ?

   I need to be able to change the series data and have the chart update each time.  

[Sherzod]

Hi,

At least you can use UniTimer (carefully) for this.

[mos]

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? 

 

 

[Mohammad Nadzar]

how to change format date for X value ?
when type date, chart showing format integer ex. 45.174

please help, thanks