2

i would like to know how to set the correct padding values to a jqplot axis so that points aren't rendered on the borders.

this is the code i have

yaxis:{     
    max: 1,
    min: 200,
    numberTicks: 5,
    tickOptions:{
        formatString:'%i'
    }
 }

this displays an inverted axis going from 200 on the bottom to 1 on the top. values vary also from 1 to 200. i have tried with maxPad, minPad and even setting the ticks manually with ( ticks: ['200','150','100','50','1'] ) but no luck so far.

thanks in advance :)

agamesh
  • 559
  • 1
  • 10
  • 26
Keleth
  • 23
  • 1
  • 5

1 Answers1

1

That was interesting and relaxing at the same time. The answer to your problem is obvious, since the padding settings are apparently ignored when setting min/max for an axis. Therefore, what you should use to move points away from the border is just increase min/max values just like in the code.

First graph has min/max increased to move the points away from the borders of the plot, the below one (created for the same data) does not.

To avoid this sort of issues and manual setting of these parameters why don't you have a method which could from the given data calculate and return min/max. Then in your graph for each of the values you apply the gap (pad) you like. Just as it is done with use of the minMax(data) method in the code.

BTW: Thanks for teaching me how to invert values of a plot I didn't know this trick. :)

EDIT

Please see another version which offers a solution that doesn't involve manipulating with the jqPlot script.

In this approach I am basically hiding the unwanted value labels, tick marks still are there. I am afraid that without interacting with canvas of the plot you cannot remove those unwanted ticks.

Boro
  • 7,913
  • 4
  • 43
  • 85
  • thanks for your reply :) as you say, the solution was obvious, but it doesn't work :P
    if i increase or decrease min or max values with the tick array present, the axis just stays the same, and if i change the values with numberticks option instead of the tick array it displays the new min and max value on the axis, which i don't want to. the values on the axis must stay with 1 and 200 on the edges.
    thanks!     – Keleth May 04 '12 at 16:03
  • But cant you just also modify accordingly the ticks just by adding to the tick array one more tick to the front and to the back of it? This should work similarly. BTW can you post a sample code on http://jsfiddle.net/ so we can work on it from there? – Boro May 04 '12 at 16:15
  • yes, but that would draw those new ticks on the axis, wouldn't it? and showing a negative value in the axis for a value that is always between 1 and 200 is kinda pointless :/ – Keleth May 04 '12 at 16:19
  • I get you, I think. Can you try to get a sample code to me? I think I might have a solution, but I would like to have a complete picture of your problem before I try anything. For example, I didn't know till now that you actually mind having negative values present in your plot :) – Boro May 04 '12 at 16:21
  • x axis is actually a dateaxisrendered, but i couldn't make it work on jsfiddle so i changed the values to simple numbers ^^http://jsfiddle.net/keleth/axeSx/ – Keleth May 04 '12 at 16:43
  • I am looking at it, in the mean time a quick comment. DateAxisRenderer didn't work because the `url` needs to direct at the `raw` js, like this: https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.dateAxisRenderer.js – Boro May 04 '12 at 18:06
  • Keleth please see my **EDIT**. – Boro May 04 '12 at 18:35
  • thank you very much :D i'll stick to your solution. i owe you one ;) – Keleth May 04 '12 at 18:45