Compare Column values and create threshold

[vnistalaParticipant]

Hi Team,
I have been using this jqwidgets for few days, and i absolutely love this tool it gives so many options.
I have a data file in csv format. I’m trying to use the chart
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_dashboard_example.htm
so here the latencyThreshold is hardcoded to value 2. I would like to compare 3′rd column value with 2nd i.e If value is greater, then make the column red.
I have modified the code as per below but not giving me right results

series:
[
{
dataField: 'sla',
dataField: 'latency',
displayText: 'Response Time',
colorFunction: function (value,sla,itemIndex,serie, group) {
return (value > sla) ? '#CC1133' : '#55CC55';
}
}
],

2. Also how can we get values from csv file for function displayClusterMetrics() instead of hardcoded numbers in the code
Example: CSV data

Hierarchy-Creating New Entity Group,2,4.040,0.054676279971714134,195
Hierarchy-Save Group,2,3.188,0.05464718237726453,195
Logout,2,0.004,0.05467169646274124,195

Any help will be appreciated.
Regards,
Venkat

[HristoParticipant]

Hello Venkat,

The arguments that you set in the colorFunction callback are not correct (they depend on the position).
If you want to compare with values from another datafield, you should get from an another place, also from the DataAdapter (I allude “sla” if you set it in the DataAdapter).

About your second question, I would like to suggest you this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[vnistalaParticipant]

Hello Hristov,
Thanks for the response, i did not quite get when you said get it from another place. Did you mean to create another function of settings. Could you please help with an example.
Appreciate your response.
Regards,
Venkat

[HristoParticipant]

Hello Venkat,

I meant if you have localdata variable, then use it to compare in the colorFunction values with this one that you want (from ‘sla’ datafield).
Also, you could get all data from the DataAdapter on that way – var dataAdapter = new $.jqx.dataAdapter(source); var records = dataAdapter.records; and compare it with iteration (again in the ‘colorFunction’ callback).

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[vnistalaParticipant]

Hello Hristo,
Thanks for the response, i did from the DataAdapter per your suggestion, but for some reason seems like it is not comparing with values from the ‘sla’ 2nd column in csv file. It’s working when i have the data in the function itself, but i’m getting the data from csv. There must be some silly mistake happening from my side not sure.
Here is the code

function displayServerResponseMetrics() {
				  var sampleData = {
					datatype: "csv",
                    datafields: [
                    { name: 'trx' },
		    { name: 'sla' },
                    { name: 'latency' },
                    { name: 'requests' }
                    ],
					url: 'nfr.txt'
					};					
						
					var dataAdapter = new $.jqx.dataAdapter(sampleData, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + sampleData.url + '" : ' + error); } });				
					 
					//var records = dataAdapter.records;
					//var length = records.length;
					//for (var i = 0; i < length; i++) {
					//var record = records[i];
					//var sla = record.sla;					
					//var latencyThreshold = 5;					
				
                var settings = {
                    title: 'Throughput & 90% Response Time',
                    description: '(Entity,FA & RG transactions)',
                    enableAnimations: true,
					showLegend: true,
                    showBorderLine: true,
                    backgroundColor: '#2e3338',
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 5, top: 5, right: 5, bottom: 5 },
                    source: dataAdapter,
                    xAxis:
                    {
                        dataField: 'trx',
						unitInterval: 1,
						valuesOnTicks: true,
                        displayText: 'TX',
						
						//formatFunction: function(){},
						//formatFunction: function() {
						//return " "; // a space, not an empty string
						//},
						
						labels: {
                        angle: -0,
						visible: false,
                        rotationPoint: 'topright',
                        offset: { x: 0, y: -25 }
                    }					                    
                    },
					
					colorScheme: 'scheme02',
                    seriesGroups:
                        [
                            {
                                type: 'column',
								toolTipBackground: "#2e3338",
                                valueAxis:
                                {	
                                    title: { text: 'Response Time [sec]<br>' },
                                    position: 'left'
                                },
                                toolTipFormatSettings: { sufix: ' sec'},
                                series:
                                    [                                        
										{
                                            dataField: 'sla',
											dataField: 'latency',											
											displayText: 'Response Time',
											opacity: 1,											
                                            colorFunction: function (value,itemIndex,serie, group) {															
											if (isNaN(itemIndex))
                                                    return '#55CC55';                                            
											 return (value > dataAdapter.records[itemIndex]['sla']) ? '#CC1133' : '#55CC55';
                                            }
                                        }
                                    ],									
                                bands:
                                [
                                    {
                                        //minValue: latencyThreshold,
                                        //maxValue: latencyThreshold,
										minValue: 'sla',
                                        maxValue: 'sla',
                                        lineWidth: 1,
                                        color: 'red'
                                    }	
                                ]
                            },
                            {
                                type: 'spline',
								toolTipBackground: "#2e3338",
                                valueAxis:
                                {
                                    title: { text: 'Transactions per second' },
                                    position: 'right'
                                },
									toolTipFormatSettings: { sufix: ' trx/s'},
                                series:
                                    [
                                        {
                                            dataField: 'requests'	,
											displayText: 'Transactions per sec',
                                            lineColor: '#ffff1a',
                                            lineWidth: 3
                                        }
                                    ]
                            },
                        ]
                };  //}//end for loop
                $(chartContainer7).jqxChart(settings);
				
            } //chartContainer5 Chart ending

I tried with ‘color functionreturn (value > dataAdapter.records[itemIndex]['sla']) ? '#CC1133' : '#55CC55';
but does’t seem to be working.

Thanks in advance
Regards,
Venkat
`

[HristoParticipant]

Hello Venkat,

Please, take a look at the example below:

var records = dataAdapter.records;
var length = records.length;
for (var i = 0; i < length; i++) {
	var currentItem = records[i];
	var currentItemSlaValue = currentItem['sla'];
	if (value > currentItemSlaValue) {
		return '#CC1133';
	} else {
		return '#55CC55';
	}
}

(try to implement this in the colorFunction)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[vnistalaParticipant]

Thanks Hristo for the help.
Earlier I had made some changes in the color function itself and that worked

 colorFunction: function (value,itemIndex,serie, group) {
      if (!isNaN(itemIndex)){
				var records = dataAdapter.records;
				var index = Number(itemIndex);	
				var record = records[index];							
				var nsla = Number(record.sla);
						}											
				if (isNaN(itemIndex))
                  return '#55CC55';
return (value > nsla) ? '#CC1133' : '#55CC55';								 
                                            } 

I am trying to implement it in the grid but having some difficulties. link below

http://www.jqwidgets.com/community/topic/compare-column-cell-b-with-column-cell-a-turn-cell-value-to-red-if-greater/

Appreciate your help

Regards,
Venkat

[Author]

Posts