Google Chart API - Printable Version +- Logic Machine Forum (https://forum.logicmachine.net) +-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1) +--- Forum: General (https://forum.logicmachine.net/forumdisplay.php?fid=2) +--- Thread: Google Chart API (/showthread.php?tid=1400) |
Google Chart API - andrepneves@gmail.com - 17.05.2018 Hi everyone, I've been looking for a way to introduce pie charts and bar graphs to our visualizations. I stumbled on the Google chart API and this example for other platform that uses lua script. What I'd like to do is to get data from group addresses, send it to the API and present the chart in a frame. I lack JS and HTML knowledge to understand all this, so any help is welcome. BR, A Neves RE: Google Chart API - admin - 17.05.2018 You don't need any Lua scripting here, it can be done purely with Custom JavaScript. Here's a Gauge example: Code: $(function(){ RE: Google Chart API - andrepneves@gmail.com - 21.05.2018 Thank you admin. This works just like I needed to. How can I pass an array from a script to the custom JS? I'm thinking in combine Google charts with this example: http://www.openrb.com/docs/trends-new.htm Or simply creating a table like this and call it in JS: Code: kwh_lights = grp.getvalue('1/1/33') BR, A Neves RE: Google Chart API - admin - 21.05.2018 For smaller arrays you can use a virtual object with 250-byte string data type and put data converted via json.encode. For larger arrays you will need to create a sepearate .lp file that will output resulting data array. RE: Google Chart API - andrepneves@gmail.com - 21.05.2018 Unfortunately I don't know how to work with .lp files. Can you provide me an example, please? RE: Google Chart API - admin - 25.05.2018 Docs on how to upload .lp files: https://forum.logicmachine.net/showthread.php?tid=85 .lp file is a Lua script which is accessible from HTTP. Here's a minimal example that outputs data in JSON format: Code: <? Then, in Custom JavaScript you can load data from .lp like this (in callback function passed to google.charts.setOnLoadCallback). Once data is loaded you can create new chart and draw it. Code: $.getJSON('/user/data.lp', function(data) { RE: Google Chart API - domotiqa - 28.02.2020 Found this cool: https://quickchart.io/documentation give image ! RE: Google Chart API - toujour - 31.03.2020 (17.05.2018, 12:28)admin Wrote: You don't need any Lua scripting here, it can be done purely with Custom JavaScript. Hi, I'm trying this function...but I have a doubt. What is the empty element that I must put in PLAN ? And where Can I found the plan ID ? Regards, Alberto RE: Google Chart API - Daniel - 31.03.2020 Plan ID can be found by selecting your plan and then click quick view Then in the new opened window you will see plan ID after the # in the url You should see something like that in final visu Your LM must have internet connection for this to work. RE: Google Chart API - toujour - 31.03.2020 Great !! thanks Daniel !! My doubt was for an "empty element". Now I understand that it was only to see the page (create a botton with empty image). BR, Alberto RE: Google Chart API - jose_dli - 22.02.2021 Hello, I am trying to implement the use of surplus photovoltaic energy taking into account the weather and radiation forecast. Now I am trying to tune the algorithm, plotting with google charts some info. I am able to plot different values, but I am not able to solve two issues - With several plots, tooltip is only visible in the first #plan. Exchanging from one #plan to the other, the one that wasn't working now works, and vice versa. - there is differenci if I access to the plan from home page or directly from specific url, i.e. http://192.168.0.10/scada-vis/#21. now the information lixe axes title and legend I attach a snapshot of plan21, whose has the first chart, the tooltip works properly but not the info like legend. I draw the cursor by hand The #plan24 has not work the tooltip Changing the plot form #plan24 to #plan21 tooltips work well. And if I load 192.168.0.10/scada-vis/#21 the information like legend, it is showed The javascript used: Code: $(function(){ Any help is welcome, thanks Jose -- RE: Google Chart API - admin - 23.02.2021 The problem is that chart does not render properly when it's drawn in a hidden element (plan). You can listen to the "showplan" event and draw charts only when the containing plan becomes visible like this: Code: google.charts.load('current', {'packages':['gauge', 'corechart'],language: 'es'}); RE: Google Chart API - jose_dli - 23.02.2021 Thanks Admin for the quick answer, I have added the listener, now the complete information is displayed, like legends. But the tooltip is only available for the first plan, it works in plan#21 but not in plan#24, Do you have any idea what is the origin for this issue? for me tooltips are important to keep the grahps human readable and clean. Thanks again for your support RE: Google Chart API - admin - 23.02.2021 It's possible that chart instance can be created multiple times. Use this to create chart only once. I've removed some parts of the code to make it more readable. Code: $(function(){ RE: Google Chart API - jose_dli - 23.02.2021 Thanks for the help, but it continues without showing the tooltip for the last #plan. It seems that for the other charts, it doesn't know where is the cursor . I can use other chart library (highcharts ???). I'm a noob, any recommendation is welcome. Is it possible include de libraries in SL "harddisk"?, for not use it in CDN format and avoid script failures by abandoning backward compatibility. RE: Google Chart API - jose_dli - 24.02.2021 Hello again, I have found a solution, it is not ideal but it works, for both charts, Google and Highcharts. Now it works because layout is removed from plan in Vis. structure > Levels/Plans. I said that tooltip works only with the first plan, but it seems that the problem was not the order, if not layout definition If any one want the code for use Highcharts I can upload RE: Google Chart API - legolas2069 - 06.03.2023 Hi, I know this thread is quite old, but since it's related, I think it's the right place. I have an script with a json format array saved in a group direction: [["Time","Price"],["0",207.56],["1",202.29],["2",193.04],["3",190.45],["4",193.28],["5",184.3],["6",186.88],["7",222.27],["8",217.72],["9",262.96],["10",265.24],["11",262.25],["12",256.23],["13",209.29],["14",212.33],["15",215.99],["16",219.46],["17",266.98],["18",284.13],["19",293.19],["20",274.91],["21",221.46],["22",214.04]] I also have the javascript code to make the google's example line graph, but due to my lack of knowledge in JS, I don't know how to pass the array to the line graphic. Could you help me please? RE: Google Chart API - admin - 06.03.2023 This thread has several examples that you can use: https://forum.logicmachine.net/showthread.php?tid=4202 You can put your data into storage and retrieve it by using a .lp server-side script. |