Scatter plot: custom label text

[Florian AuerParticipant]

Hi.

I have build a scatter plot with a categoryAxis description in replacement for the xAxis to have both axis with numeric values and showing one dot per data series. This in first looks good
When I set the ‘showLabels’ property, the value for the y-axis is shown beside the dots.
But I want to have the the value of the ‘dataField’ or ‘displayText’ shown here as it is also shown in the legend when visible.

Idea behind:
– If the legend is visible, no labels are shown
– If the legend is hidden, the description for each point is shown as label

here some code snippets to show how the chart has been build:
remark: some values are stored in a ‘fSettings’ named object, that is not described in the snippet :).

var seriesGroup = 
    [
        {
            type: 'scatter',
            valueAxis:
            {
                 unitInterval: 50,
                 minValue: fSettings.valueRangeMin,
                 maxValue: fSettings.valueRangeMax,
                 description: fSettings.valueAxisDescription
            },
            //showLabels: true,
            series: seriesData //defined outside, described below
         }
     ];
var settings = {
        title: fSettings.title,
        description: fSettings.description,
        enableAnimations: true,
        showLegend: false,
        padding: { left: 6, top: 16, right: 16, bottom: 6 },
        titlePadding: { left: 0, top: 0, right: 0, bottom: 0 },
        showBorderLine: false,
        showToolTips: fSettings.showToolTips,
        source: dataAdapter,
        categoryAxis: {
            dataField: fSettings.categoryAxisDataField,
            valuesOnTicks: true,
            minValue: fSettings.categoryRangeMin,
            maxValue: fSettings.categoryRangeMax,
            unitInterval: 50,
            description: fSettings.categoryAxisDescription
        },
        seriesGroups: seriesGroup
};

the (simplified) data for the ‘dataAdapter’ looks like:

[
    { probability: "120.00", process1: "115.00", process2: null, process3: null, process4: null, process5 null },
    { probability: "118.00", process1: null, process2: "150.00", process3: null, process4: null, process5 null },
    { probability: "75.00" , process1: null, process2: null, process3: "32.00", process4: null, process5 null },
    { probability: "240.00", process1: null, process2: null, process3: null, process4: "96.75", process5 null },
    { probability: "55.00" , process1: null, process2: null, process3: null, process4: null, process5 "250.00" }
]

the (simplified) data for the ‘seriesData’ variable looks like:

[
    { dataField:"process1", displayText:"process1"}, 
    { dataField:"process2", displayText:"process2"}, 
    { dataField:process3, displayText:"process3"},
    { dataField:"process4", displayText:"process4"},
    { dataField:"process5", displayText:"process5"}
]

[DimitarParticipant]

Hello DesMas,

You can modify the displayed text of the labels in each series’ formatFunction, i.e.:

{ dataField: "process1", displayText: "process1", formatFunction: function (value, index) {
    // your code here
}},

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[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}}
]

[DimitarParticipant]

Hi DesMas,

The output series array should be without quotes around series property names, i.e. dataField, not "dataField". Please try it this way and share your feedback.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[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;
        } 
    });
}

[DimitarParticipant]

Hi DesMas,

Would you be able to create a JSFiddle example with some sample data which demonstrates the issue?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[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]

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….

[Author]

Posts