How do I access a javascript library that I uploaded?

[Joe Walsh]

I'm trying to test charts and graphs in an app, so I created a new javascript file following the directions here: http://help.gotiggr.com/documentation...

The file that I uploaded was RGraph.Line.js, which is from the RGraph graphing library: http://www.rgraph.net/docs/line.html

I had assumed I could instantiate a graph using something like
var line = new RGraph.Line("myLine", data);
but that line fails. What is the proper way to reference uploaded javascript files?

[maxkatz]

You access it like any other JavaScript library. The file is included in the header and you have access to it on every page.

[Joe Walsh]

I was accessing it correctly then. My problem must be something else.

[maxkatz]

Where is the data coming from?

[Joe Walsh]

The data is from a line like this:
var data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89];

I discovered the problem. I was trying to pass the RGraph.Line constructor "myLine", which was the name of the panel in which I wanted the chart to display. Then I read this topic: https://getsatisfaction.com/tiggzi/to...
I realized that I needed to put an html tag inside the custom code for my panel, so I added
code<canvas id="myLine" width="250" height="250">[No canvas support]<&#47;canvas>/code

Now it works.

[GraceSalas]

Hi Joe and Max,

I'm also trying to show a chart in my app and try to follow your steps. I'm getting the following error :
Uncaught TypeError: Object #object has no method 'CreateUID'

I implemented the graph following these steps:

1. created a new Java script called it "myLine' and uploaded RGraph.Line.js found in their library.
2. using the run custom java script functionality "OnLoad" pasted the following code there :
   {
   
   

   Code: Select all

    var data = [10,4,17,50,25,19,20,25,30,29,30,29]; 
   
    var line = new RGraph.Line("myLine", data); 
   
    line.Set('chart.background.barcolor1', 'white'); 
    line.Set('chart.background.barcolor2', 'white'); 
    line.Set('chart.background.grid.color', 'rgba(238,238,238,1)'); 
    line.Set('chart.colors', ['red']); 
    line.Set('chart.linewidth', 2); 
    line.Set('chart.filled', true); 
    line.Set('chart.hmargin', 5); 
    line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); 
    line.Set('chart.gutter.left', 40); 
   
    line.Draw(); 

}

1. Placed a panel on my screen and in properties changed it to html and added
   [No canvas support]

   I'm probably missing something, I'm hopping you can point me in the right direction /object

[GraceSalas]

step 3 is actually :

[No canvas support]

[maxkatz]

tI don't know why it doesn't work, I'm not familiar with RGraph.Line.js. Try running it in a plain HTML5 file and see if that works.

[Joe Walsh]

I don't recognize that error, so I'm not sure if this will solve your actual problem, but here's some tips.

First, javascript uses single quotes for strings, so the example on the RGraph website is misleading. You can see I made the same mistake of copying the RGraph example verbatim in my first post. The code should be like this:

var line = new RGraph.Line('myLine', data);

However, html uses double quotes, so be sure not to confuse the two styles.

Second, in addition to RGraph.line.js, I'm pretty sure you need to upload the core files of the RGraph library. It's in RGraph.Core.js. Or something with a really similar name (don't exactly remember it at the moment).

Best of luck, and please post back with your progress!

[Igor Gomez]

Hi, I'm not an expert programming and I'm not undertanding very well how I can have reference to an external Javascript Library. For example I want to draw a chart using google charts, when I copy and paste the code below in a HTML panel it works:

Code: Select all

 PresidentVice President 

• but if for example I wanna place the second script out of the HTML I create a blank Javascritp file and I paste the script:

  google.load('visualization', '1', {packages:['orgchart']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Manager');
  data.addColumn('string', 'ToolTip');
  data.addRows([
  [{v:'Mike', f:'MikePresident'}, '', 'The President'],
  [{v:'Jim', f:'JimVice President'}, 'Mike', 'VP'],
  ['Alice', 'Mike', ''],
  ['Bob', 'Jim', 'Bob Sponge'],
  ['Carol', 'Bob', '']
  ]);
  var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
  chart.draw(data, {allowHtml:true});
  }

  • leaving in the HTML panel only this code:

• but the chart doesn't load. What I am doing wrong?, How can I reference to that Javascript file that I created?

  Many Thanks