gridstack.js - how to strech columns to fit width? - jquery-ui

I'm trying to use gridstack ( https://github.com/troolee/gridstack.js ) in a configuration of just 5 columns, but the problem is the default is 12 columns, and when I configure to only 5, these 5 columns are squeezed to the left and I have the space of 7 unusable columns on the right.
I would like to use all the screen width to acomodate these columns. Could you help me with the solution? I used options = { width: 5 } and the recommendations on https://github.com/troolee/gridstack.js#change-grid-width , but with no success.
Thank you!

Have you updated CSS rules for your grid? You need to define new rules for it.
Please check out the documentation https://github.com/troolee/gridstack.js#change-grid-width

Related

Charts for iOS: limit displayed entries number to 4 in LineChartView

I'm using LineChartView to draw line charts in our application. The newest requirement is that the chart displays only 4 records at once, so the X-zoom must be limited to 4 entries. Is this achievable using this library without doing any hacky stuff? I'd rather avoid calculating zoom manually.
Thanks in advance!
If I understand correctly, you want to see only 4 values at a time.
This can be accomplished by using:
chartView.setVisibleXRange(minXRange: 4.0, maxXRange: 4.0)
The chart will be scrollable to the sides.
The scroll can be turned off, but then only the 4 first values will be viewable:
chartView.isUserInteractionEnabled = false
If you want to make the graph auto scroll along +X-axis:
let any_value_in_double = 100.00
chartView.moveViewToX(any_value_in_double)
This graph will starts moving toward the right after 4.0 values as mentioned in the above Ranges.

Highcharts Columnrange Questions (multiple y-axes and column widths)

I'm in the process of evaluating Highcharts as a replacement for our current platform, and have some questions about how we can replicate one of our existing charts:
I've been able to recreate the basic floating stacked column chart, but need help with some of our specific features.
1) Is is possible to replicate the multiple y-axes with the columns displayed to the right of each within a single chart? If not, I suppose we could do 3 charts next to one another - and draw our own titles above (and data table below). If we go this route, is there a way to group all these elements in a single "container"? We need to export these charts to images and need to end up with a single image that looks like the one attached.
2) How would I create the inner box within each column? Do I need to draw it myself, or can I create another column series with a border and transparent fill and somehow set the width of the column to be less than the width of the main columns (note that the number of columns on each chart is dynamic, so the column widths can't be a fixed size. i.e. the inner box width needs to be a percentage of the main column width)?
3) Assuming #2 is possible, I could probably use the same technique to plot the horizontal line - just make the height 0 (or very small) and make the bar wider instead of smaller. Is there a better way?
4) How do I get the x coordinates of the columns so we can align our data table under each column?
5) Can I separate the individual points within the column. You'll notice in my jsfiddle, product 1 and product 2 are vertically aligned in the center of the column. Can I spread them out within each column as the 2 points are in the screenshot?
Thanks in advance for advice on all or any of the above.
Mike
1) You can use multiple yAxis, see the example
2) You can use renderer or mix column/column range and border parameter, example
plotOptions: {
columnrange: {
pointPadding:0.2,
color: 'rgba(255,255,255,0)',
borderColor: '#303030'
}
},
3) Use renderer, as above or scatter series with customied marker
4) Column is shape in point.element.graphic, so you can extract it.
5) as far as I know, it is not possible

HighCharts Column Chart Spacing Between Columns

I am creating a column chart using highcharts, I need to specify the width of the column and I am able to achieve that using the plotOptions.column.pointWidth property, after that I need to specify the distance between the columns in pixels, and I don't find anything in the API about it, I tried using plotOptions.column.groupPadding and plotOptions.column.pointPadding but they don't work if the column width is fixed. Please let me know how to achive that.
In addition to specifying the space between columns, I would like to give the columns a background color that spans the entire y-axis.
Do you mean something like in this:
Unfortunately you can set or fixed width for columns (as you are using) or floating width using groupPadding and pointPadding. Highcharts doesn't provide option to set fixed width for bars and between them. You can create an idea here: http://highcharts.uservoice.com/forums/55896-general

Why is TListView's Node text truncated with an ellipsis until I toggle ViewStyle?

Can anyone help me understand why the displayed labels for a TListView are truncated with an ellipsis at program startup, but are completely displayed after switching to vsIcon and back
again? I don't want any truncation or ellipse...
Edit 1: Columns[0].AutoSize is TRUE, MaxWidth is 50, Width is 50.
Edit 2: Left hand screen capture corrected so source text is the same as the right side's.
TIA
Assuming you are using ViewStyle=vsReport, make sure you have a column defined whose Width is large enough to accomodate your longest text value. TListColumn.AutoSize does not always work correctly, especially when the Listview is intially loaded.
Peter Below posted an answer on the Embarcadero forum (https://forums.embarcadero.com/thread.jspa?threadID=45670&tstart=0) pointing to an identical question asked a year ago here: https://forums.embarcadero.com/thread.jspa?threadID=27079.
Synopsis is to manually set the column width:
Uses CommCtrl;
ListView_SetColumnWidth( listview.handle, 0, NewWidthOfColumnInPixels );

How to solve this problem in Vaadin Table?

I used Vaadin Table component in my application and i set a page length to 15, Length of the Table is not consistent in different screens resolutions . For example in 1440 x 900 resolution height of the table is big but in 1280 x 1024 resolution the height of the table is less . I don't know how to solve this problem.Can any one help me to sort out this problem.
Thanks in advance.
Setting pageLength 15 basically says that the table should be just so high that 15 rows can be showed at once. No higher, no lower. Giving a height to the table would override the page length. Are you calling table.setHeight("100%"); or table.setSizeFull()?
I think that you can use something like:
aTable.setPageLength(0);
aTable.setHeight("100%");
Both previous answers are correct, while also noting that you probably need to ensure that the tab sheet you are adding also has setSizeFull().

Resources