Context :
I use ng-show (or ng-hide) to show a chart (hightchart-ng) only when my data is loaded.
The chart redraws when the data is loaded. So in theory, it redraws at the same time I show the chart. But the chart redraws when it is still not displayed (display: none), so it applies default size (not the real size available when shown).
Question :
Let's say i have an expression A used in my template with ng-show :
<div ng-show="A">
<highchart config="myconfig"></highchart>
</div>
I can't watch A to redraw manually my chart, cause it would be the same problem.
I don't want to know when A is true, but whenA is true AND ng-show ended to show the chart.
Any idea ?
Edit Solution : I found a solution. Creating a directives which look at the class of the element, like it is explained here :
Running code after an AngularJS animation has completed
Related
The content overflows after the echarts line chart refreshes the page...
It is normal to load the chart for the first timećbut after refreshing the page, the content overflow...
had tried '''this.echarts resize''' before '''setOption(option)''' it doesn't work....
//htmlPart yourEchartUsingElement
<div ref="myEchart"></div>
//JS Part this.optionCompleted is your echartData
var myChartCompleted = this.$echarts.init(this.$refs.myEchart);
myChartCompleted.setOption(this.optionCompleted)
myChartCompleted._dom.childNodes[0].childNodes[0].style.height="29rem"
myChartCompleted._dom.childNodes[0].childNodes[0].style.width="166.4rem"
You can use this method to get the DOM node of the canvas used by echarts and assign values to its properties. Every time the window changes, you execute these lines of code to re-render echarts (Google Translate)
I need to re-position an existing popover once Ajax data has been returned (size of data returned will vary) and I am doing this by modifying .css top and left for the popover in the completion block.
I can read the height and width with :
$popoverElement.height()
$popoverElement.width()
Then re-calculate positions for $popoverElement.css({top: newtop}) and $popoverElement.css({left: newleft}).
From looking at other posts, this seems to be the only option.
If data-placement of current popover is right, I just need to change top (to adjust the vertical position of the popover). However, if the data-placement is left then I also need to change the horizontal position of the popover.
How can I read the data-placement attribute of the popover, to use in an if clause? I am setting this attribute correctly in the page, but don't know how to reference it in my function.
EDIT : The reason I'm doing this, is because the arrow is no longer aligned when the popover resizes with the new content - this is the problem I am trying to solve, if there's a better way to achieve this, please let me know!
You can get it from the bs data object associated with the popover instance.
var popoverData = $popoverElement.data('bs.popover');
var popoverPlacement = popoverData.options.placement;
console.log(popoverPlacement);
You can use jQuery data() to read the current value (assuming the popover() has already been instantiated):
$popoverElement.data("placement");
http://www.codeply.com/go/33aPVnvfyy
I am trying to build a layout for my Sencha Touch 2.4 app.
I want a page with :
a panel
a list of data
another panel
And i want a global scroll. I don't want to get a scroll on the list itself. The list should take all the height it needs to contains all data.
I created a fiddle for that : here it is.
To see my problem, reduce the height of your brower window. All items are not visible anymore.
If you replace flex:1 by height:'400px', you will see what i try to obtain.
I tryed to set this size of the list when the painted event is triggered, with something like this :
listeners: {
painted: function() {
this.setHeight(this.itemsCount*(this.getItemHeight()+3));
}
but getItemHeight return a size that doesn't match the real size of each element.
Is there a clean way to get what i'm trying to achieve ?
On the site there are several pie charts. All diagrams are created immediately after the page loads. At the moment of creation, part of the diagrams is hidden (the parent layer display: none)
Visible charts are set correctly, hidden charts have parameter is incorrect width.
The layer of the diagram
<div id="DGramm" style="width: 100%;"> </ div>
The result - the diagram created on the entire width of the page, but no of the width of the parent layer. How to do the right, to take the width of the hidden layer?
At this point, all that came up - to create a chart after the first showing of the hidden layer.
You could trigger the window.resize event to update the Chart size. Add this script to your page.
$(document).ready(function () {
$(window).trigger('resize');
});
See the answer here. Thanks, david.
I'm using Isotope (http://isotope.metafizzy.co). Testing the reLayout method by using the example provided here (http://isotope.metafizzy.co/demos/relayout.html), copied the css, js to (http://punkbit.com/webzine/isotope.html) but when I click in the first element all other elements go to the first column. I wonder why this happens ?
If we do the same in the official example, it works properly, apparently!
I'd like to toggle a class in the first element and by doing that, having the other elements take the vertical space and positioned properly. I tried to change the width of the container, etc but no success!
I've also got the same issue happening with Masonry:
http://codepen.io/anon/pen/BKAdH
If clicking in the first element, it won't work. All elements will be placed in the first column.
Also tried different layout modes etc without success
Sorry,
I've found the answer:
http://punkbit.com/webzine/isotope2.html
The property "columnWidth" needs to be set.
For Masonry:
http://codepen.io/helderoliveira/pen/gwvjA