Here's picture of my bar chart using google charts and the corresponding values on the right side. X-Axis is a Date Axis
As you can see in the table, there are two values for 16th Jan, 2017 (100 & 60). They're overlapping and though 60 is the latest reading (considering time), it is not showing in the graph. It is behind 100. How can I bring the latest reading to the front. Is there any setting in google chart that does this? Any help is appreciated.
My requirement was that I only needed to bring the latest value to the front.
My value list was sorted in descending order by time. So I reversed the list and problem solved.
this.myValueList = this.myValueList.reverse();
If there are two overlapping bars, google charts bring to front the later one by position in the array
Related
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.
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
I am working on highstock charts for the first time.
The link http://www.highcharts.com/stock/demo/dynamic-update gives me the solution I need.
But I would like to replace the x - axis values (currently date time) with some other values like length measurements. I would also like to change the date time shown in mouse hover in the above chart with the length measurement values.
Could anyone help me find a way out as I don't see any other dynamic chart as far, specific to my requirement.
Thanks in advance.
I have a line chart that has months as the x-axis and displayed the values on mouse over.
There are a lot of months so when zoomed out fully the chart only has every third month with an average value of the months around that point.
Is it possible to change this so that it will display the exact value of the month displayed rather than an average as it is currently displayed different values when zoomed in to zoomed out.
You can see an example of this on http://www.highcharts.com/ on the USD to EUR chart where 2nd May 2011 displays different values depending on zoom level.
You need to disable datagrouping
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.