I'm trying to build a box plot representing stats of a lot of data(x-time, y-time) The idea is to use d3.extent() to get the domain and then feed it to timeScale to get ticks in nicely chosen intervals. Then I calculate stats for data points between the ticks. Example below:
The approach works well most of the time. Except for the 1st day of the month which creates an additional tick in an uneven spacing ( see above "Wed 31, June" ). I'm currently calculating bar widths and positions manually assuming that the ticks are spaced evenly so the whole chart gets broken.
The data can span any range of time from a week to couple years, so dynamic ticks are required.
Any ideas how to remove the additional tick or make all the ticks spread evenly?
EDIT. Not sure if removing the tick is going to do the trick... probably even spacing is more important here. I looked up other people's questions about similar problems but I'm still confused how to solve my problem.
I've just started using D3 so forgive me if the question is trivial. I'll be happy if you just point me in the right direction.
Related
In graphs with a lot of datapoints the amount of ticks on the X-axis becomes so overwhelming that it's impossible to read. Is there a way to instruct ChartJS to not render each label element on the X-Axis but for instance only the first of each month?
I have tried using a category type instead of time and only filling in the labels for the first of the month but then there is also no label for when you hover over a certain datapoint which makes it impossible to determine what day it is, making it unfit for my requirements.
I have to program a machine with multiple values throughout the day, and besides, I need to graph a line with these values for intermediate values. To this should link the last point on the graph with the first.
At the moment I created an extra point at the start and end to repeat the last and the first value respectively but in the next day and the previous.
But the problem comes when I change these values and I want to render the graphic (it is an AngularJS application with draggable points plugin in future versions), for example when set the first point to 23:00. I should modify several points, including the extra, but it's very hard, because some of these points are calculated (circles), in fact, only have 3 points in this chart (squares)...
Is there any way to avoid these additional points (at the begining and the end) and use only those with real or calculated values? Have Highcharts some property to create a 24h "cyclic linear chart" or something similar?
Thanks a lot!
I was developing a solution for another question here on Stack Overflow (see Highcharts : selection) that has some simple slider elements (using input type="range") to change the categories shown in a column chart. Whenever the user changes the range in either slider element, the chart is redrawn using setExtremes().
I noticed that, in some instances, some of the x-axis labels disappeared, even when I moved the sliders back to their original positions. I've tinkered with a number of x-axis settings, including minPadding, startOnTick, and tickInterval, and none of them seem to solve "The Case of the Missing Labels."
The first screenshot below shows the chart when it's first loaded. All of the x-axis labels are present.
The second screenshot below shows the chart when I change one of the sliders. Some of the x-axis labels are now missing. It looks like they're being staggered.
Here's where the plot thickens: if I adjust the sliders to some other values, all of the labels come back:
Here's the fiddle I developed so you can see a live example of this behavior: https://jsfiddle.net/brightmatrix/uvat8u05/
I'm curious to know why this is happening, and what settings I could use to ensure that all x-axis labels are shown, regardless of what values the user chooses in the sliders.
Thank you very much!
Update: The responses from both Max Uppenkamp and Grzegorz Blachliński are valid and helpful solutions. What I also discovered by chance was that explicitly setting the slider values to integers using parseInt() solved this issue as well. It also helps in comparing both values to make sure a user doesn't choose an end date that is earlier than the start date.
This seems to be intended behavior of Highcharts, however inconsistent it may be.
According to this this should be fixed in current versions of Highcharts, but you might as well try this tick formatter solution.
Edit: If the above doesn't work for you, you might be able to solve the issue by rotating your labels:
http://www.highcharts.com/demo/column-rotated-labels/grid
In Plotly.js I am trying to allow users to see two (related) values for positions on the x axis. (Think if I'm doing dates I want it to say "Tuesday" on the lower axis and June 28th 2016 on a linked axis) Linking the axes would preferably preserve the relation between values when scrolling or zooming.
I had a temporary solution in place, where I would change the values from floats (as that was what we were using) to strings with a break character intended to separate the values (which allowed viewing both values at once albeit on one axis), however when tested with floats that were not equally spaced the slope would change visually, which is not desired. Another solution I have tried was to have the ticks be their float values, and then change their values after they were plotted using the "tickvals" and "ticktext" attributes, but I was unable to then hide some tick text while keeping others view-able on the x axis (and with 80 values it became quite busy and unreadable) There is the solution of hiding all of these tick values, but I was hoping there would be a solution where I could see some of them.
I created an example of the problems I am having in jsbin, so I hope it is kosher to link to that. https://jsbin.com/buwuyid/1/edit?html,output (and also hope the link works.)
There was a similar question asked previously, In plotly, how do I create a linked X axis? however that was a year ago and using python, and I was hoping that an implementation that I cannot find has been found, or a solution to one of the other problems I have found could be provided.
Thank you for any help you can provide, and if I can include any more information to help find a solution, please ask.
I have tried using all sorts of combinations of tickInterval, tickPixelInterval label formatter and tickPositioner and I haven't been able to solve this issue.
I have a chart builder that pulls in different feeds and allows the user to modify the date range of those feeds before shooting this data into highcharts and spitting out the chart.
The problem is that some of the time, the first and/or last dates get cut off. Here is an example:
Without adjusting the margins of the chart (which causes the chart to take up less space), how do I prevent this from happening?
If I was able to determine the pixel location of the ticks and their labels, I could in theory, hide the specific ticks and their corresponding labels which were located outside the graph / cut off. Thoughts?
Without looking at your code - there are a few things you can do.
Rotate your labels
Play around with the x/y axis labels
Align them to the right
Hopefully one of these would help your cause.