Trying To Set Attribute In Html As Ubot Variable

[Cnotey 3]

Hi there,

 

I have been searching for over a week now for an answer to my question, and I just can't find anything that works.

 

I think it's pretty simple what I want to do.

 

I want to set a javascript variable as a variable that I set in Ubot.

 

So I want to:

 

<script type="text/javascript">
      //<![CDATA[

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawTrendlines);

function drawTrendlines() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', <I WANT TO SET UBOT VARIABLE HERE>);

      data.addRows([
        [0, <AND HERE>],

		[1, 10],
		[2,15],
		]);

      var options = {
		
		legend:{
			textStyle:{color:'#FFFFFF'},
		},
        hAxis: {
          title: 'Time',
		  textStyle:{color: '#FFFFFF'},
		  titleTextStyle:{color: '#FFFFFF'},
        },
        vAxis: {
          title: 'Popularity',
		  textStyle:{color: '#FFFFFF'},
		  titleTextStyle:{color: '#FFFFFF'},
        },
		backgroundColor: '#222222',
        colors: ['#1d72ef', '#FFFFFF'],
        trendlines: {
          0: {type: 'exponential', color: '#a7b505', opacity: 1},
          1: {type: 'linear', color: '#a7b505', opacity: .3}
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('Trend_Graph'));
      chart.draw(data, options);
    }
    </script>

Maybe there's something I am missing?  Maybe you can't even do this?

 

Thanks in advance for the help.

[LoWrIdErTJ - BotGuru 904]

are you producing the html page yourself?
or are you wanting to change a html page that has already loaded?

 

[Cnotey 3]

Hey BotGuru,

 

Thanks for the reply.

 

Sorry I should have been more clear.  The HTML elements I want to change are within a UI HTML panel that I have created.

 

Basically, I scrape the web for some data, and I am trying to make a graph with the above code using the data that I have scraped.

 

So I need to scrape variables.  Then set the elements of the graph with the variable data.

Does that make sense?

[deliter 203]

"I want to set a javascript variable as a variable that I set in Ubot."

 

yes just remember how javascript works,strings need quotations,numbers or objects do not

 

so whatever your Ubot variable is just put it in the JS like below

set(#jsVar,$prompt("if you enter a string it will not work,integers only"),"Global")
run javascript("var myJSVariable = {#jsVar}")
alert("Javascript variable is: {$eval("myJSVariable")}")
set(#jsVarTwo,$prompt("enter a string"),"Global")
run javascript("var myJSVariableTwo = \"{#jsVarTwo}\"")
alert("Javascript variable is: {$eval("myJSVariableTwo")}")

[Cnotey 3]

Thanks for the reply guys, but I think I am still missing a piece.  I see how to set a variable in JS, but how do I pass that variable to the HTML markup?

 

Thanks,

 

Cnotey

[deliter 203]

Looks like you know more about JS than me,but if simply adding into the code,look at this,of course I can't test it because I would get a "Google is not defined error"

quotation marks around the cfolumn name variable and non around the number variable

set(#number,$prompt("number"),"Global")
set(#column name,$prompt("column name"),"Global")
run javascript("
//<![CDATA[

google.load(\'visualization\', \'1\', \{packages: [\'corechart\', \'line\']\});
google.setOnLoadCallback(drawTrendlines);

function drawTrendlines() \{
var data = new google.visualization.DataTable();
data.addColumn(\'number\', \'X\');
  data.addColumn(\'number\', \'{#column name}\');

data.addRows([
                 [0, {#number}],	
[1, 10],
		[2,15],
		]);

var options = \{
		
		legend:\{
			textStyle:\{color:\'#FFFFFF\'\},
		\},
  hAxis: \{
    title: \'Time\',
		  textStyle:\{color: \'#FFFFFF\'\},
		  titleTextStyle:\{color: \'#FFFFFF\'\},
  \},
  vAxis: \{
    title: \'Popularity\',
		  textStyle:\{color: \'#FFFFFF\'\},
		  titleTextStyle:\{color: \'#FFFFFF\'\},
  \},
		backgroundColor: \'#222222\',
  colors: [\'#1d72ef\', \'#FFFFFF\'],
  trendlines: \{
    0: \{type: \'exponential\', color: \'#a7b505\', opacity: 1\},
    1: \{type: \'linear\', color: \'#a7b505\', opacity: .3\}
  \}
\};

var chart = new google.visualization.LineChart(document.getElementById(\'Trend_Graph\'));
chart.draw(data, options);
    \}
   ")

[deliter 203]

oh you mean to change it at runtime?your not using this script on your own custom page but want to manipulate googles page before the page loads?cannot do that as the page would have loaded before Ubot could even inject an attribute into it

 

Might be able to remove the loaded chart and re run your modified one

[Cnotey 3]

deliter thanks for working with me.  Please forgive my ignorance.

 

The way I have it set up is I have a UI HTML panel, which includes the code provided in the OP inside of a DIV.  I need to add the X,Y variables at runtime to modify the chart with my own data.

[Cnotey 3]

Maybe this helps explain

 

I need the JS to execute inside the greyed out DIV on the bottom right.

[deliter 203]

Hey

 

I dont have the UI HTML Window,think thats developer only?

 

anyways heres the code I would guess it works in the UI window too

set(#rows,3,"Global")
set(#YAxis,"Ubot","Global")
load html("  <script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>
  <div id=\"chart_div\"></div>
  <script>
  google.load(\'visualization\', \'1\', \{packages: [\'corechart\', \'line\']\});
google.setOnLoadCallback(drawBasic);

function drawBasic() \{

      var data = new google.visualization.DataTable();
      data.addColumn(\'number\', \'X\');
      data.addColumn(\'number\', \'{#YAxis}\');

      data.addRows([
        [0, {#rows}],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
        [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
        [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
        [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
        [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
        [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
        [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
        [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
        [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
        [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
        [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
        [66, 70], [67, 72], [68, 75], [69, 80]
      ]);

      var options = \{
        hAxis: \{
          title: \'Time\'
        \},
        vAxis: \{
          title: \'Popularity\'
        \}
      \};

      var chart = new google.visualization.LineChart(document.getElementById(\'chart_div\'));

      chart.draw(data, options);
    \}
    </script>")

heres a screenshot,see Ubot in the top right hand corner of the image,also Ive included in the pic,to the left make sure the Ubot variables look like Ubot Variables,see ubot variables "YAxis" and "rows",on the left side of the pic,with the purple colors,and not just text,then they will not be parsed as a Ubot variable,if it is just text,then open code view,and then go back to node view,and ubot should parse it into,a ubot variable,the purple rectangular boxes

http://imgur.com/Zeuitso

[Cnotey 3]

Yea I think UI HTML Panel is dev only.

 

But thank you!  It appears to work OK.  You have helped me find a small caveat with Ubot Dev that might be why I was so stumped.

 

It seems for some reason you can only input a Ubot variable into HTML from the code view, not from node view.

 

Good to know!