71608

ui-jq flot chart on lazy load

Question:

I have the 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 is %y.4', defaultTheme: false, shifts: { x: 0, y: 20 } }, redrawOverlayInterval: 60 } " style="height:240px"> </div>

The data for this chart is being loaded by a $http get request:

$http.get(api.getUrl('latestActivityByTeamAndModule', [$scope.team_id, $scope.module_id])) .success(function(response){ var i = 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 i force reload (F5) the chart is empty. HOWEVER the html is correctly updated:

<strong>From inspecting the element in chrome:</strong>

<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 is %y.4', defaultTheme: false, shifts: { x: 0, y: 20 } }, redrawOverlayInterval: 60 }" style="height: 240px; padding: 0px; position: relative;">

im guessing its because of the lazy load so that it does not redraw on the data change?

Answer1:

Try adding <strong>ui-refresh</strong>

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

Where <strong>ui-refresh</strong> value is the literal name of <strong>ui-options</strong> <em>data</em> value name.

Recommend

  • Flot wont upload JSON
  • My google map (static html with JS) won't show up suddenly?
  • Line Graph using Flot is over Lapping
  • MongoDb Pipeline Aggregation sorting sub sub documents
  • How do I selecting a date range (like onClick but drag/select)
  • mysql what is the right syntax for this conditional update statement
  • How to get mouse position in chart-space
  • How to order or choose rows in MySQL GROUP BY clause?
  • Why is my database not being updated when someone visits my website?
  • How to center the y-axis label horizontally in Highcharts?
  • path fill color in d3
  • What is the logic behind d3.js nice() ticks
  • change border/color onFocus
  • Email SAS html output
  • how to convert JSONString to Javascript Object
  • Why does adding overflow: hidden make the child element's margin work?
  • Get row for each user where the count of a value in a column is maximum
  • Color a heatmap in Python/Matplotlib according to requirement
  • How to start server for Selenium grid Java Maven setup
  • jParallax trouble
  • Allocating a 2D contiguous array within a function
  • Dynamically load css stylesheet and wait for it to load
  • Enumerating Controls on a Form
  • C# List of Panels
  • Django foreign key drop down
  • order post according to custom array position
  • Create Instant using a negative year
  • MS Access - How to change the linked table path by amend the table
  • Blackberry - Custom EditField Cursor
  • How to Cache Real-time Data?
  • Avoid links criss cross / overlap in d3.js using force layout
  • Body moving without any force applied? (Box2d)
  • What is the “return” in scheme?
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Bug in WPF DataGrid
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • KeystoneJS: Relationships in Admin UI not updating
  • trying to dynamically update Highchart column chart but series undefined
  • Android Google Maps API OnLocationChanged only called once
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize