angularjs - Morris Chart with angular and dynamic data -

-

i need area chart using angular directive , data fetched database problem after fetching data ,chart not appear , when use static data chart appears fine.and chart update after 10 seconds requirement.

 var myapp=angular.module('myapp',['ngroute']);         myapp.controller('graphcontroller',         function(datafactory,$scope,$http,$timeout){              var getdata=function() {                 datafactory.httprequest('/graph').then(function (data) {                     console.log(json.stringify(data));                     $scope.mymodel=json.stringify(data);                      $timeout(getdata, 1000);                  });              }             $scope.xkey = 'id';             $scope.ykeys = ['id',     'value'];             $scope.labels = ['id', 'value'];             $timeout(getdata, 1000);              /*  static data , when these static data use in getdata function ,it didnot work.            $scope.mymodel = [                         {"id":21,"yr":2000,"value":80},                         {"id":1,"yr":2001,"value":5},                         {"id":2,"yr":2002,"value":6},                         {"id":3,"yr":2003,"value":17},                         {"id":4,"yr":2004,"value":5},                         {"id":5,"yr":2005,"value":22},{"id":7,"yr":2006,"value":41},                         {"id":9,"yr":2007,"value":11},{"id":10,"yr":2008,"value":33},                         {"id":8,"yr":2009,"value":77},{"id":6,"yr":2010,"value":55},                         {"id":11,"yr":2011,"value":55},{"id":12,"yr":2012,"value":66},                         {"id":13,"yr":2013,"value":77},{"id":14,"yr":2014,"value":50},                         {"id":15,"yr":2015,"value":22},{"id":16,"yr":2016,"value":77},                         {"id":17,"yr":2017,"value":41},{"id":18,"yr":2018,"value":20},                         {"id":19,"yr":2019,"value":9},{"id":20,"yr":2020,"value":2},                         {"id":23,"yr":2022,"value":1}                     ];*/           });          myapp.directive('areachart',function(){ //directive name must in small letters             return {                 // required make work element                 restrict: 'e',                 template: '<div></div>',                 replace: true,                 link:function($scope,element,attrs)                 {                     var data=$scope[attrs.data],                         xkey=$scope[attrs.xkey],                         ykeys=$scope[attrs.ykeys],                         labels=$scope[attrs.labels];                     morris.area({                         element:element,//element means id #                         data:data,                         xkey:xkey,                         ykeys:ykeys,                         labels:labels,                         parsetime: false,                         ymax:120,//max. bound y-values                         linecolors: ['#0b62a4', '#d58665'],//array containing colors series lines/points.                         smooth: true,//set false disable line smoothing.                         hidehover: 'auto',//set false show hover legend.                         pointsize: 4,//diameter of series points, in pixels.s                         axes:true,//set false disable drawing x , y axes.                         resize: true,//set true enable automatic resizing when containing element resizes                         fillopacity:1.0,//change opacity of area fill colour. accepts values between 0.0 (for transparent) , 1.0 (for opaque).                         grid:true,//set false disable drawing horizontal grid lines.                      });                 }             }         })

html page

<body ng-app="myapp">         <div ng-controller="graphcontroller">             <areachart xkey="xkey" ykeys="ykeys" labels="labels" data="mymodel"></areachart>         </div> </body>

try $scope.mymodel=json.parse(data); insted of $scope.mymodel=json.stringify(data);


Comments

Post a Comment

Popular posts from this blog

html - Styling progress bar with inline style -

-
i trying set progress bar color red using inline style. need in way because have access <body> part of document. style need apply: progress { color: red } progress::-moz-progress-bar { background: red;} progress::-webkit-progress-value { background: red; } progress[aria-valuenow]:before { background: red; } i tried <progress style="background: red;"> incorrect effect, progress bar color turns blue red background. guide right direction desired style? thank in advance. here live example: https://jsfiddle.net/z36d3f6l/
Read more

java - Oracle Sql developer error: could not install some modules -

-
i have downloaded fresh copy of sqldeveloper ( sqldeveloper-4.1.3.20.78-no-jre ) oracle website. when unzip , lauch gui, keep getting following error message: warning - not install modules: dynamic module config - no module providing capability org.netbeans.netbinox found. my system: windows 7 32 bit hp probook. jdk 1.6 , 1.7, 1.8 available in java/jdk subdirectory. netbeans 8.0.2 installed finally got way out after dirty hours. extracted sqldeveloper zip in nested directory. i.e: e://a/b/c/sqldeveloper. starting sqldeveloper gui above directory threw erros. solution: go in c:\users**username**\appdata\roaming : delete sql developer , sqldeveloper folders extract sql developer zip in new non nested directory. i.e: e:// start , should work now reference: https://community.oracle.com/thread/3870680?start=0&tstart=0
Read more

How to use autoclose brackets in Jupyter notebook? -

-
this may sound silly question, how make use of autoclose brackets in jupyter notebook? example, when type print( jupyter notebook auto-closes brakets print() and places cursor inside. type argument, say print(1 + 1) now cursor between second 1 , right bracket ) . key navigate right of ) ? of course can press end or → or ) achieve this, not seem save time, purpose of brackets autoclose suppose? thanks in advance.
Read more