javascript - Strange Angular-ChartJS issue, not displaying correctly in Ionic App -


i'm building ionic app angularjs. in app want line-chart of data. yesterday asked question (angular-chart not rendering anything) answered, there's new problem.

sometimes chart instantly visible, when rotate screen between landscape/portrait keeps getting bigger every rotation. other times graph not visible @ (except legend) till rotate screen times.

when check out web inspector on iphone see html-attributes height gets bigger everytime. same css-height style.

the html in web-inspector looks this: (this when graph on inactive tab)

<div ng-show="graph.visible &amp;&amp; finishedloading" class="ng-hide" style="">   <div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getcolour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="424" style="width: 288px; height: 212px;">   </canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>ondergrens</li></ul></chart-legend></div> </div>

after making tab active html looks this:

<div ng-show="graph.visible &amp;&amp; finishedloading" class="" style="">   <div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getcolour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="424" style="width: 288px; height: 212px;">   </canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>ondergrens</li></ul></chart-legend></div> </div>

this time graph instantly visible, not case. think has web-inspector. when don't have web inspector open, legend visible.

after rotating landscape , portrait 4 times, html looks this:

<div ng-show="graph.visible &amp;&amp; finishedloading" class="" style="">   <div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getcolour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="816" style="width: 288px; height: 408px;">   </canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>ondergrens</li></ul></chart-legend></div> </div>

as can see, height gets bigger every rotation.

the html-file looks this:

<div ng-show="graph.visible && finishedloading">   <canvas      class="chart chart-line"     data="graph.data"     labels="graph.labels"     options="graph.options"     series="graph.series"     colours="graph.colours"     getcolour="graph.getcolour"     click="graph.click"     hover="graph.hover"     legend="graph.legend">   </canvas> </div>

the $scope.graph looks this:

  $scope.graph = {     data: [       [], // value       [], // upper value       [] // lower value     ],     labels: [],     options: {       animation: false,       pointdotradius : 2,       datasetfill : false,       responsive: true,       maintainaspectratio: false,       scalegridlinecolor : 'rgba(0, 0, 0, .1)',       showtooltips: false     },     series: ['waarde', 'bovengrens', 'ondergrens'],     colours: ['#46bfbd', '#f7464a', '#fdb45c'],     // getcolour:     // click:     // hover:     legend: true,     visible: false   }

and values set here:

  function loadgraphdata() {     $scope.graph.data = [       [], // value       [], // upper value       [] // lower value     ];     $scope.graph.labels = [];      (var key in $scope.results) {       var result = $scope.results[key];        $scope.graph.data[0].push(result.value);       $scope.graph.data[1].push(result.high);       $scope.graph.data[2].push(result.low);        $scope.graph.labels.push($filter('date')(result.date, 'dd mmm hh:mm'));     }   };

which called once request has finished loading, before tab graph visible.

the css have applied canvas is:

canvas {     width: 100%!important;     height: 100%!important; }

i hope problem clear , can me out. i've tried think of. if more info needed, let me know!

edit// note: when put graph on first tab (which active) graph instantly visible, has same strange issue of getting bigger when resizing browser window..

try after adding crosswalk plugin. hope works. plugin documentation here


-

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

overview i want replace oracle.dataaccess orcale. managed dataaccess, opening connection latter throws ora-12537 network session end of file exception. exception message / stack trace {oracleinternal.network.networkexception (0x000030f9): ora-12537 : netzwerksession: dateiende @ oracleinternal.network.readerstream.read(orabuf ob) @ oracleinternal.ttc.orabufreader.getdatafromnetwork() @ oracleinternal.ttc.orabufreader.read(boolean bignoredata) @ oracleinternal.ttc.marshallingengine.unmarshalub1(boolean bignoredata) @ oracleinternal.ttc.ttcprotocolnegotiation.readresponse()} i trying connect oracle 11g database , not have client installed on local machine. working test application (unmanaged) using oracle.dataaccess works fine . using system; using oracle.dataaccess.client; namespace app.odp.unmanaged { internal class program { private static void main(string[] args) { //dummy connection string...
Read more

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

i want compress , decompress ecg signal stored text message text file , find out file size, cr,prd ratio,and qs. here code compression , decompression of ecg signal using huffman algorithm. i'm trying find out file size, compression ratio,prd ratio,qs. but error i'm getting the ecg file in text format. %clearing variables , screen enter code here clear all; close all; clc; [file1]=uigetfile('*.txt'); %fprintf('enter ecg file name :%s',file1); p=file1; t=sprintf('%s',p); b1=dlmread([file1]); len=length(b1); lead=input('enter lead number :'); %lead=str2double(lead); col2=b1(1:end,lead); e=fix(sqrt(len)); m=1; i=1:e j=1:e g2(i,j)=fix(col2(m)*1000); %amplifying 1000 m=m+1; end end g3=g2; i=1:e j=1:e ...
Read more

utf 8 - split utf-8 string into bytes in python -

i trying split utf-8 string bytes in python 3. problem is, when use bytearray, byte, encode etc functions array size of element 14 bytes, not 1 byte expected. need split text file sequence of bytes , send them byte after byte using sockets. tried this: infile = open (file, "r") str = infile.read() byte_str = bytes(str, 'utf-8') print("size of byte_str",sys.getsizeof(byte_str[0])) print gives me 14, need 1... suggestion? quoting official documentation : sys.getsizeof(object[, default]) return size of object in bytes. object can type of object. built-in objects return correct results, not have hold true third-party extensions implementation specific. only memory consumption directly attributed object accounted for, not memory consumption of objects refers to. if given, default returned if object not provide means retrieve size. otherwise typeerror raised. getsizeof() calls object’s __sizeof__ method , adds ...
Read more