angular-chart

Why does chart update fail when its container has ng-show on it?

由 点点圈 提交于 2020-02-08 07:41:13
问题 I have a compiled directive that contains an angular-charts.js directive in it. I've noticed that when the container of that chart has ng-show or ng-hide as an attribute, the chart wont update -- it just doesn't show at all. Here is a plunker that demonstrates this (see listeningComponent in scripts.js directive) 回答1: Here the problem is not with the ng-show and ng-hide attribute. The root cause behind this is is DOM manupulation. Here ng-show condition is executing first and directive is

Why does chart update fail when its container has ng-show on it?

由 梦想与她 提交于 2020-02-08 07:40:07
问题 I have a compiled directive that contains an angular-charts.js directive in it. I've noticed that when the container of that chart has ng-show or ng-hide as an attribute, the chart wont update -- it just doesn't show at all. Here is a plunker that demonstrates this (see listeningComponent in scripts.js directive) 回答1: Here the problem is not with the ng-show and ng-hide attribute. The root cause behind this is is DOM manupulation. Here ng-show condition is executing first and directive is

Render a legend on angular-chart.js doughnut chart

由 泪湿孤枕 提交于 2020-01-11 04:25:47
问题 I've followed angular-chart.js documentation, and created a chart, but am unable to render a legend with it. I don't understand why its not working. Documentation: http://jtblin.github.io/angular-chart.js/ Similar SO question: How to color legend in angular-chart.js <div class="panel-body" ng-controller="CircleCtrl" style="display: block;"> <div class="chart-container" style="width:400px; height:200px;"> <canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels

How to have solid colored bars in angular-chart bar chart

由 浪子不回头ぞ 提交于 2019-12-29 08:43:12
问题 I'm using angular-chart (based on chart.js) to create some bar charts and am having trouble getting the bar styling I want. I want the bars to be solid colors like this: But I can't figure out how to get rid of the alpha that chart.js adds by default: My html looks like this: <body ng-app="myApp" ng-controller="myController as ctrl"> <canvas id="outreach" class="chart chart-bar" chart-labels="ctrl.socialChart.labels" chart-data="ctrl.socialChart.data" chart-series="ctrl.socialChart.series"

Can we draw google chart with two y-axis one with top and other with bottom, with same x-axis?

由 五迷三道 提交于 2019-12-20 05:12:33
问题 I need to use google chart with two y-axis and one x-axis, like (https://en.wikipedia.org/wiki/Spirometry#/media/File:Flow-volume-loop.svg). Does google chart support this type of graph? 回答1: to create a graph as referenced by the link use a single y-axis, with negative values for the bottom portion then use object notation to set both the value ( v: ) and the formatted value ( f: ) {v: -8, f: '8'} then use the same notation for the y-axis tick marks ( ticks: ) the chart will display the

Getting access to already created Chart.js chart

由 佐手、 提交于 2019-12-13 14:44:22
问题 I have created a BarChart with angular-chart like this: <canvas id="bar" chart-data="ctrl.barChartData" chart-options="ctrl.barChartOptions" chart-labels="ctrl.barChartLabels" chart-series="ctrl.barChartSeries" chart-click="ctrl.chartClick" class="chart chart-bar"> </canvas> I have wrote a chartClick function based on some example and looks like this: vm.chartClick = function(evt){ var myBarChart = //how I can obtain a access to my created bar chart? var activePoints = myBarChart

angular-chart zero dimensions inside angular-strap panel

由 天涯浪子 提交于 2019-12-13 06:39:45
问题 I'm trying to render an angular-chart (based on chart.js) chart inside a bootstrap panel. Currently the chart does not swho at all when inside the panel but does show when placed outside the panel. When I view the source in the browser I see the height and width are set to zero. chart does not display <div class="panel-group" ng-model="experiments.active" role="tablist" aria-multiselectable="true" bs-collapse> <div class="panel panel-default" ng-repeat="experiment in experiments"> <div class=

Angular Chartjs How to make it reactive to data change?

由 别来无恙 提交于 2019-12-13 01:03:53
问题 I'm trying to write an app that will show some data from API and during the work I will be able to change time and date range that I would like to show on the chart. Right now I am fighting with basic data change. I have a simple chart code: HTML: <button type="button" class="btn btn-success" ng-click="ReloadChart();">Reload</button> <div class="col-lg-12 col-sm-12" id="line-chart" ng-controller="LineCtrl"> <div class="panel panel-default"> <div class="panel-heading">Line Chart</div> <div

Refreshing scope variable not working with scope function

由 老子叫甜甜 提交于 2019-12-12 05:15:43
问题 I'm trying to update data of my chart using chartJS and its wrapper angular-chart. When a button is clicked, it adds data on the chart, no problem with this. I have another event, which update the chart after a scroll event. The call works great, and it calls exactly the same function as previous. But my $scope.valuesData isn't updated . Then I added a $scope.$apply() after the function, and it redraws the whole chart with the right values. Question are : Why does my $scope.chartValues is not

Angular-Chart-JS - Line chart with different fill colors according to points' range

由 自作多情 提交于 2019-12-12 03:38:59
问题 I'm using Angular-Chart-js for my website to display some types of graphs, one of them is a line chart. I would like the line chart to be color-filled, but with different colors according to the y-axis' value. Like in this photo: I've tried to have different data arrays in the "data" array of the graph, the first one has all the values, the second one has all but the ones painted in green (on the right), the third is the same array only until the purple range etc. and then have for each
订阅 angular-chart