javascript - ui-jq flot chart on lazy load -


i have following html:

    <div id="test" ui-jq="plot" ui-options="       [         { data: {{line}}, points: { show: true, radius: 6}, splines: { show: true, tension: 0.45, linewidth: 5, fill: 0 }, label: 'akademi' },       ],       {         colors: ['{{app.color.info}}', '{{app.color.success}}'],         series: { shadowsize: 3 },         xaxis:{           font: { color: '#ccc' },           position: 'bottom',                   ticks: {{categories}}         },         yaxis:{ font: { color: '#ccc' } },         grid: { hoverable: true, clickable: true, borderwidth: 0, color: '#ccc' },         tooltip: true,         tooltipopts: { content: '%x.1 %y.4',  defaulttheme: false, shifts: { x: 0, y: 20 } },         redrawoverlayinterval: 60       } " style="height:240px"> </div> 

the data chart being loaded $http get request:

    $http.get(api.geturl('latestactivitybyteamandmodule', [$scope.team_id, $scope.module_id]))     .success(function(response){         var = 0;         $scope.line = [];         $scope.categories = [];         response.foreach(function(y){             var log_date = y.date.substr(0, y.date.indexof('t'));             var date = new date(log_date);             var logg_date = moment(date).fromnow();             $scope.categories.push(logg_date);             $scope.line.push(y.num_taken);         });     }); 

sadly when force reload (f5) chart empty. html correctly updated:

from inspecting element in chrome:

<div id="test" ui-jq="plot" ui-options="[                             { data: [4], points: { show: true, radius: 6}, splines: { show: true, tension: 0.45, linewidth: 5, fill: 0 }, label: 'akademi' },                           ],                           {                             colors: ['#23b7e5', '#27c24c'],                             series: { shadowsize: 3 },                             xaxis:{                               font: { color: '#ccc' },                               position: 'bottom',                                       ticks: [&quot;21 hours ago&quot;]                             },                             yaxis:{ font: { color: '#ccc' } },                             grid: { hoverable: true, clickable: true, borderwidth: 0, color: '#ccc' },                             tooltip: true,                             tooltipopts: { content: '%x.1 %y.4',  defaulttheme: false, shifts: { x: 0, y: 20 } },                             redrawoverlayinterval: 60                           }" style="height: 240px; padding: 0px; position: relative;"> 

im guessing because of lazy load not redraw on data change?

try adding ui-refresh

<div id="test" ui-jq="plot" ui-refresh="line" ui-options="[{ data: {{line}}, ... }, ... ]"></div> 

where ui-refresh value literal name of ui-options data value name.


Comments

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

python - Mongodb How to add addtional information when aggregating? -

java - Incorrect order of records in M-M relationship in hibernate -