Jump to content

How to integrate the Highcharts unigui?


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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...