I have an issue with a jqplot graph. The issue is that ticks numbers are overlapped:
I'd like to find a way to fix this. I thought of these two:
Short the numbers displayed on xAxis like by dividing with 1000 and display each number like 1k, 3k ... etc
Skip some ticks, I don't need to see all the ticks if more than 5 ticks.
I prefer the first way [the k shorter] but I'm open to any solution that can make the graph looks better.
Reduce the ticks by giving fix intervals like 1k 3k 5k.Here is a piece of code.
xaxis:{
min: 0,
max: 24,
ticks: ['0','1', '2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
label:'Hours',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
Related
I'm trying to plot some data in seaborn where the x values are percentages*100 as floating point numbers (ie 90.909). When I make the plot:
fig, ax = plt.subplots(figsize=(10,10))
ax = sns.stripplot(df_12['% ident'], df_12['length'], jitter=True)
The decimals in the floating points make the X axis unreadable:
Initial Plot
I would like to set the x axis to show only whole number multiples of 5 (ie 80, 85, 90, 95, 100).
One method I have tried is the following:
fmt = '{:0.0f}'
xticklabels = []
count = 0
for item in ax.get_xticklabels():
count+= 1
item.set_text(fmt.format(float(item.get_text())));
xticklabels += [item];
ax.set_xticklabels(xticklabels);
This succeeds in changing the axis values to integers, but the axis looks busy. The numbers shown are also inconsistent between similar datasets.
Second Plot
I would like to reduce the total number of values shown on the axis. I have tried to use
ax.xaxis.set_major_locator(plt.MaxNLocator(5))
Or similarly
ax.xaxis.set_major_locator(plt.MaxNLocator(5))
ax.set_xticklabels([80, 85, 90, 95, 100])
Which give outputs similar to this:
Third Plot
If you compare this to the previous plot, you'll notice the x axis labels no longer relate to the points plotted. How do I set the values of the x axis while still keeping them related to the points plotted?
Other things I have tried:
ax.set_xlim(75, 100)
This and any variants result in a blank plot.
ax.set(xticklabels=[75,80,85,90,95,100])
Does the same thing where the axis labels don't match the data.
ax.set(xticks=range(75,101), xticklabels=[75,80,85,90,95,100])
Results in all the data points stuck on the left side of the plot with all the axis labels overlapping on a single tick on the right.
ax.xaxis.set_major_locator(ticker.MaxNLocator(integer=True))
This doesn't change the axis values to integers, and also appears to cause the axis to no longer correlate with the data.
I have 3 axes (velue-axis)
Can one axis be displayed on the left
Other two axes to display on the right?
http://demos.telerik.com/kendo-ui/line-charts/multiple-axes
(In this example, the axis is located on the right, but I do not know how to configure it)
Thanks.
Granted this isn't entirely clear when you first look at the demo. The important thing to look at is this section:
categoryAxis: {
categories: [],
axisCrossingValues:[]//This is the fella you are looking for.
}
I have tweaked the demo slightly to show you one of the axis in the middle of the chart. http://dojo.telerik.com/ASidu
The number is simply the position column on the chart that the axis should be rendered. By default if this in't set then all axis should be on the left hand side as normal. but if we start applying a number greater than 0 then the axis will shift. So in the example we have 3 value axis set up:
valueAxes: [{
name: "rain",
color: "#007eff",
min: 0,
max: 60
}, {
name: "wind",
color: "#73c100",
min: 0,
max: 60
}, {
name: "temp",
min: -30,
max: 30
}],
so if we look at them from crossing the y-axis (i.e. the bottom axis) we have 31 columns available to us 1- 31 so in my tweak I have applied this to the crossingAxis:
axisCrossingValues: [32, 15, 0]
This is effectively telling each of the value axes where they should be positioned:
so:
"rain" should be at position 32
"wind" should be at position 15
"temp" should be at position 0
So the order in which you add your value axes will determine which setting they take based on the order you include them.
Hopefully that helps clear things up for you. If you need any more info let me know and I will update accordingly
I feel like this may be simply me misunderstanding how logarithmic scales work, but I can't seem to get D3 log scale bases to work.
In this fiddle, I attempt to create three scales with the same set of base10 ticks, with a base10 log scale, a base4 log scale, and a base2 log scale. According to my layperson understanding of logarithmic scales, the base10 log scale looks correct — the powers of ten are equidistantly spaced on the axis. But, the base4 and base2 scales are identical — it seems to me that the labels should compress to the right on those two scales. What's going on?
Fiddly code:
ticks = [1, 10, 100, 1000, 10000, 100000, 1000000, 10000000]
elems = { ten: 10, four: 4, two: 2 }
for selector, base of elems
dom = d3.select('.scale.' + selector)
scale = (new d3.scale.log()).base(base).domain([ 0.5, 10000000 ]).range([ 0, 500 ])
dom.selectAll('div')
.data(ticks)
.enter().append('div')
.text((x) -> x)
.style('left', (x) -> scale(x) + 'px')
The base() method is a bit of a misnomer, IMO. It is actually a displayBase method, in that it only updates the positioning and label of the ticks.
Scales use the domain and range settings to do their magic. This is a nicely consistent way of doing things across many different scales, but with logs it is a little unintuitive.
The awkward way: In your case, modify the upper value of the domain array. For example, if the range is [0, 1000], then the domain should be [1, 3] for log-base10, and [0, 9.9658 (approx)] for log-base2. In general, top domain value is the log(base-x) of the top range value. Ditto with the bottom range value if it is higher than 0.
The simpler way: Leave the range as [0,1]. Then you can set the domain as [1, base]. The scale takes care of interpolation outside the range values.
I modified the code from a D3.js example for a multi line series chart so the x values are numbers instead of dates. The graph works fine as long as the x values are under 100, but once they reach 100 the x-axis reverses order and changes scale (ie: 1 2 3 ... 99) to (100 99.9 99.8 99.7)
Here's the script: http://bitpusher.in/graph.html
and data.tsv: http://bitpusher.in/data.tsv
Any suggestions on how to fix, or where I went wrong?
Thank you.
I'm working with a pretty simple Kendo UI Chart.
When the values go below zero, the axis labels stay near the zero axis. This caused the text and bars to overlap, which is not optimal.
I would like to get the labels to show up at the bottom of the chart area. Any one know how to do this?
See below, where the 'Approved' text is overlapping with the grey bar. I'd like the label at the bottom of the chart area.
#gman, what you're looking for is the axisCrossingValues.
valueAxis: {
min: -10,
max: 10,
// Keeps the default axis at the 0 crossing point
// and moves the "label" axis to the very bottom
axisCrossingValues: [0, -10]
}
Take a look at a code sample here: http://jsfiddle.net/design48/7C3nP/ and change the axisCrossingValues y-coordinate to -8 or something. Hope that helps.