Question: Reload/Redraw canvas chart

[feruzm]

I wonder if there is redraw or refresh/reload functionality so that I can access it from controller?

I saw this following

If you want to reload the canvas send a broadcast using: $scope.$broadcast("$reload", {}); This wil repaint the charts (for example when a chart became visible)

in https://github.com/leonetnl/angular-chart.js

[feruzm]

Further checking showed that only line 130 has this extra maybe can be considered in future releases if no alternative available now?!

     scope.$on('$reload', function () {
         if (chart) chart.update();
     });

[johannesjo]

I'm also wondering how to do this. It's possible to do this in a hacky way with ng-if, but an actual redraw trigger would be nice.

[jtblin]

You can get a reference to the chart using the create event so you can call chart.update() when you would normally broadcast the reload event. I'll consider that for a next release.

[jtblin]

https://github.com/jtblin/angular-chart.js#events

[JobaDiniz]

+1 and sorry for deleting comments

[JobaDiniz]

I set responsive=false and mantainAspectRatio=false, and I calculate the width and height myself (because I'm using Gridster). Apart from the legend being cut off, it works.

However, when I change the width of the gridster item I then reset the width/height of the chart:

var chart;
var debounceResize = debounce(3000, onGridsterResized);
scope.$on('gridster-item-resized', debounceResize);
scope.$on('create', onChartCreated);

function onChartCreated(event, newValue) {
                chart = newValue;
            }

function onGridsterResized(event) {
                if (chart) {
                    $timeout(function () {
                        scope.chart.height = $('.panel-body', element).height();
                        scope.chart.width = $('.panel-body', element).width();
                        chart.resize();
                    });
                }
            }

Template

<div class="panel panel-default panel-shadow">
    <div class="panel-heading">
        <div class="panel-title">{{widget.Title}}</div>
    </div>
    <div class="panel-body">
        <canvas height="{{chart.height}}" width="{{chart.width}}"
                class="chart-base"
                chart-type="chart.type"
                chart-data="chart.data"
                chart-labels="chart.labels"
                chart-series="chart.series"
                chart-options="chart.options"
                chart-legend="true"></canvas>
    </div>
</div>

I'm calling chart.resize() however the chart disappears and only shows itself when I mouse over its area (triggering tooltip). Why is that happening?

[jtblin]

What are the values of scope.chart.height and scope.chart.width? Maybe you need to add px to the markup element?

[JobaDiniz]

I tried:

chart.resize(function(){
  chart.reflow();
  chart.render();
});

This kinda works... When resizing, and calling the above code, chart gets a little messed up. The only way I get it to work was to remove <canvas> DOM completely and insert a new one with the new width/height.

[jtblin]

Can you post a jsbin?

[cmrenus]

Im checking for the create event in my code but it never happens. Is it not implemented? Im using 1.0.0-alpha6 and chartjs version 2.1.5

[jtblin]

Event is called chart-create in alpha6.

[cmrenus]

Thanks. I remember seeing that in some threads now that everything is "chart-". You should emphasize that more within documentatino. Spent real long time trying to figure that out. Also I don't know if this is something that you or chart.js should do, but an actual drilldown funcitionality like highcharts has would be so good

[jtblin]

Well you just have to read the beginning of the readme...

Plus more in the readme...

https://github.com/jtblin/angular-chart.js/tree/chartjs-2.0

[cmrenus]

ah my apologies. I was looking probably at old README and most threads have the old version info. Quick irrelevent question, is there a way to set the chart-click attribute within the js when creating a new chart?

[jtblin]

It's the chart-click option.

[jtblin]

You can now emit a $resize event on scope on 1.x which will trigger the resize: aa2dc93. Chart is automatically updated when data or other options change. Closing this issue.

[prashasti4]

My chart data not updating $scope.$on('chart-update',function(evt, chart){ chart.update(); })

is not working

[DurgpalSingh]

on window resize event chart-update and chart-create event not fired. Any solution