I have a bar graph (note: the length of a bar spans horizontally. conversely, a column graph spans vertically. See below.) My series data can either become a long list or a short list so the number of bars varies between many and few. If I have many bars, my graph needs more height to maintain the same space between bars and maintain the width of the bars. How can I set the height of the graph to ensure that these are fixed?
I looked into a scrollbar for the vertical axis, but I didn't like this because the browser may have it's own vertical scrollbar. I also found advice on dynamically resizing the graph to fit the window, but this is won't work if I have more bars than would fit within a maximized window. So I think the best idea would be to have a graph that sizes with the number of bars. If the bar graph is greater than the page height, the browser's vertical scrollbar will come into action.
Bar graph:
===
==========
=============== ]---- width of bars needs to be maintained.
[spacing between bars also needs to be maintained.]
=======
===========
=== <--- a new bar would simply go here, and chart would increase height by 1 bar width.
The best solution that I have found for this is to determine the size by a simple count of the categories I will need on the server side.
When loading the page, I start with the height needed for the chart's top and bottom margin.
I do a count of my data, and multiply by however much space I need (usually 20, 25 pixels per category, in my cases).
Then set the height of the container accordingly.
I usually do this with php on page load. I'm sure a javascript implementation wouldn't be difficult to achieve.
Related
Suppose I want to create two charts with horizontal bars. The names of the objects are listed on the y-axis and the horizontal bars represents some quantity. The first chart has 100 items and the second chart has 5 items.
When I create the charts the horizontal bars have different widths. I'd like the bars to be the same width across all of my charts.
I know I can try different values for the height parameter to the AddShape function. But that seems time-consuming and unreliable since the number of items can change. I'd like to do something like:
Chart.BarWidth = 10
The "thickness" of each bar will be primarily determined by the number of data points that need to be plotted. The more data points to plot, the thinner the bars will be. There are some options to further tweak them, such as IChartGroup.GapWidth, and you're welcome to try to adjust this so that both charts match. But I suspect that it will be very difficult to do this reliably, particularly if the number of plotted points is expected to change over time.
To maintain the same bar thickness for multiple charts, I think your best option will be to ensure both charts' series refer to the same size range. So if your first chart refers to 100 cells, have your second chart refer to 100 cells, even if only 5 are populated with values. The empty cells should not plot but will still take up space and therefore maintain consistent bar thicknesses between your two charts.
This functionality is available for the Pie Chart via the plotOptions size parameter, however after inspecting the Highcharts API the size isn't available for the Gauge.
size API entry for Pie Chart
Considering the likeness of the two charts (being circular), I was hoping there would be a similar option but the gauge always fills some subset of the container div that I am unable to control. Has anyone else run into this issue or found a solution?
By setting the spacing to zero, you can fill the entire space:
http://jsfiddle.net/mkremer90/3sngK/1/
Fiddle with the spacing parameters to change how much the chart fills. As for a percentage based like size option I can't find one either.
I know this is old, but if like me, you have borderWidth set to something greater than 0, you'll find yourself with the tag being positioned (e.g. x="5.5" y="5.5") off from the corner and width and height shrunk. Setting spacing and margin options won't help in this case.
The simple solution then is to avoid setting borderWidth to anything at all; just leave it default or set it to zero. Instead, set the border on the container element you're calling highcharts on.
Alternatively, you could set negative margins and increase size on the container element to compensate for position shift and size shrink on the graph. Might need to wrap the container in a div with style="overflow: hidden;".
Scrolling a TStringGrid using its horizontal scroll bar will scroll a column at a time. In some situations, this creates a really nasty behavior that makes the grid unusable: if the width of last column is large (example, 1000 pixels) the user won't be able to scroll the grid to see the entire content of the column.
There is a way to scroll by pixel? Or to set the correct scroll range for grid's scroll bar?
As far as I know, no you can't horizontally scroll the string or draw grids by pixels, only by whole columns. I agree it can be a problem by the way. I tend to autosize the columns but make the max initial size of any column be slightly less than the clientwidth of the control.
I have looked into the source code. With Borland's code it can't be done.
However, Lazarus has this capability.
How can I get the max scroll for the X and Y in virtualstringtree during onchange event?
The GetTreeRect method gives the dimensions in pixels of the entire tree, or the dimensions of the client area, whichever is larger. Note that if there are no columns configured, then the size of the tree can vary based on which nodes are displayed on the screen at the time — the scrolling width changes according to the widest nodes visible.
The Bottom and Right fields of that rectangle determine the scroll-bar range.
I've got a TCheckListBox on a form. Its Columns property is set to 2, and if there are more items than can fit on-screen in two columns, it puts a horizontal scrollbar across the bottom of the control.
Thing is, the way this form it laid out, it would be much more convenient to scroll vertically. But I can't seem to figure out how to make the box do that. I thought setting Columns to 1 should work, but it doesn't.
Anyone know how to make a TCheckListBox scroll vertically instead of horizontally?
You need to set Columns to 0.
For all positive values the VCL sends a LB_SETCOLUMNWIDTH message to the underlying native list box control, with the width parameter set to the list box client width divided by the number of columns. Items that don't fit will start a new column with the same column width, so the horizontal scrollbar becomes visible.
If Columns is 0 then there is a single column that spans the entire client width of the list box, and items that don't fit will make the vertical scrollbar visible, and hide the horizontal scrollbar.
Edit:
There seems to be genuine interest what happens when a negative value is used for the Columns property.
The method TCustomListBox.CreateParams() sets the LBS_MULTICOLUMN list box style depending on the Columns property being different from 0. For negative values the style flag is set, but the VCL doesn't send the LB_SETCOLUMNWIDTH message, so the native control uses the default column width. It is documented to be:
15 times the average character width for the font used by the list box.
(Search for "The LBS_MULTICOLUMN style specifies" to find the relevant passage of text.)