In my Angular 2 environment, the OpenLaysers and Highcharts components are not rescaling themself after I change the Bootstrap layout. If I click on my button that changes the Bootstrap grid classes, the components should rerender. I tried rerendering the charts through highcharts.redraw() function - that does not fix the problem. As visible in the video, if I press 'F12' and go into 'Developer Tools' (showing as a black box at the bottom - 0:08), the components redraw. Therefore I tried workarounds like giving the body a zoom of 2.0000.1, new zIndex, different height, display 'none' - 'block'. Nothing works.
In Highcharts you should use chart.reflow() not chart.redraw(). Alternatively, you can use chart.setSize(newWidth, newHeight).
Related
In Vaadin 14.4.2, I have a scenario in which I have added a chart inside a splitLayout. However, when I, as a user, expand or shrink the splitLayout, the corresponding chart does not resize. The other components, such as the grid do automatically resize. Is there some "magic" configuration option to get the chart to behave like other components? (The screenshot below shows the chart not having resized, even though the grid beneath it did properly automatically resize.) (Also fyi, I call this: spectraChart.setSizeFull(); so the chart should be using up all the available space.) (Another FYI: I could probably "trap" the splitLayout resize even then redo the plotting, but it seems to me that this should ideally not be necessary in the a 'framework' solution such as Vaadin, since a chart is a component that should behave like other components, such as the grid.)
Yes, unfortunately that is true. You can workaround the issue by doing explicit JavaScript call to Charts to reflow when splitter position has been changed. The code snippet below finds all charts and reflows them:
innerLayout.addSplitterDragendListener(event -> {
getUI().ifPresent(
ui -> ui.getPage()
.executeJavaScript(
"Array.from(window.document.getElementsByTagName('vaadin-chart')).forEach( el => el.__reflow());"
));
});
I am migrating a dashboard type screen to highcharts and would like to use the default context menu (for exporting various image formats and printing the chart).
The problem is that a lot of these charts are small gauge type charts and the context menu gets hidden when charts get below a certain size, mainly due to the fact that the context menu appears above the button for small charts size.
Is there anyway to make the context menu always appear below the button? I know I can limit the options and this will solve the problem but I would ideally like to use the default options list. Also I don't really want to have to calculate positions and move it myself.
See jsfiddle
see code at jsfiddle
Add the following styles to the context menu.
.highcharts-contextmenu {
bottom: auto !important;
top: 5px;
}
FIDDLE
Not sure if it would work for your situation, but have you considered using their pie chart with the legend at the bottom?
http://www.highcharts.com/demo/pie-legend
I build an app using smartGWT (3.1) (GWT: 2.5).
To hold changes to the various views (scrollbar-position in ListGrids etc.) I add all the views to the main canvas and just change their visibility (show() / hide())
(hide() all children then show() the one which was selected in the menu)
This works fine until I use hichcharts (gwt.highcharts-1.5.0.jar / highcharts.js -> 2.3.5).
no difference if I wrap the Chart in a smartGWT or GWT widget, when I hide the views some elements of the chart stays visible.
Ledgend-background, Ledgend-lines, and some dots from the data-points stays visible. It happens in firefox 18.0.2 and IE 9. In Chrome (24.0.1312.57 m) it works.
I try TabSet aswell. when i switch tabs (which should hide the 'old' tab) the same elements of the chart stays visible.
besides of the visibility-problem the still active Listener from the chart are another problem.
summary:
highcharts chart do not hide proper when parent-widgets hide (in firefox & IE).
For the display issues, and since you didn't provide any code example, I have used the wrapper provided on GWT Highcharts forum. With correct usage of hide/show calls (e.g. when tab is selected or deselected, call show or hide, respectively) I have managed to overcome the issue described in all browsers.
I had the same issue. I solved it by adding a tabSelectedHandler to the tabSet and inside that I show or hide the charts using StockChart.setVisible(boolean) depending on the selected tab.
tabSet.addTabSelectedHandler(new TabSelectedHandler()
{
#Override
public void onTabSelected(TabSelectedEvent event)
{
if (event.getTab().getTitle().equals("Charts"))
{
chart.setVisible(true);
}
else
{
chart.setVisible(false);
}
}
});
In jQuery-UI dialog box, the first button appears to be the default, therefore having focus set to itself.
But, this causes a frustrating effect, especially in Safari. Even in IE, you will see a rectangular selection mark around the button. Moreover, the hover effect will not be seen.
How can I set NONE of these buttons as default and therefore NOT having focus set on any of them?
Edit:
Examples can be seen at jqueryui demo pages and a snapshot using Safari is below.
I want to get rid of this blue selection.
I think it could be an css-class, that turns the button to "default".
Check with the Firebug Element Inspector what classes are applied to these buttons, and append the standard css class to all buttons of the form.
I have three tabs in a Jquery UI tabs widget. Inside of the tabs I am creating a Wijmo Grid. One on each tab. The Grid is based on Jquery UI as well. The grid on the first tab seems fine.
The grid on the second and third tabs (the hidden ones) have strange sizing issues. The Grid on one appears roughly 10 pixels wide and the full height. The one on the third tab appears about 50 by 50 pixels.
I know the code on those tabs is fine because if I make one of those the primary tab then it works fine and the other two are broken. So I think it is some sort of interaction between the Jquery UI Tabs widget and the contents of the tabs (a Wijmo Grid). Does anyone know what causes this strange interaction and what I can do to make it work predictably?
The Grid does size calculation when initializing. It needs to be displayed somehow when doing so.
You can add class="ui-helper-hidden-accessible" to make it off screen when rendering.
Make sure you initialize the grids then the widgets. Or you can call $("#grid").wijgrid("doRefresh"); when the tab is activated that it is contained in.