jQWidgets Forums

Forum Replies Created

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • in reply to: Chart with grid not working Chart with grid not working #92317

    vnistala
    Participant

    Hello Hristo,
    There is no error message as such, but when i select the filter in the grid the chart is blank. The data is from csv file and looks like below

    User Login,0.536,1.53,6.786
    Entity-Search entity,1.044,1.536,2.549
    Entity-Click on 'Create Entity' button,0.038,0.453,1.607
    Entity-Quick add entity and go into Manage information page ,1.36,4.408,14.441
    Entity-Input industry code,0.076,0.641,3.394
    Entity-Navigates to Manage Hierarchy page,0.077,0.642,1.721
    Entity-Update entity basic information,1.203,2.321,8.733
    Hierarchy-Navigates to Manage Hierarchy page,0.052,0.114,1.126
    Hierarchy-Switch hierarchy type,0.006,0.109,0.465
    Hierarchy-Add relationship,1.611,3.158,9.562

    Please let us know
    Regards,
    Venkat


    vnistala
    Participant

    Sure thanks Hristo added a new post in charts section

    http://www.jqwidgets.com/community/topic/chart-with-grid-not-working/

    Regards,
    Venkat


    vnistala
    Participant

    Hello Hristo,
    Yes that’s what the error tells, so when i put jqxgrid in double quotes it worked.
    var sla = $("#jqxGrid").jqxGrid('getcellvalue', row, 'sla');

    I was trying some cool options from jqwidgets, like when we turn on the filter function in grid the chart should change based on the filter, but for some reason i’m getting blank in chart. Am i missing something.
    example:

    $("#jqxGrid").on('filter', function () {
                    var rows = $("#jqxGrid").jqxGrid('getrows');
                    var chart = $(chartContainer7).jqxChart('getInstance');
                    chart.source = rows;
                    chart.update();
                }); 

    I would like to thank and appreciate for all the help provided so far.
    Regards,
    Venkat


    vnistala
    Participant

    Hello Hristo,
    Yes it makes sense, added the same in the grid cellclass.
    I saw another example
    http://www.jqwidgets.com/community/topic/grig-cell-styling/

    var cellclass = function (row, columnfield, value) {
                    var QuantityPerUnit = $('#jqxgrid').jqxGrid('getcellvalue', row, "QuantityPerUnit");
                    var UnitPrice = $('#jqxgrid').jqxGrid('getcellvalue', row, "UnitPrice");
                    if (QuantityPerUnit <= UnitPrice) {
                        return "red";
                    };
                }

    Followed the same in my code but getting the following error.

    Uncaught Error: Invalid Selector – #jqxgrid! Please, check whether the used ID or CSS Class name is correct.
    at m.fn.init.a.fn.(anonymous function) [as jqxGrid] (http://10.10.122.84:8080/sample-tabs/jqwidgets/jqxcore.js:7:55680)

    Appreciate your help and responses.
    Regards,
    Venkat


    vnistala
    Participant

    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


    vnistala
    Participant

    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
    `


    vnistala
    Participant

    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

    in reply to: Changing Font Size Changing Font Size #92033

    vnistala
    Participant

    Hello Dimitar,
    Thanks for the post and suggestions. I’m using jqx.metrodark.css, i guess we can also increase the fonts in this css file
    Regards,
    Venkat

    in reply to: Changing Font Size Changing Font Size #91876

    vnistala
    Participant

    Hello Dimitar,
    I have a question on font-size, how can we increase for jqx-grid.
    I did the same like below but does’t seem to work
    <style type=”text/css”>
    .jqx-grid-header, .jqx-grid-column-header
    {
    font-size: 16px;
    }
    </style>

    Any help is appreciated.
    Thanks,


    vnistala
    Participant

    Hello Peter,
    I have been using this jqwidgets for last week or so, and i absolutely love this tool it gives so many options.
    I have a question though. This may be an old thread but may be on the same context. 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. If value is greater, then make the column red.
    2. Also how can we get values from csv file for function displayClusterMetrics() instead of hardcoded numbers in the code

    I have modified the code as 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’;
    }
    }
    ], `

    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

Viewing 10 posts - 1 through 10 (of 10 total)