I have a very simple line graph I'm trying to create in gRaphael. My problem is that the first value of my graph is always placed right on the y-axis. Is there a way to add padding or an offset to the first point so that it's not on the y-axis?
One solution I've tried is to add another set of x values which are one less and one greater than my other line's x values but this screws up my x-axis labeling.
I've created a jsFiddle to illustrate my problem. In it the first graph is what I currently have and the second graph shows the problem with the solution described above.
(while @eterps suggestion is acceptable, and it's sometimes convenient to use a ready-made solution, i saw the need to offer a solution using gRaphaël, for the benefit of others tackling the same issue.)
... but this screws up my x-axis labeling
if by "screws up" you mean the missing values, you're almost there. just update the axisxstep value to 4, considering the extra 2 values added, and you're good to go (see the demo below).
if, on the other hand, you're referring to the excessive padding - i'd suggest moving to a more semantic depiction of values for the x-axis with dates, whilst applying date formatters for the presentation (labeling). Reason from Ex Ratione wrote about it in a comprehensive paper describing this method, among others (see link below).
after applying this technique, you can use the padding hack on the formatted date values, and achieve finer granularity, thus narrowing those ugly gutters. check out the second demo below for an illustration on how to get started on this.
Disclaimer: this approach requires Steven Levithan's Date Format to be included as an additional dependency. take that into consideration before slinging the code.
Demos:
References: