Sistema Fenix Posted October 16, 2013 Share Posted October 16, 2013 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 1 Link to comment Share on other sites More sharing options...
stone feng Posted October 17, 2013 Share Posted October 17, 2013 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; Link to comment Share on other sites More sharing options...
Sistema Fenix Posted October 17, 2013 Author Share Posted October 17, 2013 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 Link to comment Share on other sites More sharing options...
Sistema Fenix Posted October 17, 2013 Author Share Posted October 17, 2013 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. Link to comment Share on other sites More sharing options...
stone feng Posted October 17, 2013 Share Posted October 17, 2013 UniServerModule.CustomFiles with: files/Highcharts/jquery-1.4.4.min.js files/Highcharts/highcharts.js files/Highcharts/modules/exporting.js Highcharts.rar Link to comment Share on other sites More sharing options...
Sistema Fenix Posted October 17, 2013 Author Share Posted October 17, 2013 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 More sharing options...
stone feng Posted October 18, 2013 Share Posted October 18, 2013 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 More sharing options...
lema Posted October 18, 2013 Share Posted October 18, 2013 You can also use dygraphs library http://forums.unigui.com/index.php?/topic/3531-unidygraphs/ Link to comment Share on other sites More sharing options...
Sistema Fenix Posted October 19, 2013 Author Share Posted October 19, 2013 Hi Lema, Thank you. How have various chart types, I will study your library to adapt to Highcharts. Grateful. Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now