Rounding y-value labels with Morris.js charts - javascript

I have plotted some JSON data using Morris.js. The graph works fine, however I'm trying to tweak the labels along the y-axis in a line chart.
Currently, the yLabels are being automatically generated by morris.js using the JSON data's range of values (where x-axis is time). In my example JSON, values range from 54 to -47, so the yLabels being generated are 54, 29, 4, -22, -47. Instead, however, I'd like to round these values to -50, -25, 0, 25, and 50. I would also like the "0" line to stand out, hopefully with a different colour.
As I'm dynamically creating the data, these won't be fixed, in another chart the values may range between -2.5 and +2.5 (in which case I'd want the labels along the y axis to be -2.5, -1.25, 0, 1.25, 2.5).
How would I round the labels morris.js is creating and make the "0" line red?
I have tried creating an array of yLabels (yLabels: ['-50','-25','0','25','50'],), but it didn't work, and even if it had I don't want to "hard-code" values because as I said, each chart will be different and dynamically generated.
Any help is greatly appreciated.
UPDATE
In the first example, I have been able to get what I want putting ymin and ymax of -50 and 50 respectively, but like I mentioned, I don't want to hard-code these values as the ymin/max will vary depending on the JSON being parsed. Is there a way I can always ensure the middle line is always 0, and morris determines the two y values above and below it?

I't cannot be done using Morris options. You will have to go into source and change drawGrid() function in morris.grid.coffee file.

I upped the numLines property of the gridDefaults in morris.js and was able to get everything in my Y-Axis to display. Perhaps you could play around with that property to display your Y-Axis differently.

Related

Override auto generated Y axis plot area values in Highcharts

I have certain requirement where I need to override the auto calculated values for Y axis in highcharts. For eg.
Here, the gridlines plot area is equally divided into 100. I wanted to override this so that the negative plot area should be at a max of let's say 50 and the positive ones can remain the same. Even if I try the max, min, softMax, softMin, ceiling and floor properties, the result is the same. I was thinking of using a secondary axis but then there is only one data in the series which would render the second one useless. I don't think using setExtremes() will be helpful either. I'm hoping to avoid modifying the library itself to add a certain option but it'll be helpful if such an option already exists in highcharts. Any suggestions?
Use tickPositions or tickPositioner property:
yAxis: {
tickPositions: [-50, 0, 100, 200, 300, 400]
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4883/
API Reference:
https://api.highcharts.com/highcharts/yAxis.tickPositions
https://api.highcharts.com/highcharts/yAxis.tickPositioner

NVD3 Line chart tics wrongly aligned to grid when using datetype on xAxis

I am currently working with NVD3 using Angular Directive (angular-nvd3). I have a very simple line chart with very simple data.
The problem I have encountered now is that my data is wrongly aligned with the Axis. Example plunker available here: http://plnkr.co/edit/jWEYt6?p=preview ,
I am using dates on my xAxis, which are parsed using d3 library:
tickFormat: function(d) {return d3.time.format('%d/%m')(new Date(d))}
Description:
I would expect the xAxis labels to be correspondent to the grid.
In the example you can clearly notice that the xAxis is not evenly devided (values: 06/11, 08/11, 11/11, 13/11). So usually 2 days and sometimes 3 days :)
What is worse - the peaks are not matching the grid. Example: 06/11 tick is really not even close to the grid's line where I guess it is supposed to be.
I have also tried this on master's code from repo and it happens there too. There is a link in the HTML head section.
Is there a problem with my data, proper date formatting or something else? Thanks!
This bugged me for a while and I could not find an answer here. I even have opened a bug on GitHub: https://github.com/novus/nvd3/issues/1382#issuecomment-160694559 and I was clued in on the answer.
The problem:
The actual issue is hidden because of d3.time.format('%d/%m'). My example data is given in one tick per day manner, and the format was set accordingly. But d3 does not understand that. When drawing the grid it divides the max-min/someValue and the grid ticks does not have to occur on full day (midnight), but on any hour. And because of the formatting I could not see that.
The version showing this misconception is here: http://plnkr.co/edit/2iMHOp?p=preview
Solution:
So now, when I know what I could do, I managed to substitute the ticks by using tickValues parameter in nvd3 / angular wrapper.
The version with the solution is here:
http://plnkr.co/edit/23n3ll?p=preview
Yet another bug :)
Funny thing is that since the labels are too long to be displayed, I had to rotate them so they could fit. Another bug occurs here (I think). As you can see 2nd and last but one tick label is missing. First I tried using the solution mentioned here: NVD3 Line Chart X Axis Ticks Are Missing using the showMaxMin parameter but it does not work correctly. But if you rotate the labels to ~ -70 degrees the labels are displayed OK.
I guess this is not the end with my NVD3 journey ;)
Since the problem is, according to Atais:
The actual issue is hidden because of d3.time.format('%d/%m'). My example data is given in one tick per day manner, and the format was set accordingly. But d3 does not understand that. When drawing the grid it divides the max-min/someValue and the grid ticks does not have to occur on full day (midnight), but on any hour. And because of the formatting I could not see that.
I managed to pass the x's values as integer values (ex: 20160211) instead of formatted dates (ex: 2016-02-11 or similars) to nvd3, and then on tickFormatformat them to display properly.
I wrote another plunker with the problem and the commented solution (used momentjs):
Plunker with the simulated error: http://plnkr.co/edit/fXDQ0f?p=preview
Data is provided in format x: milliseconds, y: int, like {x: 1446418800000, y: 20}, and it is being formated with tickFormat:
xAxis: {
tickFormat: function(d) {
return moment(d).format('YYYY-MM-DD');
}
}
Plunker with the solution: http://plnkr.co/edit/KpALzo?p=preview
Data is provided in format x: int, y: int, like {x: 20160211, y: 20}, and it is being formated with tickFormat:
xAxis: {
tickFormat: function(d) {
moment(d, 'YYYYMMDD').format('YYYY-MM-DD');
}
}
Note that you can do it with time too, just by appending to the 'numeric date'.
As stated from #ajaybc, will not work well with dates from different months, since d3 will interpolate X axis with invalid filling dates (days 32, 33, 34 and so on)

Javascript charts, custom step amount, but equally divided over available space

I'm looking for a javascript chart library where I can set custom step size.
I want a bar chart, where certain values are more important than others.
I'd like to have the ticks like [0, 50, 90, 99, 100]. And have the space between those values the same. I've tried Google Charts and Chartist, but they all put 99 and 100 very close to eachother, but I want it equally divided.
This is the idea:
Anyone ideas how to achieve this?
If these are your domain values, then provide them as strings instead of numbers. Then they will be evenly distributed.
But if these are your target or range values, you'll have to do something trickier. You'll have to use integer values like 0 through 4, and then use the explicit ticks option for the vAxis to specify both the values and how to display them.

How to break highchart bars for extreme values

In highcharts if there are two series, where the first series value is 20,0000 and the second series value is 20, then the second series becomes so small that it is almost invisible.
Is it possible to break the first bar so that second series become visible? Below is the desired output...
At this time there is not a way to do this.
See the HighCharts User Voice here.
I have used a mathematic calculation in the past to solve this kinds of problems. Here is a couple of different examples:
VALUES: 220, 110, 55, 5
Normal Format
Square Root Format
VALUES: 1100, 220, 110, 55, 5
Normal Format
Square Root Format
What I do in the above examples to get low value series to show more is use the square root of all values. The data is sent as the square root rounded to the third decimal. Then I use the formatter on the yAxis label and tooltip to display the proper values.
Also, in the above examples, I am using whole numbers. When formatting the yAxis label and tooltip I am adding 1 and forcing them to an integer to get them back to the original needed number. This works great for whole numbers. If your data is not a whole number, then you would have to pass the entire result from the square root. Then of course not force it to an int.

Why is Google Charts not showing the right data for me? Are the axis messed up?

http://chart.apis.google.com/chart?cht=lc&chs=600x400&chd=t:171,811,629,507,460,390,434,379,329,312,368,329,329,329,352,330,299,323,340,325,329,1895,1047,736,617,684,620,515
If you go there on your browser, you'll notice that you see a graph. However, the axis are messed up! And it seems like I can't see the ups and downs of my line graph. WHy?
I don't get what's wrong. I just want to plot the simple stuff on a line chart. Just those data points. Nothing more, nothing less!
If you use basic text format for the chart data, the range of data value is 0 - 100. Values above 100 are truncated to 100. The data values you provided are all above 100, so they are truncated to 100.
You should use text format with custom scaling. Try this one. The range of data values is set to 0 - 2000 using chds=0,2000.
http://chart.apis.google.com/chart?cht=lc&chs=600x400&chd=t:171,811,629,507,460,390,434,379,329,312,368,329,329,329,352,330,299,323,340,325,329,1895,1047,736,617,684,620,515&chds=0,2000

Categories