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: ["21 hours ago"] }, 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
Post a Comment