How to integrate the Highcharts unigui?

[Sistema Fenix]

Hello everybody!

 

I edited the post to let the solution I could with the help of Arvin.

Attached Project working.

 

 

 

Includes all the javascript uniservermodule.customfiles

files / Highcharts / highcharts.js

files / Highcharts / modules / exporting.js

files/jquery-1.10.2.min.js

 

 

 

Added a unihtmlframe.html with:

<div id="container" style="min-width: 310px; height: 400px; MARGIN: 0 auto"> </ div>

 

procedure TFGraficoDemo1.UniFrameCreate(Sender: TObject);
var
  js: TStringList;
begin
  inherited;
  try
    js := TStringList.Create;
    js.Add('Highcharts.setOptions( {');
    js.Add(' global : {');
    js.Add(' useUTC : false');
    js.Add(' }');
    js.Add('});');
    js.Add('var chart;');
    js.Add('$(document).ready(function() {');
    js.Add(' chart = new Highcharts.Chart({');
    js.Add(' chart: {');
    js.Add(' renderTo: ''container''');
    js.Add(' },');
    js.Add('    title: {');
    js.Add('      text: "Venda Mensal Produto",');
    js.Add('      x: -20 //center');
    js.Add('    },');
    js.Add('    subtitle: {');
    js.Add('      text: "Açúcar",');
    js.Add('      x: -20');
    js.Add('    },');
    js.Add('    xAxis: {');
    js.Add('      categories: ["Jan", "Feb", "Mar", "Abr", "Mai", "Jun",');
    js.Add('         "Jul", "Ago", "Set", "Out", "Nov", "Dez"]');
    js.Add('    },');
    js.Add('    yAxis: {');
    js.Add('      title: {');
    js.Add('          text: "Quantidade"');
    js.Add('      },');
    js.Add('      plotLines: [{');
    js.Add('          value: 0,');
    js.Add('          width: 1,');
    js.Add('          color: "#808080"');
    js.Add('      }]');
    js.Add('    },');
    js.Add('    tooltip: {');
    js.Add('      valueSuffix: "Qtde"');
    js.Add('    },');
    js.Add('    legend: {');
    js.Add('      layout: "vertical",');
    js.Add('      align: "right",');
    js.Add('      verticalAlign: "middle",');
    js.Add('      borderWidth: 0');
    js.Add('    },');
    js.Add('    series: [{');
    js.Add('      name: "SP",');
    js.Add('      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]');
    js.Add('    }, {');
    js.Add('      name: "RJ",');
    js.Add('      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]');
    js.Add('    }, {');
    js.Add('      name: "MG",');
    js.Add('      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]');
    js.Add('    }, {');
    js.Add('      name: "RS",');
    js.Add('      data: [3.1, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]');
    js.Add('    }]');
    js.Add('  });');
    js.Add('});');
    UniSession.AddJS(js.Text);
  finally
    js.Free;
  end;
end;

 

 

Best regards

Highcharts.zip

[Arvin Feng]

Here is my code snippets

 

 

UniHTMLFrame.html with:

<div id="container" style="width:98%; height:100%"></div>

...

 

script := TStringList.Create;

  try

    script.Add('Highcharts.setOptions( {');

    script.Add(' global : {');

    script.Add(' useUTC : false');

    script.Add(' }');

    script.Add('});');

    script.Add('var chart;');

    script.Add('$(document).ready(function() {');

    script.Add(' chart = new Highcharts.Chart({');

    script.Add(' chart: {');

    script.Add(' renderTo: ''container''');

    script.Add(' },');

    script.Add(' title: {');

    script.Add(' text: ''Monthly Average Temperature'',');

    script.Add(' x: -20');

    script.Add(' },');

    script.Add(' subtitle: {');

    script.Add(' text: ''Source: WorldClimate.com'',');

    script.Add(' x: -20');

    script.Add(' },');

    script.Add(' xAxis: {');

    script.Add(' type: ''datetime'',');

    script.Add(' dateTimeLabelFormats:{');

    script.Add(' second: ''%M:%S'',');

    script.Add(' minute: ''%H:%M'',');

    script.Add(' hour: ''%H'',');

    script.Add(' day :''%Y/%m/%d'',');

    script.Add(' week: ''%Y/%m/%d'',');

    script.Add(' month: ''%Y/%m/%d'',');

    script.Add(' year: ''%Y''');

    script.Add(' }');

    script.Add(' },');

    script.Add(' yAxis: {');

    script.Add(' title: {');

    script.Add(' text: ''111''');//11111111111111

    script.Add(' }');

    script.Add(' },');

    script.Add(' tooltip:{');

    script.Add('      crosshairs : true,');

    script.Add(' xDateFormat : ''%Y-%m-%d %H:%M''');

    script.Add(' },');

    script.Add(' series: [{');

    script.Add(' name: ''当前值'',');

    script.Add(' type: ''line'',');

    script.Add(' marker:{enabled:false},');

    script.Add(Format(' data: %s', [data]));

    script.Add(' },{');

    script.Add(' name: ''最大值'',');

    script.Add(' type: ''line'',');

    script.Add(' data:[[1349020860000, 8.5],[1349189220000, 8.5]]');

    script.Add(' },{');

    script.Add(' name: ''最小值'',');

    script.Add(' type: ''line'',');

    script.Add(' data:[[1349020860000, 6.5],[1349189220000, 6.5]]');

    script.Add(' }]');

    script.Add(' });');

    script.Add('});');

    UniSession.AddJS(Script.Text);

  finally

   script.Free;

  end;

  

[Sistema Fenix]

Hi Arvin,
 

Thanks for the reply.

But I made with the same code and I send the error appears as the image.

 

I have attached the project.

 

I'm using unigui 0.93.1.1000 and Delphi XE4.

 

If you have any idea returns me please.

 

 

Best regards

 

Here is my code snippets

[Sistema Fenix]

Is it something with the version of unigui still could not figure out where the problem is.

 

Someone has an idea or has been there?

 

Grateful.

[Arvin Feng]

UniServerModule.CustomFiles with:

 

files/Highcharts/jquery-1.4.4.min.js

files/Highcharts/highcharts.js

files/Highcharts/modules/exporting.js

 

 

 

 

 

Highcharts.rar

[Sistema Fenix]

Hi Arvin,

 

With the version I'm sending it worked.

Then I did some more tests and got with the current version of highchart, I think the problem was with the file .js.

Now I'll create a class to facilitate the creation of the graph.

Also need to figure out what I need to change when the uniframehtml is another formframe as well only works when it is in the main.

 

Thanks

hugs

[Arvin Feng]

 

Hi Arvin,

 

With the version I'm sending it worked.

Then I did some more tests and got with the current version of highchart, I think the problem was with the file .js.

Now I'll create a class to facilitate the creation of the graph.

Also need to figure out what I need to change when the uniframehtml is another formframe as well only works when it is in the main.

 

Thanks

hugs

 

 

I think the problem maybe with the version higtchart.

[lema]

You can also use dygraphs library

http://forums.unigui.com/index.php?/topic/3531-unidygraphs/

[Sistema Fenix]

Hi Lema,

Thank you.

How have various chart types, I will study your library to adapt to Highcharts.

 

Grateful.