X-Y Graphs with GUI Composer

Myriam Caron St-Pierre

Hi,

I want to plot an X-Y graph with 3 series on GUI composer. From what I see, the Scatter Plot graph can only go up to 2 series? Is there a way to bypass this limitation?

Thanks,

Myriam

over 10 years ago

0 Gautam Iyer over 10 years ago

Guru 192875 points

Hi Myriam,

All the resources in GUI composer are limited and cannot be further modified by the user (until introduced by TI themselves).

Regards,

Gautam

0 Patrick Chuong over 10 years ago

TI__Genius 15795 points

Hi Myriam,

To workaround the UI limitation, you can create two GUI Vars and have them bind to your target arrays. In the onPropertyChanged handler of the two GUI Vars, add these two javascript calls to update the graph.

Note that _setSeriesN is an internal function and can change for future version of the GC library.

function onArray3_xPropertyChanged( propertyName, newValue, oldValue) {
dijit.byId('SP_Widget')._setSeriesN(newValue, 2, true);
}

function onArray3_yPropertyChanged( propertyName, newValue, oldValue) {
dijit.byId('SP_Widget')._setSeriesN(newValue, 2, false);
}

SP_Widget is the ID of your graph widget. The last argument (true/false) is to specify the x array and y array.

Regards,
Patrick

0 Myriam Caron St-Pierre over 10 years ago in reply to Patrick Chuong

Prodigy 145 points

Hi Patrick,

The graph itself does not seem to work, even before I do the modification. What variable type does it take? I have tried with floats and integers. I cannot manage to plot any series. However, when I look into the debugger, the variables my gaph is binded to have the correct values.

Would you have any idea of why it is doing that?

Thanks,

Myriam

0 Patrick Chuong over 10 years ago in reply to Myriam Caron St-Pierre

TI__Genius 15795 points

Each series of the x-y graph accept 2 integer arrays.

Patrick

0 Myriam Caron St-Pierre over 10 years ago in reply to Patrick Chuong

Prodigy 145 points

Hi Patrick,

I am now able to plot two arrays, but I get the following message when I try to run the code with the GUI variables binded to the graph to get the third serie:

Error: File:/gc/maqetta_preview/Interface/InterfaceGraphiqueSource.json
ReferenceError: onArray3yPropertyChanged is not defined

What did I do wrong?

Here is the code for my GUI variables:

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

});
});

function onArray3yPropertyChanged( propertyName, newValue, oldValue) {
// var t = $TI.GUIVars;
// get value from another GUI variable
// var v2 = t.getValue('prop2');
// var v3 = newValue + v2;
//
// set value to another GUI variable
// t.setValue('prop3', v3);
//
// set value to a widget
// dijit.byId('widget1').set('checked', v3);
dijit.byId('widget_216')._setSeriesN(newValue, 2, false);
}

function onArray3xPropertyChanged( propertyName, newValue, oldValue) {
// var t = $TI.GUIVars;
// get value from another GUI variable
// var v2 = t.getValue('prop2');
// var v3 = newValue + v2;
//
// set value to another GUI variable
// t.setValue('prop3', v3);
//
// set value to a widget
// dijit.byId('widget1').set('checked', v3);
dijit.byId('widget_216')._setSeriesN(newValue, 2, true);
}

And here is the section of the .json file

{
"propertyName": "Array3y",
"serverBindName": "yc",
"widgetId": "prop",
"options": {
"onPropertyChanged": "onArray3yPropertyChanged",
"dataType": "Long"
}
},

{
"propertyName": "Array3x",
"serverBindName": "xc",
"widgetId": "prop",
"options": {
"onPropertyChanged": "onArray3xPropertyChanged",
"dataType": "Long"
}
}
]}

Thanks,

Myriam