Odd Behavior from Scatter Chart

[meubanksMember]

I am trying to create a simple scatter chart. Below is the code I am using

jqxChart Scatter Series Example

$(document).ready(function () {
// prepare chart data as an array
var sampleData = [
{"y":"1.017033339","x":"0.694605199"},
];
// prepare jqxChart settings
var settings = {
title: "Estimated Price",
source: sampleData,
showLegend: false,
categoryAxis: {
text: "Estimated Price",
dataField: 'x',
tickMarksStartInterval: 0,
tickMarksInterval: .2,
unitInterval: .2,
showGridLines: false,
formatSettings: {decimalPlaces: 1},
minValue: 0,
maxValue: 3
},
seriesGroups: [
{
type: 'scatter',
valueAxis: {
showGridLines: false,
unitInterval: 0.2,
minValue: -0.2,
maxValue: 3.2,
description: 'Actual Price',
formatSettings: {decimalPlaces: 1},
},
series: [{
dataField: 'y',
radius: 3,
}]
}
]
};
// setup the chart
$('#jqxChart').jqxChart(settings);
});

The code is working but the chart isn’t coming out like I think it should. Some of the issues I am noticing are:

The point is in wrong location. When you hover over the point it gives you what the coordinates. Those coordinates don’t line up with the tick marks on the category axis. A side note on this is that my values seem to be rounded as well. Right now I’m not as worried about that as I am getting the point in the correct location.
There are to many tick marks for category axis. I have a max value set at 3. When I count the tick marks there are enough for a max value of 4 with my given interval. What I expected was to be able to put a max value of 3 and have my tick marks stop at 3.0.
The numbers appear to be centered instead of directly under the tick mark they are associated with. This is making the chart very hard to read. I understand that sometimes you want the label centered and sometimes you want it to line up. I just don’t see a setting that lets the user specify their preference.
The line for the x-axis is not present when grid lines are turned off.

I would appreciate any insight as to what I may be doing wrong or what I may need to do that I’m not doing to get my chart to come out like I want it to.

Thanks,
Millisa

[Peter StoevKeymaster]

Hi Millisa,

We confirm the reported issue regarding the tick marks and numbers. We also need to enhance the labels positioning and make it more customizable. The rounding of the numbers is by default and you have actually specified a rounding by setting the decimalPlaces. I’ve created work items regarding these issues and we will fix it in a future version of the jqxChart widget. I will do my best to update this topic when the reported issues are resolved.

Thanks you for the feedback. We appreciate it!

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[meubanksMember]

Hi Peter,

Thanks for the update. I will look forward to the updates.

I was also looking at the area charts and noticed an issue I think parallels with this one. The following code should render a small area around the coordinates (0.0, 0.0). Instead it creates a line along the x-axis. Just looking at it that line seems to be a similar “offset/positioning issue” as I observed in the scatter chart.


var areaData = [ { "x":"0.0", "y":"0.0"} ];
var areaSettings = {
title: title,
source: areaData,
showLegend: false,
background: background,
categoryAxis: {
dataField: 'x',
description: title,
tickMarksStartInterval: tickMarksStartInterval,
tickMarksInterval: unitInterval,
unitInterval: unitInterval,
showGridLines: true,
formatSettings: {decimalPlaces: 1},
minValue: minXValue,
maxValue: maxXValue
},
colorScheme: 'scheme02',
seriesGroups: [
{
type: 'stackedarea',
valueAxis: {
description: valueText,
showGridLines: true,
unitInterval: unitInterval,
minValue: minYValue,
maxValue: maxYValue,
formatSettings: {decimalPlaces: 1},
},
series: [{ dataField: 'y', opacity: 0.7}]
}
]
};
$('#jqxAreaChart').jqxChart(areaSettings);


Millisa

[Author]

Posts