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.
Related
I was building a chart in HighCharts with logarithmic axis type. Here is a link to the code in JSfiddle.
https://jsfiddle.net/PowerHouse/ekwoupcy/15/
I'm consuming data from Google sheets and at the moment, the values are plotted exactly as in Google Sheets. I however wanted to plot the changes over time instead, something similar to this image. Ignore the left percentages (labels), the ones on the right are the workable ones or rather where my focus is on.
I have tried applying the plotOptions and specifying the compare: 'percent', but still I get the chart not showing the change over time but the exact stock value instead. Is there a way I could get the percent changes instead of the values themselves? I will appreciate any assistance. Thanks!
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.
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
Is there any chance to customize chartjs with a large amount of data? To be exact, the problem is with overlapping labels when there is more data than in it's documentation. I've worked with other charting systems and labels (represented by dates for examples) where properly scaling, but ChartJS seems to do nothing with that?
Try to use Chart.Scatter plugin instead the line chart.
http://dima117.github.io/Chart.Scatter/
It receives the array of points with X and Y fields. Scale parameters are calculated automatically based on chart data
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.