Chart.js - different height for X & Y axis? - chart.js

I have a dynamic chart where using filters, data either comes in or leaves the chart.
Some of my X axis labels are pretty....... long. :) Mostly they fit within the 400px chart but the ones that are very long don't and get truncated.
So currently I have solved that by simply adjusting the chart height itself, so that it fits pretty much any X axis label no matter how short or long it is.
But I've noticed, that with the height change the overall height of the bars (well, the height of everything that's above the X axis labels) also changed, so this means that if a user adds a content to the chart which has a long X axis label, they will get this content in, however the rest of the content that's already in there will visually increase its size.
Is it possible to set a different height for the main part of the chart and for the X axis labels?
Thanks.

Related

yAxis control for stacked bar chart

I have been looking online and in the source code of Chart.js to find a way to use the stacked bar chart without stacking (summing) the values.
Example:
My data points are 1, 2, 2.5, 3, 4 for the stacked bar. The chart y axis by default will sum that up to 12.5 (standard stacked bar behaviour).
What I would like is that each stack only go to its literal value, not the summed value.
In the example above, I would expect stack 1 to go to 1 on the y, 2 to 2 and so on until 4.
Is this possible OTB? Or will I need to write a custom chart renderer to achieve the desired result.
Note: The sequences will always be in order, and never have duplicates.
Found the solution. I had set stacked on both x and y axes where all I needed to do was stack on the x axes.

Chart.js place y value position and its x-label position relative to the x-value

Is it possible for me to supply a chart.js chart with a list of Y values that have a corresponding label/X value and place them vertically and horizontally relative to their own value.
For example: I have a list of values at a certain time (unix timestamp) that I want to show on a chart, with its Y value positioned relative, but also its horizontal position and its label relative on the x-scale.
At this moment it always spaces out my labels, completely over the entire x axis, at equal distances, without taking into account the values of the labels itself. Is there way to automatically accomplish this with chart.js ?
A line or scatter chart will do the job. The main criteria is that the data is a series of x and y coordinates. Each point in the array is in the form:
{
x: xValue,
y: yValue
}
See http://www.chartjs.org/samples/latest/charts/scatter/basic.html
here is a jsfiddle that reproduces your image.

Google Charts not displaying correctly

I am generating a URL that needs to create a PNG Graph, using Google Charts API.
I thought that I had all the parameters in the right position however the graph is not displaying correctly? It is only displaying one of the series, and even then, the series data is wrong.
If anyone can point me in the right direction, it would be much appreciated!
http://chart.apis.google.com/chart?
cht=lc&chs=800x350& // CHART SIZE
chco=6a6572,6a6572,6a6572,6a6572& // SERIES COLOURS
chxr=1,-11519.670000,19297.010000& // Y AXIS RANGE
chxt=x,y& // X & Y AXIS
chxl=0:|January%2017|February%2017|March%2017|April%2017|May%2017& // X AXIS VALUES
chdl=A|B|C|D& // SERIES NAMES
chtt=Sales+Year+To+DateYYYY& // CHART TITLE
chts=000000,24& // CHART COLOR AND FONT SIZE
chd=t:6032,13921,0,1263,19297|-1330,-11520,-4410,490,-361|298,798,285,228,108|884,1651,1161,1473,961
// SERIES VALUES
I finally figured it out. For some reason the series values parameters were taking a percentage value? So once I converted the values to a percentage of the total, it displayed fine.

RRD Graph - Change line colour by value

I have a RRD database with data:
"DS:pkts_transmitted:GAUGE:120:0:U",
"DS:pkts_received:GAUGE:120:0:U",
"DS:pkts_lost:GAUGE:120:0:U",
"DS:rtt_min:GAUGE:120:0:U",
"DS:rtt_avg:GAUGE:120:0:U",
"DS:rtt_max:GAUGE:120:0:U",
And I want that the Avg line change colour if I lose any package.
For example, if I lose 5 packets make the line blue, if I lose 10 make it red.
I see people doing it but I read the documentation and I can't find how to do this.
The way to do this is to actually have multiple lines defined (one of each colour) and hide the ones you don't want to see at any time, using calculations.
For example, say we have an RRD with two DSs:
DS:x:GAUGE:60:0:U
DS:y:GAUGE:60:0:1
Now, we want to show the line for x in red if y is 0, and blue if it is 1. To do this, we create two calculated values, x1 and x2.
CDEF:x1=y,0,EQ,x,UNKN,IF
CDEF:x2=y,1,EQ,x,UNKN,IF
Thus, x1 is active if y=0 and x2 if y=1. Yes, this could be simplified, but I'm showing it like this for the example.
Now, we can make lines using these:
LINE:x1#ff0000:MyLine
LINE:x2#0000ff
Note that the second line doesn't need a legend. Now, the line will appear to change colour depending on the value of the y metric, since at any time the other line will be UNKN and therefore not displayed.
You can extend this, of course, to have multiple colours and more complex thresholds.

Pyplot rotated labels offset by one

Just getting into matplot lib and running into odd problem - I'm trying to plot 10 items, and use their names on the x-axis. I followed this suggestion and it worked great, except that my label names are long and they were all scrunched up. So I found that you can rotate labels, and got the following:
plt.plot([x for x in range(len(df.columns))], df[df.columns[0]], 'ro',)
plt.xticks(range(10), df.columns, rotation=45)
The labels all seem to be off by a tick ("Arthrobacter" should be aligned with 0). So I thought my indexing was wrong, and tried a bunch of other crap to fix it, but it turns out it's just odd (at least to me) behavior of the rotation. If I do rotation='vertical', I get what I want:
I see now that the center of the labels are clearly aligned with the ticks, but I expected that they'd terminate on the ticks. Like this (done in photoshop):
Is there a way to get this done automatically?
The labels are not "off", labels are actually placed via their "center". In your second image, the corresponding tick is above the center of the label, not above its endpoint. You can change that by adding ha='right' which modifies the horizontal alignement of the label.
plt.plot([x for x in range(len(df.columns))], df[df.columns[0]], 'ro',)
plt.xticks(range(10), df.columns, rotation=45, ha='right')
See the comparison below :
1)
plt.plot(np.arange(4), np.arange(4))
plt.xticks(np.arange(4), ['veryverylongname']*4, rotation=45)
plt.tight_layout()
2)
plt.plot(np.arange(4), np.arange(4))
plt.xticks(np.arange(4), ['veryverylongname']*4, rotation=45, ha='right')
plt.tight_layout()