I have parent component (A) with two child components (B) & (C). B contains an angular2-tree which is populated on page load. C is where angular2-highcharts and information will be rendered when a node on the tree is clicked.
When navigating between nodes, sometimes I will show charts and others I wont. Currently, when I don't pass data to the chart options, assuming I've already shown a chart, then the chart continues to render.
How do I destroy the chart when I don't want it to show?
Didnt think of a way to destroy the chart, but have added *ngIf to the html tag for the chart. This will hide the chart when the options are set to null.
Related
I have an app that has two ag-grids in two tabs using Angular Material tabs. When the user switches between tabs the items in one of the columns get rendered outside of the grid (but inside the tab body). The difference in the column is that it uses a custom cell renderer. It only effects the grid in the first tab because that is the grid that uses the cell renderer. So you have to switch to the second tab then back to the first tab to see it.
Stackblitz example here
It's hard to see because the column elements get rendered at the bottom of the tab window, you can barely see them poking out at the bottom of the grid. Also, if you page to the next page of the grid they are rendered properly, even on the first page when you page back.
I've tried executing gridApi.refreshCells() after the tab has switched but it doesn't do anything.
The fix turned out to be simple and I hope this is the best method for doing so. I simply execute the grid API's redrawRows method.
I have a repeat control bound to a (multi column) viewScope array.
The idea is that the chekboxGroup value will come from the first column and that the tooltip will come from the second column from the array.
The first thing (checkbox value) is not the problem. (see code)
The second thing is:
How can I assign the correct tooltip to the correct checkbox ?
<xp:repeat id="repeat4" rows="100" value="#{viewScope.choices}"
indexVar="rownumber" var="row" first="0">
<xp:checkBoxGroup id="checkBoxGroup2" layout="lineDirection">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return viewScope.choices[rownumber].get(0)}]]></xp:this.value>
</xp:selectItems>
</xp:checkBoxGroup>
<xe:tooltip id="tooltip1" for="checkBoxGroup2">
<xe:this.label><![CDATA[#{javascript:return viewScope.choices[rownumber].get(1)}]]></xe:this.label>
</xe:tooltip>
</xp:repeat>
EDIT
It seems that the tooltips work but are displayed off screen.
How do I manage to display them at the correct spot ?
Add position="before" or position="above" or position="below" to your tooltip control.
<xe:tooltip id="tooltip1" for="checkBoxGroup2" position="before">
By default it is "after" and this is outside the visible area in your example.
I have a ui grid that has 20 columns, and I would like to be able to tell what the next column will be as I scroll through the horizontal axis so that I can have some text that will tell the users what the names of all the columns they can't see are.
Anyone know if this is possible? As I watch the the inspector and scroll through the columns, I see html attributes changing.
---UPDATE 1----
This is what is all looks like (where it says "home #" is dynamic and will change to show the next column that is out of site)
Based on the ui-grid configuration that you use to render the grid, you already know the order of the columns. You can use this information together with the visible on each column added by the gird itself.
What you need to do is bind a event handler on scroll to iterate over the columns on each change and check the visibility of them. Then the first one with visible === false is the upcoming.
Here is a working Plunker where is used this flag.
I have a charts done in highcharts in which I show and hide series depending on a checkbox (if the user clicks on a checkbox and all series are shown, if he unchecks the checkbox, some series are hidden).
It is working great.
Now I have an issue with the legends in the chart: if the series are hidden and the users enables a legend, the segment of all series (hidden or not) are shown in the chart.
I would like to handle the click item so I only handle series that are being shown.
To do that, I created an eventhandler for the legendItemClick event.
Inside it, I am able to access the legend (using this) but I am only able to call functions in a legend level, affecting all series. Is there anyway I could get to a series level?
Thanks!
Edit: created a jsfiddle as an example: http://jsfiddle.net/JLkGm/1/
Steps to reproduce:
1- unmark the checkbox
2- click twice in john + joe
Note that the segment related to Jane + Janet will show up
I would like to prevent this segment from showing if the checkbox is not checked.
ps: sorry for the js code in the checkbox event handler, we are using coffeescript, the original code was this one
toggleCompareData: (toggle) ->
columnName = COLUMN_HIGHCHARTS_TOKEN + #secondaryPrefix
if toggle
for serie in #chart.series
serie.show() if serie.stackKey is columnName
else
for serie in #chart.series
serie.hide() if serie.stackKey is columnName
It looks like bug, reported to our developers here: https://github.com/highslide-software/highcharts.com/issues/3309
Anyone had created a table view, not creating a chart from a table, but a pure table grid view using the highstock library?
I need to be able to navigate in time (table grid get updated dynamically, like chart does) using the navigator-scroll-bar and range selector. Basically just replace the chart by a pure HTML table grid of data.
It needs to be done with highstock chart, probably not highchart library, coz I am looking for time navigation component to update the table accordingly to new time range changes...
I guess this could be achieved with callbacks on the navigator and range selector?
You need to catch afterSetExtremes, get all visible serie's data from chart.series (between min/max values which limit range) and return table in defined i.e div.