GUI composer Scrolling line graph

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 :-/

See this link for guivar, page 63.

http://processors.wiki.ti.com/index.php/CCS_Modules_Library#GUI_Composer

Take a look at this post for plotting custom graph series.

https://e2e.ti.com/support/development_tools/code_composer_studio/f/81/t/341232

Regards,
Patrick

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