Forum | Appery.io

Hello,

I am working on a sample program where I am trying to plug in a third party javascript library, Envision.js (details on the lib at http://www.humblesoftware.com/envisio...
), to render a realtime scrolling histogram on a panel. The panel I am trying to load the custom component into is on my TeamHistogram page. I have included the javascript below that should target the panel named "container" on my TeamHistogram page onLoad event, and render a timed series as an image on the panel:

(function realtime_demo (container) {

var
x = [],
dataA = [],
dataB = [],
data = [[x, dataA], [x, dataB]],
options, i, timeseries;

// Mock Data:
function sample(i) {
x.push(i);
dataA.push(Math.sin(i / 6) * (Math.random() + 1) / 2);
dataB.push(Math.sin(i / 6 + Math.PI / 2) * (Math.random() + 1) / 2);
}

// Initial Data:
for (i = 0; i < 100; i++) {
sample(i);
}

// Envision Timeseries Options
options = {
container : container,
data : {
detail : data,
summary : data
},
defaults : {
summary : {
config : {
handles : { show : false }
}
}
}
}

// Render the timeseries
timeseries = new envision.templates.TimeSeries(options);

// Method to get new data
// This could be part of an Ajax callback, a websocket callback,
// or streaming / long-polling data source.
function getNewData () {
i++;

 // Short circuit (no need to keep going!  you get the idea) 
 if (i  1000) return; 

 sample(i); 
 animate(i); 

}

// Initial request for new data
getNewData();

// Animate the new data
function animate (i) {

 var 
   start = (new Date()).getTime(), 
   length = 500, // 500ms animation length 
   max = i - 1,  // One new point comes in at a time 
   min = i - 51, // Show 50 in the top 
   offset = 0;   // Animation frame offset 

 // Render animation frame 
 (function frame () { 

   var 
     time = (new Date()).getTime(), 
     tick = Math.min(time - start, length), 
     offset = (Math.sin(Math.PI * (tick) / length - Math.PI / 2) + 1) / 2; 

   // Draw the summary first 
   timeseries.summary.draw(null, { 
     xaxis : { 
       min : 0, 
       max : max + offset 
     } 
   }); 

   // Trigger the select interaction. 
   // Update the select region and draw the detail graph. 
   timeseries.summary.trigger('select', { 
     data : { 
       x : { 
         min : min + offset, 
         max : max + offset 
       } 
     } 
   }); 

   if (tick < length) { 
     setTimeout(frame, 20); 
   } else { 
     // Pretend new data comes in every second 
     setTimeout(getNewData, 500); 
   } 
 })(); 

}
}
)(document.getElementById("editor-render-0"));

Unfortunately, I keep getting the error from the Envision.js javascript of "No element to render within." even though I am using the call document.getElementById("container') where my target panel is named "container". Can you please take a look at this and see if you can figure out why the graph isn't rendering and/or what I am doing wrong? Thanks for any assistance.

Hi Jason,

You can't use function document.getElementById ("container") to get Tiggzi component by name. You should use function Tiggzi() :

codeTiggzi("container")/code

Hello,

Thanks for the quick response. Although your own generated code uses document.getElementById(...) in some parts of the code, I changed the calls from document to use the Tiggzi call as seen below:

(function () {

var
container = Tiggzi("container"),
x = [],
dataA = [],
dataB = [],
data = [[x, dataA], [x, dataB]],
options, i, timeseries;

// Mock Data:
function sample(i) {
x.push(i);
dataA.push(Math.sin(i / 6) * (Math.random() + 1) / 2);
dataB.push(Math.sin(i / 6 + Math.PI / 2) * (Math.random() + 1) / 2);
}

// Initial Data:
for (i = 0; i < 100; i++) {
sample(i);
}

// Envision Timeseries Options
options = {
container : container,
data : {
detail : data,
summary : data
},
defaults : {
summary : {
config : {
handles : { show : false }
}
}
}
}

// Render the timeseries
timeseries = new envision.templates.TimeSeries(options);

// Method to get new data
// This could be part of an Ajax callback, a websocket callback,
// or streaming / long-polling data source.
function getNewData () {
i++;

 // Short circuit (no need to keep going!  you get the idea) 
 if (i  1000) return; 

 sample(i); 
 animate(i); 

}

// Initial request for new data
getNewData();

// Animate the new data
function animate (i) {

 var 
   start = (new Date()).getTime(), 
   length = 500, // 500ms animation length 
   max = i - 1,  // One new point comes in at a time 
   min = i - 51, // Show 50 in the top 
   offset = 0;   // Animation frame offset 

 // Render animation frame 
 (function frame () { 

   var 
     time = (new Date()).getTime(), 
     tick = Math.min(time - start, length), 
     offset = (Math.sin(Math.PI * (tick) / length - Math.PI / 2) + 1) / 2; 

   // Draw the summary first 
   timeseries.summary.draw(null, { 
     xaxis : { 
       min : 0, 
       max : max + offset 
     } 
   }); 

   // Trigger the select interaction. 
   // Update the select region and draw the detail graph. 
   timeseries.summary.trigger('select', { 
     data : { 
       x : { 
         min : min + offset, 
         max : max + offset 
       } 
     } 
   }); 

   if (tick < length) { 
     setTimeout(frame, 20); 
   } else { 
     // Pretend new data comes in every second 
     setTimeout(getNewData, 500); 
   } 
 })(); 

}
}
)(Tiggzi("container"));

I also tried the script above with the last line being:

)(Tiggzi("editor-render-0"));

with no luck. I am still getting the same error. Can you look at my application on your website with a profiler and see what is going wrong. Thanks again for any assistance.

BTW...according to your docs, the Tiggzi js API is just a helper utility class and all standard js/HTML5 calls are still valid. The above js library is fully HTML5 compliant and works in Chrome/IE/etc, so I have no idea why this is an issue. Again, thanks for any assistance.

That's correct, Tiggzi JS API is just a small helper library. Your app is running in the browser so any JS will work. Are you sure that document.getElementById("container') -- finds the correct element in the DOM?

Actually, I'm not sure. That's what I am trying to figure out. The example works inside a web page but not in the Tiggzi framework. Since the generated code is mapping my panel with name "container" to an id of "j_36", I believe, then I'm not sure what name to use in the lookup. Are there any inhereted or overridden properties or behavior that may cause an issue. If you profiled the app under my name on the Tiggzi website, it may point you to exactly what is going wrong.

Did you try in Chrome Dev. Tools (or Firebug) to see if you get the right element?

Yes, I did and couldn't make heads or tails of the output even trying to step through the javascript. I believe I need someone that is more familiar with your framework. Again, can someone on your end try to run a profiler like Chrome dev tools and see if they can figure it out. I'd be happy to pay someone to do this if they can fix it. Thanks.

On what element are you attaching (running) this code? Can you show how you defined it in Tiggzi?

I am setting up a second page off the startscreen page, defining a button on the startscreen, and creating an event to navigate to the second page. On the second page, i created a panel and renamed it to "container". I then created an onLoad event on the second page to run the js I have in previous comments. To fully run what is causing the problem, you will need to include the envision.min.js and envision.min.css files as external resources, but that's it. If you need valid urls for the envision files, I can send those out.