How to Integrate Google charts in UI HTML Panel?

Sanjeev · 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.

kev123 · January 6, 2014

You cant from what I can see update them from the html panel you can do it in thw browser thou

Sanjeev · 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.

kev123 · 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

Sanjeev · January 6, 2014

Wow! I'll be waiting!!

Anonym · 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.

UBotDev · 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);

Sanjeev · January 8, 2014

Thanks UbotDev, this code works perfectly!

I haven't tested the 'redraw code', will let you know.

Thanks again!

kev123 · January 8, 2014

If you get the redraw working let us know ill have a play when I get chance later in the week

Sanjeev · January 8, 2014

OK

HaHaItsJake · October 3, 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);

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

UBotDev · 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...

HaHaItsJake · 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

How to Integrate Google charts in UI HTML Panel?

Recommended Posts

Sanjeev 46

Link to post

Share on other sites

kev123 132

Link to post

Share on other sites

Sanjeev 46

Link to post

Share on other sites

kev123 132

Link to post

Share on other sites

Sanjeev 46

Link to post

Share on other sites

Anonym 53

Link to post

Share on other sites

UBotDev 276

Link to post

Share on other sites

Sanjeev 46

Link to post

Share on other sites

kev123 132

Link to post

Share on other sites

Sanjeev 46

Link to post

Share on other sites

HaHaItsJake 25

Link to post

Share on other sites

UBotDev 276

Link to post

Share on other sites

HaHaItsJake 25

Link to post

Share on other sites

Join the conversation