jQWidgets Forums
Forum Replies Created
-
Author
-
Thanks for confirming quickly.
It’s not a show stopper, but it looks silly.
I have a few multi header grids using columnsgroup.
Some headers need multiple rows to be displayed entirely, which forces me to increase the columnsheight setting.
As a work around now, I play around with the font size, but there’s a limit to what this can achieve…Hi! this is an old post so i’m wondering if this feature was enabled since then. Thanks for your help.
April 12, 2016 at 1:15 pm in reply to: colorFunction for conditional colors colorFunction for conditional colors #83401Version 4.1.1 fixes it, thanks!
April 11, 2016 at 1:24 pm in reply to: colorFunction for conditional colors colorFunction for conditional colors #83355Hi!
I had an “Eureka” moment this morning and it worked.
Here’s the colorFunction I had to use to fix it, where el_2 is another field of the csv “row”.
colorFunction: function (value, itemIndex, serie, group) { if (isNaN(itemIndex)) return '#55CC55'; return (dataAdapter.records[itemIndex]['el_2'] > 0) ? '#CC1133' : '#55CC55'; }I do have another problem though as the page now returns this error message:
“Error: Invalid value for <path> attribute d=”M87.5,387.5 QNaN,NaN 153.5,377.5 QNaN,NaN 153.5,377.5 ”The following code, generates this error message too. It’s coming from the “javascript_chart_column_range.htm” example, where i add 2 fields in the data. el_1 and el_2. el_1 is a value i want displayed on the chart as a scatter point and el_2 is a 0 or 1 value that has to be used to specify the scatter point color.
<!DOCTYPE HTML> <html lang="en"> <head> <title id='Description'>Chart with Range Column Series</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = [ { "month": "Jan", "min": -1.9, "max": 3.7, "avg": 0.2, "el_1": -4.0, "el_2": 1 }, { "month": "Feb", "min": -0.9, "max": 5.9, "avg": 1.1, "el_1": -2.7, "el_2": 1 }, { "month": "Mar", "min": 0.8, "max": 9.8, "avg": 4.9, "el_1": 2.1, "el_2": 0 }, { "month": "Apr", "min": 4.1, "max": 13.9, "avg": 8.7, "el_1": 8.9, "el_2": 0 }, { "month": "May", "min": 8.0, "max": 18.4, "avg": 13.1, "el_1": 14.1, "el_2": 0 }, { "month": "Jun", "min": 11.3, "max": 22.2, "avg": 16.6, "el_1": 22.8, "el_2": 1 }, { "month": "Jul", "min": 13.3, "max": 25.3, "avg": 18.4, "el_1": 14.1, "el_2": 0 }, { "month": "Aug", "min": 13.0, "max": 24.4, "avg": 17.6, "el_1": 13.1, "el_2": 0 }, { "month": "Sep", "min": 10.3, "max": 20.8, "avg": 14.3, "el_1": 11.8, "el_2": 0 }, { "month": "Oct", "min": 6.6, "max": 14.9, "avg": 9.2, "el_1": 10.9, "el_2": 0 }, { "month": "Nov", "min": 2.1, "max": 8.4, "avg": 4.2, "el_1": 10.0, "el_2": 1 }, { "month": "Dec", "min": -0.5, "max": 4.5, "avg": 1.5, "el_1": 3.7, "el_2": 0 } ]; var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) { var dataItem = data[itemIndex]; return '<DIV style="text-align:left"><b>Month: ' + categoryValue + '</b><br />Min: ' + dataItem.min + '°<br />Max: ' + dataItem.max + '°<br />Average: ' + dataItem.avg + '°</DIV>'; }; // prepare jqxChart settings var settings = { title: "Weather in Geneva, Switzerland", description: "Climatological Information about Geneva", enableAnimations: true, showLegend: true, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, enableCrosshairs: true, source: data, colorScheme: 'scheme05', xAxis: { dataField: 'month', unitInterval: 1, gridLines: { step: 3 } }, valueAxis: { minValue: -5, maxValue: 30, unitInterval: 5, title: { text: 'Temperature [C]<br>' }, labels: { horizontalAlignment: 'right', formatSettings: { sufix: '°' } } }, seriesGroups: [ { type: 'rangecolumn', columnsGapPercent: 50, toolTipFormatFunction: toolTipCustomFormatFn, series: [ { dataFieldTo: 'max', displayText: 'Temperature Range', dataFieldFrom: 'min', opacity: 1 } ] }, { type: 'spline', toolTipFormatFunction: toolTipCustomFormatFn, series: [ { dataField: 'avg', displayText: 'Average Temperature', opacity: 1, lineWidth: 2 } ] }, { type: 'scatter', series: [ { dataField: 'el_1', displayText: 'Element 1', symbolSize: 3, colorFunction: function (value, itemIndex, serie, group) { if (isNaN(itemIndex)) return '#55CC55'; return (data[itemIndex]['el_2'] > 0) ? '#CC1133' : '#55CC55'; } } ] } ] }; // setup the chart $('#chartContainer').jqxChart(settings); }); </script> </head> <body class='default'> <div id='chartContainer' style="width:850px; height:500px"> </div> </body> </html>Thanks Vladimir.
I used “alasql” third-party library to sort my records as such:var dataAdapter = new $.jqx.dataAdapter(source, {
beforeLoadComplete: function (records) {
var sorted_records = alasql(‘SELECT * FROM ? ORDER BY PROJECT_PEATS DESC, PROJECT_MER DESC, PROJECT_NAME ASC’,[records]);
records = sorted_records;
return records;
}
});In my application, I’ve tied an function in the “loadComplete” event of the same DataAdapter. This function finds the rowID of a specific record (whatimlookingfor) and then applies the “selectrow” method find get it. It worked well until I implemented the “beforeLoadComplete” callback function above. The rowID I now get is the one before the records are sorted. Can you help me sort this out?
var object = dataAdapter_grid.records;
for (var i = 0; i < object.length; i++)
{
var str = object[i].fieldimlookinginto;
if(str == whatimlookingfor){ rowID=object[i].uid; break;}
}
$(‘#jqxgrid’).jqxGrid(‘selectrow’, rowID);Thanks Peter, for the benefit of others, I enhanced my fiddle with this concept. Works like a charm.
Thanks Peter,
Would you mind pointing me to an example in the jqWidget documentation or quickly modify the fiddle to demonstrate what you mean?
That would help me greatly, thanks!jb
July 6, 2015 at 6:47 pm in reply to: Grid validation for all cells Grid validation for all cells #73417July 6, 2015 at 6:47 pm in reply to: Grid validation for all cells Grid validation for all cells #73416May 28, 2015 at 7:41 pm in reply to: How to show tooltip on grid column headers How to show tooltip on grid column headers #71751Was this answered? I have the same question but can’t find an answer… help please!
April 17, 2015 at 7:19 pm in reply to: custom rendering list with JSON/PHP custom rendering list with JSON/PHP #70021Helped me too, thanks!
October 11, 2013 at 12:23 pm in reply to: valueAxis (y axis) integer valueAxis (y axis) integer #30603Works like a charm, many thanks Dimitar, you rock!
September 17, 2013 at 6:37 pm in reply to: Header Height & Showfilterrow Header Height & Showfilterrow #29143Hello,
I’m facing the same issue. Your fix works with Chrome, but doesn’t work with IE8. Is there another work around?
ThanksJune 26, 2013 at 6:05 pm in reply to: Filled between curves graph Filled between curves graph #23927I see that 2.9.0 introduced precisely this graph style (/javascript_chart_column_range.htm), that’s excellent news! One small problem though: at the end of line #59 of the htm demo, there’s a “,” which causes problems for IE. ( gridLinesColor: ‘#888888’, )
April 12, 2013 at 3:20 pm in reply to: Filled between curves graph Filled between curves graph #19120Hi! when can I expect an answer about this? Thanks!
-
AuthorPosts