I have used Highchart for one of my calendar based requirement to show events throughout the year. I have made various changes to basic columnrange graph.
However from the presentation point of view, I have still two points to accomplish:
Will it be possible to wrap the headers (Jan, Feb, Mar ....) in boxes, to give a <thead> kind of effect.I tried passing the html from label.formatters as below.
return '<div style="height:10px">Jan</div>'
But this didn't seem to do the trick. Applying css border or anything to this div does nothing.
I want to remove the extra bit of gridlines that comes out from top and bottom of the graph. How can I do that??
I have my demo here. Have a look.
Related
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'm trying to develop a Gantt chart to display a certain list of grouped activities. In the image below I have attached the sample set of data that is used to generate my Gantt chart.
I have used the Gantt chart provided in this link (http://yukon-admin.tzdthemes.com/html/plugins-gantt_chart.html) and modified it so that I can display multiple activities per group. [In here they only let you add one activity per group].
This is the Gantt chart from the template,
Modified Gantt chart based on my requirement,
Now I want to display my activities one after the other, something similar to what would happen when you apply float:left,(float:left is not working in this situation).
This is how I want to display my activities, I can achieve this by setting the CSS property to absolute but the lines stay static and I can't scroll my gantt chart to see the other activities.
I see that even though a width is defined to that particular div, it is taking up the whole width of its container div.That's why the divs are stacked one below the other.
What can I do to get the lines displayed one beside the other and not one below the other? Any help would be appreciated.
Thanks in advance. :)
I have a page with 3 different charts. I'd like to make them look good. Here's what it looks like:
http://i.stack.imgur.com/JY0Yl.jpg
As you can see there are several problems with the formatting here.
How do I make the Y-axis labels align? In this case, they're right aligned, and the graph starts at the right. So, since the labels are different, each of the graphs starts in a different column.
How do i remove the first and last or the X-axis labels? In this case, two things happen. In one side, the label overlaps the Y-label, and on the other side, the label wraps around and uses two lines.
How do I space the graphs? Each graph is its own DIV container, and it's jqPlot that decides to format it, and overrides my DIV formatting.
For point 3 you may be able to place each div inside an additional div that you will be able to format with CSS as you want. And if it work you may reuse your hide X axis solution with a better result.
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.