How may I force a redraw of All Vaadin charts in a dashboard to toggle dataLabels on or off?
I would like to allow my app user to add/remove chart dataLabels for All charts on their dashboard; forcing a redraw similar to when changing themes say from VaadinTheme to GridTheme.
How may I achieve this?
How does changing themes work under the hood, what is the source code that does this?
e.g.;
I know I could redraw a single chart individually by resetting its plot options and then redrawing it:
.
.
.
PlotOptionsColumnRange columnRange = new PlotOptionsColumnRange();
columnRange.setDataLabels(new Labels(true));
columnRange.setDataLabels.setFormatter(/* some javascript about this.y */);
conf.setPlotOptions(columnRange);
chart.drawChart(conf);
But I want to do it for All charts on a dashboard; like having a Listener that does
ChartOptions.get().setTheme(new VaadinTheme())
then
ChartOptions.get().setTheme(new GridTheme())
and viceversa
Maybe I can reset the plotOption dataLabels then reset the theme to force a redraw with the new dataLabel state?
Please advise...
p.s.
I don't want to make changes to my user saved data in my database, i.e., I don't want this label toggle to be persistent. I want to toggle dataLabels just like a toggling themes.
Please look at:
http://demo.vaadin.com/charts/#ColumnRange
to see what I mean.
Ok, two solutions:
A coworker of mine that worked on the Dashboards helped me with the first answer to this question.
Basically, you have to clear all charts, then iterate through ea. chart in a particular dashboard (stored in the DB), and rebuild ea. chart w/ your decision to have or not have a dataLabel, placing it back in that dashboard; but I wanted to avoid this as it might take a performance hit.
Also I later got a response from Pekka of the Vadding team, as follows:
'You can easily hide the dataLabels with basic css. For example, if you can apply a stylename "dataLabelsHidden" to you UI, then you could write in your stylesheet a specific enough rule for hiding the labels. I quickly tested the demo with this:
.v-ui.dataLabelsHidden g.highcharts-data-labels {
display: none;
}
This way you won't have to update all your charts when the labels on/off is triggered.'
Related
Apologies in advance, I cannot share the code. I do have a screenshot.
[Screenshot][1]
I am using VizFrame vizType 'combination' which is a combination of columns and lines. I want to be able to hide/show just the line charts for the user to have an option. I have looked everywhere but cannot find a way. All I am able to do is hide data point labels which is not my requirement.
But please let me know if this is possible? If so, how can I can hide/show a line chart on click of a toggle button I have in my toolbar.
I'm using ui5 version 1.52
I'm afraid that if you cannot find a way to do that it means that it's not possible with the standard version of the control.
You have two options:
Extend the current VizFrame control you're using in order to
override/implement what you need
Use a third-party control to
display charts. I would recommend you to check out my implementation
of openui5-chartjs
Is there a way to add a custom column menu tab with my own favourite icon which on click would render my custom react component?
something like
myColDef.menuTabs: ['generalMenuTab', 'filterMenuTab', 'myCustomMenuTab']
FYI I'm using v12.0.2
What you're after can't be done I'm afraid. The grid supports React components in all sorts of ways (renderers, editors, filters etc), but not via the column menu.
I've updated the docs page to remove the gibberish issue - it'll be fixed properly in the next release, thanks for highlighting this.
This would be helpful to have. In particular for us, we'd like to filter based off row properties, and not row values. Creating our own tab to filter by cell colors that we have assigned with our own set of labels would be useful.
I agree that it would be a nice feature to have. Apparently, there's no quick out-of-the-box solution to do it. The only workaround I see is to implement your own custom Header component which would display any buttons your want.
There you can put a button to open your own custom menu, which you can implement as any regular UI component. It also means you'll need to manually implement all standard menu options that Ag-Grid provides out of the box if you need them.
I have a Time Stack Chart whose data set can be changed by clicking on a radio button. While the model is running, the chart instantaneously updates its appearance when a radio button is clicked. When the model is paused, however, the chart's area becomes blank when a radio button is clicked; the legend, in contrast, updates automatically. How do I manually force the chart area to redraw itself?
When you pause a model, only a part of Anylogic is actually paused. The thread that handles the GUI keeps running, which is why you can navigate around in the model while it is paused.
This also means that if you try to update a chart's data while the simulation is paused, the appearance will refresh but -- as your data is being updated in another thread that is currently paused -- it will not have received that data.
If you want to pause the simulation and still be able to switch the data being displayed in a chart, you could take a look at the Airport example model. It provides a good method to switch between different charts by making them visible/invisible and adjusting the width, height, x and y. Essentially, you make all of the charts you need, overlap them perfectly, and then make visible the one that is currently of interest to you.
If you want to create the charts programmatically, on top of creating the chart with, e.g., new TimeStackChart(...), you also have to add it to the top level presentation group with main.presenation.add(...). If you don't do this, the chart will never appear in the model as the model won't have anything to display! To find more information on how to create a chart programmatically, make a chart in Main and then open Main in the Java editor. Find the chart you created, take a look at it's constructor (there are a lot of arguments!), and use it as rough template for the charts you wish to create. The Help documentation will further make sense of the parameters you see.
have you tried the chart.refresh(); method?
Also try to update the embedding agent using agent.onChange().
hope that helps
I encountered the exact same problem, and came up with workaround.
Try this, which I know works in AnyLogic v7:
if (getEngine.getState() == getEngine().PAUSED ){
dynChart.setSelectedItemIndices( new int[]{0} );
dynChart.setSelectedItemIndices( null );
}
I was able to get the chart to refresh manually when paused or finished by selecting/deselecting one of the legend items. I spent a few hours try out API variations to no avail, so I just emulated what was actually working in the UI and it worked.
I am dynamically generating a text item as the chart title, but I have not had the same luck getting the text to refresh when paused like the chart. Any ideas on that one?
Is there a way to (programmatically) make a certain IMarker be shown in the problem view, similar to what happens when the user selects "View in..." from the context menu? I have a wizard which may cause markers to appear, and I would like to make these markers visible in the problem view when the wizard is complete.
You will just have to make your markers to be problems. However there are separate Markers view that shows all the markers.
To show marker you can use MarkerViewUtil.showMarker(..)
Ignoring all good API rules, you could look into the internals of FiltersConfigurationDialog to create a new resource filter in the problems view programmatically. But I repeat: there is no API for creating problems filters and this might then break at any time.
I'm using tiny mce in one of my projects and client do not want to use the Horizontal tool bar of tiny mce. He wants a centralized custom tool bar from where user can control all the properties like text color, type of text, size, back grounds and every thing that is needed to do while designing a web page using templates. I configured the mce instance with out its default tool bar and controlled the properties from the customized tool bar. And the properties are applied to the tiny mce instance as a whole. But now, the requirement has come up that, the text editing should be in MS office style.That means, if user has placed cursor at one place and changes color, nothing will be affected, but if he starts typing from the cursor position the text should have the color which was set recently. I tried to use the external tool bar option. But, my work area and customized tool bar are at different z index levels. So, positioning the tool bar fails. If I append the tool bar to my customized tool bar, it is not click-able. So, how to invoke tiny mce's core functionality using customized tool bar?
Or, Kindly suggest, should I change editor ? Then, which one should I go for ?
EDIT
As per the suggestion, I'm writing the function save the property styles and insert the span at caret position. But I'm facing some problems and could not do it after spending whole day. I could add span at caret position by using following code.
marker = ed.selection.getBookmark();
ed.selection.moveToBookmark(marker);
tinyMCE.execCommand('mceInsertContent',false,'<span id="mytitle"></span>');
But still, I failed to type inside the new span. Also, I could not figure out how to set styles to this span.
If your aim is to have your tinymce behave like MS Office you should write an own plugin which will take care of this.
I suggest if a user has placed the cursor at one place and changes color you save this color as a setting to your tinymce instance like: ed.color = 'choosencolor';
When the user start typing now you can insert a span on the first keystroke and set the color as css class or style property to this span.