Strings as Ticks scaling #88

Closed
dnschnur opened this Issue Sep 28, 2012 · 11 comments

Projects

None yet

1 participant

@dnschnur
Flot member

Original author: movin...@gmail.com (December 07, 2007 18:49:49)

You demonstrate that it is fine to specifically set the tick positions and
set them as strings.

For example I have dates in an array and am setting the ticks on the xaxis
like so:

xaxis:{
ticks: [[0, allLicenseDates[0]], [(0.0454), allLicenseDates[4]],
[(0.045
8), allLicenseDates[8]], [(0.04512), allLicenseDates[12]],
[(0.045
16), allLicenseDates[16]], [(0.045*21), allLicenseDates[21]]]
}

So a string of “Dec 6” appears at 0 on the x-axis. However, this
introduces overflow outside the margins in the graph if I dont calculate it
correctly. I would rather let Flot handle the spacing and scaling of the
graph instead of setting it myself so that the graph is more flexbile.
When I try to set it myself, the graph goes outside of its margins.

What syntax should I use for specifying strings on the x-axis and letting
Flot do the spacing/scaling?

Original issue: http://code.google.com/p/flot/issues/detail?id=9

@dnschnur
Flot member

From olau%iol...@gtempaccount.com on December 10, 2007 12:58:45
I intend to add proper date handling support in the near future. I already have
logics written up in Python, just need to put it into Javascript. That would probably
help. :-)

If you want to let Flot decide what it shows on the axis and just format/transform
the labels, the ticksFormatter callback is what you need. It requires you to be able
to go from an x value to a label.

Did this help? Otherwise I need a bit more info about what exactly Flot is doing
wrong and what you're trying to achieve (a screenshot would probably help).

@dnschnur
Flot member

From movin...@gmail.com on December 10, 2007 17:36:56
I fixed the issue of strings overflowing far outside the X-axis by manually setting
each tick. However, I get a strange line/fill overflow below the X-axis on only one
of my data sets. Please see the attached image for an example.

Also, can you be more specific on the ticksFormatter callback? I see in the docs it
takes a function, does this function make a number into a string? What exactly is
required? Thank you...the first build using flot is going well

@dnschnur
Flot member

From olau%iol...@gtempaccount.com on December 11, 2007 10:34:02
Can you post the data set used for that image? It's definitely possible that there's
a bug in the clipping algorithm for area graphs.

About the ticksFormatter, yep, you specify a function which gets the tick value (a
number corresponding to what you entered in the data set) and returns a string, e.g.
like this tick formatter which produces ticks that have a suffix of k, like "10k", "20k":

tickFormatter: function (val) {
return "" + val + "k";
}

@dnschnur
Flot member

From movin...@gmail.com on December 11, 2007 18:39:33
Sure, the data set for that graph is:

[[0.0, 14], [0.045, 13], [(0.0452), 8], [(0.0453), 5], [(0.0454), 4], [(0.0455),
4], [(0.0456), 7], [(0.0457), 8], [(0.0458), 9], [(0.0459), 9], [(0.04510), 12],
[(0.045
11), 2], [(0.04512), 2], [(0.04513), 4], [(0.04514), 4], [(0.04515), 8],
[(0.04516), 9], [(0.04517), 10], [(0.04518), 5], [(0.04519), 6], [(0.04520), 9],
[(0.045
21), 6]]

@dnschnur
Flot member

From movin...@gmail.com on December 17, 2007 20:44:12
Does anyone have any ideas?

@dnschnur
Flot member

From movin...@gmail.com on February 07, 2008 17:18:38
How is the date support coming? I've been using flot quite a bit.

@dnschnur
Flot member

From sabmann@gmail.com on February 20, 2008 08:19:04
Hi moninvan, can you also post the options you used?

@dnschnur
Flot member

From movin...@gmail.com on February 20, 2008 17:36:41
Sure.
allDates is an array containing strings in the format "month #".

I haven't look at this code in a while, but the 0.045*x is for manual scaling based
on a data set of 21 ticks. Hope that makes sense.

{
lines: { show: true, fill: true },
points: { show: false },
xaxis:{
ticks: [[0, allDates[0]], [(0.0454), allDates[4]], [(0.0458), allDates[8]],
[(0.04512), allDates[12]], [(0.04516), allDates[16]], [(0.04521), allDates[21]]]
},
yaxis:{
max:(numberMax+(.2
numberMax))
},
colors: ["#0270BD", "red"]
}

@dnschnur
Flot member

From olau%iol...@gtempaccount.com on March 06, 2008 17:18:53
Date support is in SVN now. I can't reproduce your problem with overflow below the x
axis in the latest release. Please barf if occurs in the future. I think I know what
you mean about the margin stuff. Flot didn't prune the available ticks. That should
be fixed too, so I'll close this bug now.

@dnschnur
Flot member

From movin...@gmail.com on March 06, 2008 20:40:51
Thank you... I cant wait for the new version.

@dnschnur
Flot member

From movin...@gmail.com on March 07, 2008 23:00:43
0.4 fixed all of my issues. well done!

@dnschnur dnschnur closed this Sep 28, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment