[meubanksMember]

Peter,

When I run the code below I have and issue seeing the points for all the lines. The top lines are fine. But as you go down the points no longer show up. I’m not sure if I’m doing something wrong or if this is a bug.

Thanks,
Millisa


$(document).ready(function () {
var data = {
"series": [{"displayText": "1","dataField": "1"},
{"displayText": "2","dataField": "2"},
{"displayText": "3","dataField": "3"},
{"displayText": "4","dataField": "4"},
{"displayText": "5","dataField": "5"},
{"displayText": "6","dataField": "6"},
{"displayText": "7","dataField": "7"},
{"displayText": "8","dataField": "8"},
{"displayText": "9","dataField": "9"},
{"displayText": "10","dataField": "10"},
{"displayText": "11","dataField": "11"},
{"displayText": "12","dataField": "12"}
],
"odds": [
{"label": "Cycle 0 3:04:50PM","1": 7.41,"2": 3.07,"3": 0.0,"4": 38.9,"5": 4.5,"6": 0.0,"7": 0.82,"8": 7.01,"9": 9.22,"10": 22.73,"11": 5.38,"12": 0.91},
{"label": "Cycle 1 3:04:02PM","1": 7.56,"2": 2.94,"3": 0.0,"4": 34.16,"5": 4.75,"6": 0.0,"7": 0.77,"8": 6.57,"9": 9.36,"10": 26.32,"11": 6.35,"12": 1.17},
{"label": "Cycle 2 3:03:31PM","1": 7.38,"2": 3.02,"3": 0.0,"4": 28.96,"5": 4.23,"6": 0.0,"7": 0.94,"8": 6.34,"9": 10.0,"10": 31.36,"11": 6.44,"12": 1.28},
{"label": "Cycle 3 3:03:02PM","1": 8.34,"2": 3.7,"3": 0.0,"4": 27.56,"5": 5.61,"6": 0.0,"7": 1.68,"8": 9.29,"9": 10.81,"10": 24.12,"11": 6.83,"12": 2.02},
{"label": "Cycle 4 3:02:31PM","1": 9.09,"2": 3.71,"3": 0.0,"4": 19.88,"5": 6.95,"6": 0.0,"7": 1.88,"8": 11.21,"9": 10.07,"10": 28.02,"11": 6.62,"12": 2.51},
{"label": "Cycle 5 3:02:02PM","1": 8.67,"2": 4.01,"3": 0.0,"4": 20.32,"5": 7.35,"6": 0.0,"7": 1.99,"8": 10.39,"9": 10.16,"10": 27.51,"11": 6.77,"12": 2.77},
{"label": "Cycle 6 3:01:31PM","1": 8.93,"2": 4.23,"3": 0.0,"4": 20.1,"5": 7.73,"6": 0.0,"7": 2.02,"8": 10.05,"9": 10.39,"10": 26.89,"11": 6.79,"12": 2.81}
],
"maxValue": 40
}

var settings = {
title: "Cyclical Odds",
showLegend: true,
padding: { left: 5, top: 5, right: 11, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
background: 'transparent',
borderColor: 'transparent',
source: data.odds,
categoryAxis:
{
dataField: 'label',
showTickMarks: true,
showGridLines: true
},
colorScheme: 'scheme01',
seriesGroups:
[
{
type: 'line',
valueAxis:
{
unitInterval: 2,
minValue: 0,
maxValue: data.maxValue,
displayValueAxis: true,
description: '% of Net Win pool',
axisSize: 'auto'
},
series: data.series
}
]
};

$('#jqxLineChart').jqxChart(settings);
});


[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

[meubanksMember]

Have you tried using jQuery to set the div’s size based on the client width?
$(‘#jqxChart’).width(‘desired size based on client width’);
$(‘#jqxChart’).height(‘desired size based on client height’);

[Author]

Posts