Closed feruzm closed 8 years ago
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(); });
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.
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.
+1 and sorry for deleting comments
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?
What are the values of scope.chart.height
and scope.chart.width
? Maybe you need to add px
to the markup element?
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.
Can you post a jsbin?
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
Event is called chart-create
in alpha6
.
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
Well you just have to read the beginning of the readme...
Plus more in the readme...
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?
It's the chart-click
option.
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.
My chart data not updating $scope.$on('chart-update',function(evt, chart){ chart.update(); })
is not working
on window resize event chart-update and chart-create event not fired. Any solution
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