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:

From inspecting the 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 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?

Answer 1

Try adding ui-refresh

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

Where ui-refresh value is the literal name of ui-options data value name.