I am new to Highcharts so please pardon me.
Actually, I am using Highcharts (type: column) and the scrollbar is enabled. My requirement is to programmatically select a column which might have already scrolled to the extreme left.
I am able to select the column but now i need to manually scroll there in order to see the selection. Although, I tried setting the extremes using setExtremes() method and redrawing the chart using chart.redraw(). This works fine and I get the selected column in the display area.
But, I would like to know is there a better way of doing the same, so that I need not redraw the entire chart every time.
Please let me know if you need any further details.
Related
It seems there is no answer provided for this question or probably such a question has been never asked.
Anyway, problem is that I have a table view which consists of columns corresponding each day (of a time-period, for example current month) with a value filled in (some measured data for a person on the day). I am using chartjs to display the trend/visual-representation of that under the table row detail view (e.g. user needs to click a row to see the chart). My MAIN goal is to do so that table columns (headers) and chart x-axis are aligned properly so they are visually in sync and therefore easier to read/visualize.
It seems for default case, table uses ~100+pixels to separate individual labels on x-axis (e.g. days shown as 01.01.2020 02.01.2020 31.01.2020
I would like to set a fix width between those labels so that it could be controlled. I would like them to be exactly 121 pixels wide or so but this is just an example. I might have to possibly use even larger or smaller size based on scenario.
Is there anyway to do it? Any help is highly appreciated. Please note that I am using PrimeNG for charts which uses essentially chartjs behind-the-scenes.
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
Forewarning: I am a D3 novice.
Here is the grouped bar chart I'm working with. The only buttons that work are those labelled 'Gender' and 'Age', but this is enough to illustrate the functionality I'm asking about.
There are a few issues that I'm having, the main issue being that I'm unable to properly update the bar groups. Specifically, I'm unsure of how to properly .select and .remove the elements from the previously selected category and populate the chart with data from the new category. Right now, I've got it working somewhat, but what ends up happening is the elements are endlessly duplicated within the DOM, which becomes apparent when looking at the text labels.
Another issue is that the bars from multiple sets of data sometimes appear, but I suspect this is related to the issue described above.
A minor issue I'm also having is in figuring out how to properly centre the text labels against the bars that they are labelling. I know how to do this with a traditional bar chart, but I'm confused about how I would create a function that would position these correctly.
Thanks in advance!
I am unable to find anything in Highcharts API that lets loop through sections of a pie chart and detect which sections are selected. Something like "isSelected()" is missing.
Has anyone tried this before.
Please suggest.
Look harder, see: http://api.highcharts.com/highcharts#Chart.getSelectedPoints
getSelectedPoints () Since 1.2.0
Returns an array of all currently selected points in the chart.
Points can be selected either programmatically by the point.select() method or by clicking.
And http://api.highcharts.com/highcharts#Point.selected:
selected Since 1.2.0
Whether the point is selected or not.