html - Morris.js chart doesn't display properly within Polymer core-animated-pages > section > core-animated-pages > section > card > div -
i'm designing webpage using polymer. there's section within core-animated-pages contains card. i've got javascript generates chart using morris.js , inserts div on aforementioned card.
here's problem, no matter width/height set div chart doesn't display properly. here screenshot: apparently need more reputation this?
link: http://i.stack.imgur.com/agi3z.jpg
but, if resize window (i've got morris' resize function enabled), resizes properly.
http://i.stack.imgur.com/mx7me.jpg
i've tried using chart.js instead, that, chart doesn't display @ all. i'm confident it's not problem js, because if copy js jsbin, can chart display using both morris , chart.js
here of html morris chart being inserted:
<body unresolved fullbleed> <template is="auto-binding"> <div style="height:100%;width:100%;position:absolute;"> <core-animated-pages id="selector" selected="0" transitions="hero-transition cross-fade-all cross-fade"> <section id="lighting-analysis"> <div id="headerpanel" hero-id="header" onclick="selectpage('selector', 0)" horizontal layout> <div hero hero-id="header1" flex style="background-color:white; height:100px; margin-right:-3px;"></div> <core-image hero hero-id="header2" src="header.png" height="100px" width="100px" sizing="cover" position="center"></core-image> <div hero hero-id="header3" flex style="background-color:white; height:100px; margin-left:-3px"></div> </div> <core-animated-pages id="form1" selected="0" transitions="slide-from-right" cross-fade> <section> <div class="card" slide-from-right> //blahblahblah </div> </section> <section> <div class="card" slide-from-right> //blahblahblah </div> </section> <section> <div class="card" slide-from-right style="height: 600px;"> <div horizontal layout flex cross-fade> <div class="nav" flex onclick="changepage('form1',0)"> <core-icon icon="arrow-back"></core-icon>prev </div> <div class="nav" flex style="text-align:right;" onclick="changepage('form1',1)"> next <core-icon icon="arrow-forward"></core-icon> </div> </div> <p>maintenance , operation cost ($)</p> <div id="morris-bar-chart" width="400px" height="400px"></div> <div id="savingscomment" style="font-size:24px; text-align: center"> </div> </div> </section> </core-animated-pages> </section> <section id="lighting-designer"> </section> </core-animated-pages> </div>i'm pretty new apologise if i'm missing obvious, i've spent time @ stage trying work around it, think it's time appeal community haha.
thanks, nas
update: ok i've solved own problem in 'ugly' way trying avoid. i've put button initiates function generates graph on same graph displayed.
i'm guessing problem related raphael grabbing div dimensions while div wasn't being displayed, resulting in weird sizing values. tried couple of workarounds couldn't of them work.
i've feeling core-animated-pages-transition-prepare may intended in exact situation, i'm afraid i've no idea how use it, , finding examples can understand proving difficult.
if has ideas on how solve this, i'd appreciate it. while 'works,' fact i've had add unnecessary button presses user making brain itch.
update 2: so, can't leave alone.
i added function, called when button clicked go page graph displayed , passed function generate graph.
function gengraph(func) { $("#form1").on("core-animated-pages-transition-end", func); }but error:
uncaught typeerror: ((m.event.special[e.origtype] || (intermediate value)).handle || e.handler).apply not function m.event.dispatch @ jquery-1.11.2.min.js:3 m.event.add.r.handle @ jquery-1.11.2.min.js:3 utils.fire @ polymer.js:9029 polymer.mixin.complete @ core-animated-pages.html:394 (anonymous function) @ core-animated-pages.html:407 job.complete @ polymer.js:8636 settimeout (async)job.go @ polymer.js:8621 job @ polymer.js:8647 base.job @ polymer.js:9779 polymer.mixin.transitionend @ core-animated-pages.html:406 events.dispatchmethod @ polymer.js:9129 events.geteventhandler @ polymer.js:10713 utils.fire @ polymer.js:9029 polymer.complete @ core-transition-pages.html:155 i'm guessing i'm not using event properly. close i've gotten.
this code core-animated-pages.html (i think) fires event i'm trying use trigger function:
complete: function() { if (this.animating) { this.cancelasync(this.animating); this.animating = null; } this.transitioning.foreach(function(t) { t.removeattribute('animate'); }); this.transitioning = []; this._transitionelements.foreach(function(transition) { transition.ensurecomplete(this); }, this); this.fire('core-animated-pages-transition-end'); },
Comments
Post a Comment