Jump to content

How to integrate the Highcharts unigui?


Sistema Fenix

Recommended Posts

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

post-1507-0-60445400-1382032189_thumb.jpg

Highcharts.zip

  • Upvote 1
Link to comment
Share on other sites

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;
  

post-602-0-70745600-1381988984_thumb.png

Link to comment
Share on other sites

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

post-1507-0-57806600-1382032055_thumb.jpg

Link to comment
Share on other sites

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
Link to comment
Share on other sites

 

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.

:)

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...