CODEWITHSUNDEEP
jqplot
Pod
Pod

Reputation: 968

jqplot - How to make a very dense chart look good?

I have a simple date chart with quite a lot of data. The problem is that I have a limited area to draw and when there's so much data the ticks with the date of the series overlap. Autoscale seems to help to some degree with still the dates are to close. Also even if the number of ticks decreases automatically the number of lines in the grid stays the same making it a solid color instead of a grid.

Is there a way to make the graph bellow look good?

1- Have same number of lines in the grid as dates in the ticks 2- Reduce the number of ticks to get more space in between

I've tried limiting number of ticks with numberTicks but then the ticks go away, or just shows them starting from the first tick and omitting the rest. Tried to play with syncticks and different parameters but didn't manage to fix it. Maybe I'm feeding the parameters wrongly.

I have created a pastebin of the code to get this graph, it can be found here: http://pastebin.com/zVRN8dJy

Any hints anyone?

The only alternative I see is doing the distributing right from the server side but I have several combinations to handle and having the distribution done by jqplot would simplify a lot the things. I'm using the latest version of jqplot, I'm on Snow Leopard and the problem is not browser dependent.

Thanks.

Example plot

Upvotes: 1

Views: 1270

Answers (2)

Alex
Alex

Reputation: 421

You might be using the numberTicks wrong. The way to use it is putting it as a parameter for xaxis like

xaxis: {
numberTicks: 20,

follow up by other params. If that's not working I suggest you remove the other properties for the jQplot to find which one is interfering.

The other thing you can do(workaround) if you can't get the numberTicks to work for some reason. This limits the source data from the array.

var series1 = [//your data//]

var smallerArr = [];

for (var i = 0; i < series1.length; i = i+10) {
    smallerArr.push(series1[i]);
};

Upvotes: 0

John Judd
John Judd

Reputation: 760

First thing, can you limit the range of data? You have approximately 50 data points there. Limiting to 25 would make the graph much neater.

If that is not an option you need to control the labels yourself.

There is an option

ticks: [],      // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
                // array of ticks to use.  Computed automatically.

Use the 2D tick option setting each value and label yourself, do something like

ticks: [[1, 'label 1'], [2, ''], [3, ''], [4, 'label 4'], [5, '']...]

to structure the labels before creating the graph.

I would also suggest that in your graph you lean the label text at an angle, not straight down. That is easier to read than vertically, at least better than craning my neck.

Upvotes: 1

Related Questions