Sanjeev 46 Posted January 6, 2014 Report Share Posted January 6, 2014 Fellas? Any ideas on how to do this? - I was searching the forum - and couldn't find any info on how to actually implement this..Any help would be appreciated . Thanks. Quote Link to post Share on other sites
kev123 132 Posted January 6, 2014 Report Share Posted January 6, 2014 You cant from what I can see update them from the html panel you can do it in thw browser thou Quote Link to post Share on other sites
Sanjeev 46 Posted January 6, 2014 Author Report Share Posted January 6, 2014 HI Kev, Thanks for your reply. Is there any kind of charting library which can be integrated inside the Ui Html panel? Thanks. Quote Link to post Share on other sites
kev123 132 Posted January 6, 2014 Report Share Posted January 6, 2014 I'm looking at pure html which will be updatable later in the month ill let you know how I get on Quote Link to post Share on other sites
Sanjeev 46 Posted January 6, 2014 Author Report Share Posted January 6, 2014 Wow! I'll be waiting!! Quote Link to post Share on other sites
Anonym 53 Posted January 6, 2014 Report Share Posted January 6, 2014 Sanjeev, everything is laid out for you, it's just about reading the APIs and examples.https://developers.google.com/chart/interactive/docs/gallery It's not any rocket science. Everything is in the docs. I don't load my charts into the UI panel, but rather generating the html in a string and then use "load html" to show the results. Once the Google charts generation is implemented as defines, the generation of the charts is dead simple. It's a bit annoying though that the data structure for tables are sometimes by row and sometimes by column, but you'll figure it out. Quote Link to post Share on other sites
UBotDev 276 Posted January 6, 2014 Report Share Posted January 6, 2014 You can integrate it, but I don't think it will be easy to update it once it get's displayed. There might be a way by executing some javascript inside HTML panel, which would draw a new chart, but haven't tried it yet (I always used charts inside main browser). Still, here is the code: ui html panel("<html> <head> <script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script> <script type=\"text/javascript\"> google.load(\"visualization\", \"1\", \{packages:[\"corechart\"]\}); google.setOnLoadCallback(drawChart); function drawChart() \{ var data = google.visualization.arrayToDataTable([ [\'Year\', \'Sales\', \'Expenses\'], [\'2004\', 1000, 400], [\'2005\', 1170, 460], [\'2006\', 660, 1120], [\'2007\', 1030, 540] ]); var options = \{ title: \'Google Chart\' \}; var chart = new google.visualization.LineChart(document.getElementById(\'chart_div\')); chart.draw(data, options); \} </script> </head> <body> <div id=\"chart_div\" style=\"height: 500px;\"></div> </body> </html>", 200) So to redraw the chart you should run JS bellow with new "data" and old "options" (haven't tested but I think it should work, since you pass in chard id "chart_div" telling it which chart to draw/re-draw) : var chart = new google.visualization.LineChart(document.getElementById(\'chart_div\')); chart.draw(data, options); 2 Quote Link to post Share on other sites
Sanjeev 46 Posted January 8, 2014 Author Report Share Posted January 8, 2014 Thanks UbotDev, this code works perfectly! I haven't tested the 'redraw code', will let you know.Thanks again! Quote Link to post Share on other sites
kev123 132 Posted January 8, 2014 Report Share Posted January 8, 2014 If you get the redraw working let us know ill have a play when I get chance later in the week Quote Link to post Share on other sites
Sanjeev 46 Posted January 8, 2014 Author Report Share Posted January 8, 2014 OK Quote Link to post Share on other sites
HaHaItsJake 25 Posted October 3, 2014 Report Share Posted October 3, 2014 (edited) You can integrate it, but I don't think it will be easy to update it once it get's displayed. There might be a way by executing some javascript inside HTML panel, which would draw a new chart, but haven't tried it yet (I always used charts inside main browser). Still, here is the code: ui html panel("<html> <head> <script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script> <script type=\"text/javascript\"> google.load(\"visualization\", \"1\", \{packages:[\"corechart\"]\}); google.setOnLoadCallback(drawChart); function drawChart() \{ var data = google.visualization.arrayToDataTable([ [\'Year\', \'Sales\', \'Expenses\'], [\'2004\', 1000, 400], [\'2005\', 1170, 460], [\'2006\', 660, 1120], [\'2007\', 1030, 540] ]); var options = \{ title: \'Google Chart\' \}; var chart = new google.visualization.LineChart(document.getElementById(\'chart_div\')); chart.draw(data, options); \} </script> </head> <body> <div id=\"chart_div\" style=\"height: 500px;\"></div> </body> </html>", 200) So to redraw the chart you should run JS bellow with new "data" and old "options" (haven't tested but I think it should work, since you pass in chard id "chart_div" telling it which chart to draw/re-draw) : var chart = new google.visualization.LineChart(document.getElementById(\'chart_div\')); chart.draw(data, options); UbotDev, Is there anyways you know with a simple method that can convert a Table made in Ubot into a Google Line Chart? Or anyways to have Ubot "Create" the graph values from Var's? I wish to use this method to show the Profit/Loss margins from data from a table. NOTE: I plan on using a Shell command to open the .html file after Ubot makes the Html with the graph (If it can) so it's not in UI Table looks like: First line is the Variables for the data. Second row Is the data that needs to be graphed. The Table will be adding rows once a day. So, below 10/03/2014 will have 10/02/2014 with that day's data Date CC RV AR EVM EVA Extension Value Total APV Total Income Total Loss Total Profit or Loss 10/03/2014 15:35:51 327 0 0 0 1.6 1.6 0.462 1.635 -2.062 -0.43 10/03/2014 15:35:51 327 0 0 0 1.6 1.6 0.462 1.635 -2.062 -0.43 10/03/2014 15:35:50 327 0 0 0 1.6 1.6 0.462 1.635 -2.062 -0.43 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Day', 'CC', 'RV', 'AR', 'EVM', 'EVA', 'Extension Value Total', 'APV', 'Income', 'Loss', 'Profit'], ['10/03/2014', 327, 0, 0, 0, 1.6, 1.6, 0.462, 1.635, -2.062, -0.43], ['10/02/2014', 327, 0, 0, 0, 1.6, 1.6, 0.462, 1.635, -2.062, -0.43] ]); var options = { title: 'Company Performance' }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html> Best Regards, HaHaItsJake EDIT: Table not showing properly... "better" fix made EDIT: Found Plugin for this I believe, http://www.ubotstudio.com/forum/index.php?/topic/15993-sell-ultimate-ubot-plugin-all-in-one/ Thinking about checking it out. Not sure though Haha, don't got that money just yet. Edited October 4, 2014 by HaHaItsJake Quote Link to post Share on other sites
UBotDev 276 Posted October 4, 2014 Report Share Posted October 4, 2014 Well, everything you need to do is loop through table columns and rows and prepare the data string similar to this one: var data = google.visualization.arrayToDataTable([ [\'Year\', \'Sales\', \'Expenses\'], [\'2004\', 1000, 400], [\'2005\', 1170, 460], [\'2006\', 660, 1120], [\'2007\', 1030, 540] ]); Once you have that string you simply pass it to JavaScript used for charting, and execute to draw the chart... Quote Link to post Share on other sites
HaHaItsJake 25 Posted October 4, 2014 Report Share Posted October 4, 2014 Well, everything you need to do is loop through table columns and rows and prepare the data string similar to this one: var data = google.visualization.arrayToDataTable([ [\'Year\', \'Sales\', \'Expenses\'], [\'2004\', 1000, 400], [\'2005\', 1170, 460], [\'2006\', 660, 1120], [\'2007\', 1030, 540] ]); Once you have that string you simply pass it to JavaScript used for charting, and execute to draw the chart...Yeah, I found the JavaScript functions while looking up about charts with HTML. Was hoping a work around JavaScript for right now, then upgrade to JavaScrpit Charts if needed. I found a complicated way, with having a var set with the HTML code, then Replace with the new Data String after creating the string from the tables, then save the new HTML with the charts and use a shell command to run the .html in the default browser of the user. Regards, HaHaItsJake Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.