[Florian AuerParticipant]

Hello Hristo

Thx for the reply.
As far as i understood, the “render-reaction” of the charts axis depend on the unit-interval that has been set.
When this interval f.ex ist 50 and the max-value for the axis will be set in steps of 10 it will not always re-render.

Remark: What i see is, that even with lower value-ranges the x and y axis do not behave the same.
This can be seen here with ranges from 0 to 300 on both axis: https://jsfiddle.net/r3ufqxo1/9/

The chart re-renders on any x-axis change with step 10 but only on y-axis changes with size of the unitInterval.
Is that correct?

An if, should the min and max value of the y-axis, when read via API, not alwys give the value that is displayed?

[Florian AuerParticipant]

Hi Hristo

I minified the example to be easier to overview & reproduce.
https://jsfiddle.net/r3ufqxo1/6/

When you cklick the button, the y-axis sliders maximum will be moved a half tickDistance down. The chart also notices this due the y-axis max value changes but it does not rerender. So the displayed axis max value mismatches the one from the api.

The x-axis does not have this effect. Everey change from moving the slider results in a rerenderd chart.
Why is that so?

[Florian AuerParticipant]

Hi Dimitar

Yes, thats also the way i now had implemented.
But sad with this is, that all events attached to the slider will have also to be recreated.
So the logic for creating an updating a slider got more complicated.

[Florian AuerParticipant]

Hi Peter

Ok, but in the example at http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdropdownlist/jquery-dropdownlist-getting-started.htm?search= the dropdown-List scrolls correctly with the header when opened and the paged scrols down via mouse wheel.

So i thougt this should also be possible if the dropdown is nested inside a panel.

[Florian AuerParticipant]

Hello Dimitar

I recently updated my charts to version 3.9 of the library.
As for now, the event to set the cursor is still being fired, but I cannot see any effect in visualization.
Did here change something?

my code:

		var groups = $(fSettings.anchor).jqxChart('seriesGroups');
		if (groups.length > 0) {
			groups.forEach(function(element, index, array){
				element.click = function(e){
					/*....*/
				};
				//FIXME: no longer working in 3.9.0
				element.mouseover = function(e){
					$(fSettings.anchor).css('cursor', 'pointer');
				};
				element.mouseout = function(e){
					$(fSettings.anchor).css('cursor', 'default');
				};
			});
		}
		$(fSettings.anchor).jqxChart({seriesGroups: groups});

[Florian AuerParticipant]

Thx a lot

It seems that fixed it: http://jsfiddle.net/Lopvj8ds/4/

PS:
Sorry for the late response, was a week away fpr other business

[Florian AuerParticipant]

Thx for your reply Peter.
That’s what i thought… Thought of a possibility to aviod the manual calculation outside the chart.

[Florian AuerParticipant]

Hi Peter

Thx again for the fast reply

I think that is it… I took the JSOn definition from the Data sources example at http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-data-sources.htm where the source also does not define the type and thought that this would work correctly.

provided example:

// prepare the data
var source =
{
    dataType: "json",
    dataFields: [
        { name: 'empName' },
        { name: 'age' },
        { name: 'id', map: 'department>id' },
        { name: 'name', map: 'department>name' },
        { name: 'author' }
    ],
    localData: data
};
var dataAdapter = new $.jqx.dataAdapter(source);

fixed result: http://jsfiddle.net/v7pz74kz/24/

[Florian AuerParticipant]

Hello Peter

Thx for your reply

Short description at first:
The table i wanted to create should have values of multiple formats (number, date, currency, …) within the same column. That was the reason to put a format description into the data and let the cell renderer then build the formatted value out of the entry.
This seems to work for all rows except the first one.

The format definition for the first entry should be “0.00” beause the source array for the kpi “Girokonteneröffnungen/MAK” has this definition:

    {   
        trend:"1",
        stateSoll:true,
        infotext:"",
        kennzahl:"Girokonteneröffnungen/MAK",
        gewichtung:20,
        bewertung:3,
        id:84,
        soll:0.719,
        format:"0.00",
        gruppe:"BOF2",
        ist:0.197097,
        abweichung:72.58734353268429
    }

The dataFields array itself is defined inside the buildKpiTable function (old version, new example updated):

var source =
    {
        datatype: "json",
        datafields: [
            { name: 'kennzahl' },
            { name: 'bewertung' },
            { name: 'trend' },
            { name: 'ist' },
            { name: 'soll' },
            { name: 'abweichung' },
            { name: 'gewichtung' },
            { name: 'format' }
        ],
        localdata: fSettings.data
    };
if(fSettings.showInfoText){
	source.datafields.push({name: 'infotext'});
}
var dataAdapter = new $.jqx.dataAdapter(source);

The idea behind this was to define a function that builds the table with all specifications and later on change the data multiple times due the user interaction.
Therefor i thought a short definition of the new data adapter like

var source = {
    datatype: "json",
    localdata: data
};
$("#kzTabelle").jqxDataTable({
    source: new $.jqx.dataAdapter(source)
}); 

would be enough can i can omitt the dataFields array in this.

I changed the code now, so the dataFields array is always defined with all entries: http://jsfiddle.net/v7pz74kz/23/
But the format for the first row is stil not taken into account, i must have done it wrong :).

[Florian AuerParticipant]

Hi Peter

Yes just noticed, that i missed to add two prototype extensions for the Number object

http://jsfiddle.net/v7pz74kz/20/

Interesting for me is:
– when i stop inside the cellRenderer, rowData.format is “0” but should be “0.00” as given i the first JSON object ?!
– the second stop for the second array entry shows the format correctly as “0.00”
– may this have something to do with my problem?

cellsRenderer: function (row, column, value, rowData)
		        	{
		        		if(rowData.format != ""){
		        			var n = rowData.ist;
		        			if(!isNaN(n)){
		        				n = new Number(n);
		        			}
		        			return n.toFormattedString(rowData.format);
		        		}else{
		        			return value;
		        		}
		        	}

[Florian AuerParticipant]

Hi

I tried to get a JSFiddle example to work with the code extracted from the project.
But it seems every time my data object has more than one item, the table in the example does not load;
http://jsfiddle.net/v7pz74kz/18/

hmmm.. i don’t get behind this….inside the project it loads correctly

[Florian AuerParticipant]

Oops…

maybe I should read the Release notes earlier than trying to implement something
jQWidgets v3.5.0 Release, Sep-15-2014
What’s New:
– AngularJS Integration.
– ASP .NET MVC Integration.
– jqxNotification – new widget for displaying notifications and alerts.
– jqxGrid filter row options.
– jqxListBox, jqxDropDownList and jqxComboBox initialization from Select, UL or OL tags.
– jqxChart Alternating background colors and opacity for x and y axes.
– jqxChart Customizable symbol type in scatter and bubble series.
– 70+ New Examples.

Downloading new version….

[Florian AuerParticipant]

Hello Dimitar

I created a JSFiddle example with the code copied 1:1 from the project.

Result:
In JSFiddle the symbols are shown correctly.

This may drive me a little crazy, because in the project all diagramm markers are in the svg are declared as ‘circles’.
For me it looks like as the result of the “getRiskMatrixSeriesData()” function is somehow being ignored, also the size definition for the dots gets ignored inside the project and works well on JSFiddle. oO

Maybe it has something to do with the version?
The project in on version 3.4.0

[Florian AuerParticipant]

Hello Dimitar

The quotes result of the console.log(JSON.stringify(res)); call and how the firefox browser is representing the result.
As shown in the code snippet, the aray itself will be build without the quotes:

for(var j = 0; j < types.length; j++){
    res.push({
        dataField: types[j], 
        showLabels: true, 
        symbolSize: 5, 
        symbolType: symbols[(j % symbols.length)], 
        displayText: types[j], 
        labelsHorizontalAlignment: 'left',
        labelsOffset: {x: 15, y: 0},
        formatFunction: function (value, index) { 
            return jsonData[index].process;
        } 
    });
}

[Florian AuerParticipant]

Hello Dimitar

Thx for the reply, this works well.

Now I have another problem with the scatter plot.
I am also trying to specify an iteration for the “symbolTypes” that schould be used vor each datapoint.
Therefore a function to genereate the “series” object for the “seriesGroup” property has been implemented:

short decription:
– This function takes the jsonData given by the server
– it reads the different types that represent each a data point out of this
– for each of this types, it genereates a series entry and pushed this into an array
– each entry has a different symbolType defined by iterating through a symbols array with the possible values

code snippet:

var symbols = ['circle', 'square', 'diamond', 'triangle_up', 'triangle_down', 'triangle_left', 'triangle_right']
var types = [];
for(var i = 0; i < jsonData.length; i++){
    if($.inArray(jsonData[i].process , types) == -1){
        types.push(jsonData[i].process);
    }
}
var res = [];
for(var j = 0; j < types.length; j++){
    res.push({
        dataField: types[j], 
        showLabels: true, 
        symbolSize: 5, 
        symbolType: symbols[(j % symbols.length)], 
        displayText: types[j], 
        labelsHorizontalAlignment: 'left',
        labelsOffset: {x: 15, y: 0},
        formatFunction: function (value, index) { 
            return jsonData[index].process;
        } 
    });
}

Problem as is:
The result looks well but the properties for “symbolSize” and “symbolType” seem to have no effect on the scatter plot.
Each entry is displayed as circle as before.
What did i mess up?

jsonData example:

[
    {"probability":"140.00","slug":"private-finanzierung","relevance":"115.00","process":"Private Finanzierung","Private Finanzierung":"140.00","Gewerbliche Finanzierung":null,"Konsumentenkredit":null,"Sicherheitenbearbeitung":null},
    {"probability":"140.00","slug":"gewerbliche-finanzierung","relevance":"115.00","process":"Gewerbliche Finanzierung","Private Finanzierung":null,"Gewerbliche Finanzierung":"140.00","Konsumentenkredit":null,"Sicherheitenbearbeitung":null},
    {"probability":"145.00","slug":"konsumentenkredit","relevance":"115.00","process":"Konsumentenkredit","Private Finanzierung":null,"Gewerbliche Finanzierung":null,"Konsumentenkredit":"145.00","Sicherheitenbearbeitung":null},
    {"probability":"0.00","slug":"sicherheitenbearbeitung","relevance":"0.00","process":"Sicherheitenbearbeitung","Private Finanzierung":null,"Gewerbliche Finanzierung":null,"Konsumentenkredit":null,"Sicherheitenbearbeitung":"0.00"}
]

result example:

[
    {"dataField":"Private Finanzierung","showLabels":true,"symbolSize":5,"symbolType":"circle","displayText":"Private Finanzierung","labelsHorizontalAlignment":"left","labelsOffset":{"x":15,"y":0}},
    {"dataField":"Gewerbliche Finanzierung","showLabels":true,"symbolSize":5,"symbolType":"square","displayText":"Gewerbliche Finanzierung","labelsHorizontalAlignment":"left","labelsOffset":{"x":15,"y":0}},
    {"dataField":"Konsumentenkredit","showLabels":true,"symbolSize":5,"symbolType":"diamond","displayText":"Konsumentenkredit","labelsHorizontalAlignment":"left","labelsOffset":{"x":15,"y":0}},
    {"dataField":"Sicherheitenbearbeitung","showLabels":true,"symbolSize":5,"symbolType":"triangle_up","displayText":"Sicherheitenbearbeitung","labelsHorizontalAlignment":"left","labelsOffset":{"x":15,"y":0}}
]

[Author]

Posts