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++;
Code: Select all
// 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) {
Code: Select all
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.