I'm using a stacked bar chart as a very simple timeline. Each section of the timeline (green=on white=off) is defined in seconds. This means that the ticks also display in seconds.
Click here for bigger version
Is there a way to define a starting date/time for the entire graph and use date/time instead of seconds along the x axis?
I've looked in the API documentation, and I found this but it doesn't seem to change anything.
Any help would be greatly appreciated!
Cheers
I think that gantt chart can be more "user-friedly" http://highcharts.uservoice.com/forums/55896-general/suggestions/804783-gantt-chart
Yes - you can use pointStart, and pointInterval:
http://api.highcharts.com/highcharts#plotOptions.series.pointStart
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
You can also use pointRange to help fine tune the layout:
http://api.highcharts.com/highcharts#plotOptions.column.pointRange
{{Edit : it seems I misunderstood your question and usage, and this answer doesn't quite apply.
I took your chart to be showing a vertical column chart where you wanted a datetime x axis.
so....nevermind :)
Related
I have a collection of projects, each of which have a completion date. I am trying to display it on a horizontal bar graph such that the label is on the y-axis and the completion date is on the x-axis, as in this image:
Target axis. I am currently using Chart.js
The problem I am encountering is that Chart.js seems to be incapable of interpreting my data as dates - instead it evaluates it (for example, 2017-02-10 is interpreted as 2005). Based on the documentation at chartjs.org/docs/#scales-time-scale, I have tried to use Moment.js to parse my date strings into moments, but it can't render it.
My best guess is that, since it's a horizontal bar graph, my x-axis values are being treated like y-axis values, and the documentation states that the time scale is only supported on the x-axis.
Is there some workaround that would allow me to use dates as the data, so that it looks like this image, but with the axes from the first image? If not, is there another library I could use that does support this? I haven't found any examples of people using time scales on a horizontal graph, so I don't know if other libraries like CanvasJS can do it either.
Goal data, but wrong x-axis
Thanks.
Here is a fiddle that I have jsFiddle. In this fiddle, what I would like to to is to add a RangeSelector on the x axis of the graph. I want to be able to view 'Vulnerabilities per Version' that span 1yr, 3yr, 5yr, and 10yr. However, I am unsure of how to go about this. From the numerous fiddles I've seen on stack overflow and blogs, I'm wondering if this is possible. For example, the mockups I saw on other fiddles show that HighStocks is the way I would want to go. However, I think that's not exactly what I'm looking for.
Ideally what I would like is to have a graph that looks like the one found on the highstock web page Highstock range example but I don't want the range selector underneath the xaxis, nor do I want the labels to be of dates. I only want the functionality of sorting the info by the buttons on top. Does anyone know of a way I an try this? Help would be appreciated
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 am using http://www.highcharts.com/demo/combo-dual-axes/sand-signika/
What I am trying to do is: to change the granularity of line chart. For example. I want to plot a weekly data points on line chart while sticking with monthly bar charts.
Can someone please suggest if this is doable or if anyone has tried that in past.
At the beginning I advice to use datetime xAxis. Distance between points, you can control by pointInterval