I have a jqPlot line plot which is drawing beautifully, but I cannot get it to draw quite to the edge of the div it’s contained in (which is critical to my application). I’ve tried every option for it that I can that has anything to do with removing margins, padding, etc., and there’s still a fairly significant gap at the end. Also, I have confirmed for sure that the div itself reaches all the way to the right edge of the page. Below is my options code for the plot:
optionsObj = {
stackSeries: true,
axesDefaults: {
show: false,
showTicks: false,
showTickMarks: false
},
axes: {
grid: {
drawBorder: false
},
xaxis: {
pad: 0,
tickOptions: {
showGridline: false
}
},
yaxis: {
pad: 0,
tickOptions: {
showGridline: false
}
}
},
grid: {
background: '#ffffff',
borderColor: '#888888',
borderWidth: 0.5,
shadow: false
},
seriesDefaults: {
lineWidth: 0.5,
color: '#1A95ED',
fill: true,
markerOptions: {
show: false
}
},
series: seriesGroup,
gridPadding: { top: 0, right: 0, bottom: 0, left: 0 }
};
A picture can be found here: https://www.dropbox.com/s/js32405l6z16f2m/Capture.PNG
The slider is used to select a subset of this graph, which is graphed in a larger plot above. The problem is, because the graph is slightly scaled to the left and doesn’t fill the same length as the slider, the selection is off. The left handle, for example, thinks it’s just to the left of the second peak, and the right handle thinks it’s just to the left of the fourth peak.
For those unfamiliar with jqPlot, there is a div declared:
<div id="overview" style="width:100%;height:200px"></div>
Which is drawn to by the function call:
$.jqplot('overview', eval('([' + sessionStorage.throughputData + '])'), optionsObj);
There is no CSS being applied to the chart other than the “style” attribute in the HTML declaration.
I noticed that the amount that the line was off would change depending on how many data points were in the chart. I did some experimenting, and eventually discovered that jqPlot, when deciding how many pixels each unit should get, tried to gravitate towards “nice” numbers of units for the total width of the graph. For example, when I had 1440 data points, the range of the graph itself would be 1600, and my data wouldn’t go all the way to the end. When I had 2880 data points, the range of the graph would be 3000, and once again my data wouldn’t fill it, but the amount by which it was off would change. I ended up manually setting the “min” and “max” values of the graph in units to match my data, and it was fixed.