This thread has been locked.

If you have a related question, please click the "Ask a related question" button in the top right corner. The newly created question will be automatically linked to this question.

GUI composer Scrolling line graph

Other Parts Discussed in Thread: TEST2

I have a line graph plotting an array of data, but i would like the data to scroll - as new data is read from the micrcontroller, the existing graph moves left, and the new data is plotted on the right, so a continuous scrolling image is formed. is there anyway to do this? My attempt is in the code below, but it just plots the original data, not the new array.

/*
 * This file is provided for custom JavaScript logic that your HTML files might need.
 * GUI Composer includes this JavaScript file by default within HTML pages authored in GUI Composer.
 */
require(["dojo/ready"], function(ready){
     ready(function(){
         // logic that requires that Dojo is fully initialized should go here

     });
});

var no_of_seconds = 10;
graph_data = new Array(stored_results*no_of_seconds).fill(0);
gdLength = graph_data.length;

function post( valueToTarget) 
{

	var result = [valueToTarget.length/no_of_seconds];  //create result with same number of datapoints as input array
	for (var i = 0; i < result.length; ++i) 
	{
		result[i] = valueToTarget[valueToTarget.length - result.length + i];   //store the last result.length number of points from graph data to  restore oringial array 
	}
	return result;
}

function pre( valueFromTarget) {
   
   for (var i = 0; i < valueFromTarget.length; ++i) 
   {
	   	graph_data.shift()                                              //remove point from start of array
		graph_data.push(valueFromTarget[i]);         //add new point to end
   }
   return graph_data;
}

  • You can use a guivar bound to the target array and use a standalone graph. When the guivar update, than you can do perform the array shifting yourself in the callback and set the new value to the graph.

    Patrick

  • Can you explain this further? I cannot find documentation on how to use the guivar, or how to bind it to anything, or create a standalone graph :-/

  • Thanks Patrick

    I followed the links - the GUIVAR is set up now, but the function you linked for setting graph values seems to be for x-y graphs only, not a line graph - at least, it is not potting anything. Is there a reference i can look at, or another function?

  • I have managed to get the graph plotting, but i cannot get a variable that will hold its value outside of the function,  and thus i cannot perform the array shifting. Can you help with this? My current code is below.

    I am using the following  guivars: Graph_data to store the most recent set of new points (10), Graph_all *should* store the full array (100 points). isInitialsed is a boolean supposed to indicate if i have initialised the array or not. currently this doesnt plot anything.

    /*
     * This file is provided for custom JavaScript logic that your HTML files might need.
     * GUI Composer includes this JavaScript file by default within HTML pages authored in GUI Composer.
     */
    require(["dojo/ready"], function(ready){
         ready(function(){
             // logic that requires that Dojo is fully initialized should go here
    
         });
    });
    
    var no_of_seconds = 10;
    var graph_data  = new Array(stored_results*no_of_seconds).fill(0);
    var graph_datax = new Array(stored_results*no_of_seconds).fill(0);
    gdLength = graph_data.length;
    
    var n = 0;
    
    
    function pre( valueFromTarget) 
    {
    	   
    	for (var i = 0; i < valueFromTarget.length; i++) 
    	{
    	   	graph_data.shift();
    		graph_data.push(valueFromTarget[i]);
        }
    	dijit.byId('widget_4118').set('value', "test");
        return graph_data;
        //return valueFromTarget.push(1);
        
    }
    
    //pre.graph_data = new Array(10*10).fill(0);
    
    
    function post( valueToTarget) 
    {
    
    	var result = [valueToTarget.length/10];  //create result with same number of datapoints as input array
    	for (var i = 0; i < result.length; i++) 
    	{
    		result[i] = valueToTarget[valueToTarget.length - result.length + i];   //store the last result.length number of points from graph data to  restore oringial array 
    	}
    	return result;
    }
    
    
    
    function graph_update( propertyName, newValue, oldValue, n) {
    
    	var t = $TI.GUIVars;
    	
    	if (!t.getValue('isInisialised'))
    	{
    		init_array = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
                          0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
                          0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
                          0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    		t.setValue('Graph_data', init_array);
    		t.setValue('isInitialised', true);
    	}
    	
    	t.setValue("test_no", t.getValue("test_no)"+1))
    	
    
    	dijit.byId('widget_10070').set('value', t.getValue("test_no"));
    	dijit.byId('widget_4118').set('value', toString(n));
    	
    	
    	// get value from another GUI variable
    	var new_data = t.getValue('Graph_data');
    	var all_data = t.getValue('Graph_all');
    	
    	for (var i = 0; i< 10; i++)
    	{
    		
    		all_data.shift();
    		
    		all_data.push(new_data[i]);
    	}
    	t.setValue('Graph_all', all_data);
    	
    	var test = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    	// set value to a widget
    	dijit.byId('widget_32310').set('series0', all_data);
    	//dijit.byId('widget_32310').set('series0', v2);
    	
    	
    	
    	//dijit.byId('widget_32310')._setSeriesN(graph_datax, 2, false);
    	
    }
    
    

  • Hi Simon,

    Here is an example GC project, the solution is fairly simple. I am using a MSP432G2553 device, with an array of size 10 on the target and named my_array.
    You should be able to use this example on any device that you have, assuming the target array has the same name.

    slidding_graph.zip

    Regards,
    Patrick

  • Hi Patrick (for the last time!)

    Your code doesnt work either, but now i know why!

    In Javascript, the following lines do not produce the same result! 

    var test1 = new Array();
    var test2 = [];

    The first produces an object with array functionality, while the second produces a variable of the type array. As such, the first one does not have common array methods such as .push() and .pop()

    Hence, the code we both used will not run properly, as the array function lines do not run properly

  • The demo was created and tested on a MSP430G2 device. 

    Regarding test1 and test2, both test1 and test2 should have push and pop functions defined. You can try to open a chrome debugger and enter these two expressions and should be able to see both push and pop.

    Here is the output from chrome:

    Regards,
    Patrick