score:0
one option is to rebuild the chart when the data changes by using the $watch
option of angular.
close to the above example would be
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>chart.js demo</title>
<script src='chart.js'></script>
<script src='angular.js'></script>
<script src='angular-chart.js'></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<textarea ng-model="chart"></textarea>
<button ng-click="updateconfig();">update</button>
<canvas id="mychart"></canvas>
<script type="text/javascript">
getsample = function(n) {
var res = [];
for (var i = 0; i < n; i++) {
res.push(math.round(math.random() * 100));
}
return res;
}
var app = angular.module('app', ["chart.js"]);
app.controller("ctrl", function ctrl($scope, $interval) {
$scope.chart = '{"type": "line"}';
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.data = getsample(7);
$scope.updateconfig = function(testfunction) {
var ctx = document.getelementbyid("mychart");
var config = json.parse($scope.chart);
config["data"] = {
labels: $scope.labels, //should be a reference
datasets: [{
data: $scope.data //should be a reference
}]
}
var mychart = new chart(ctx, config);
};
$scope.$watch('data', function(){
var ctx = document.getelementbyid("mychart");
var config = json.parse($scope.chart);
config["data"] = {
labels: $scope.labels, //should be a reference
datasets: [{
data: $scope.data //should be a reference
}]
}
var mychart = new chart(ctx, config);
}, false);
$interval(function() {
$scope.data = getsample(7);
console.log("changed data to " + $scope.data);
}, 3000);
});
</script>
</body>
</html>
score:1
you are just updating the data but the chart has been already rendered on your view.so you need to draw it again with updated data. you can make a function to draw chart like this
function drawchart(element,dataset){
var mychart = new chart(element,{type:'bar',data:{labels:$scope.labels,datasets :dataset}})
}
and call it when your dataset get chanegd
Source: stackoverflow.com
Related Query
- Dynamically create Angular-Chart with data binding
- Chartjs random colors for each part of pie chart with data dynamically from database
- Angular chart how to show the legend data value by default along with legend name
- How to create chartjs chart with data from database C#
- Angular Charts.js: Can't refresh chart with data
- Update Chart js chart dynamically in angular 2 from data getting from nodejs service
- How to create a chart with chartjs.org with data from an array?
- Dynamically create chart with Chart.js and PHP
- How to create dynamically chart for Ionic App with Firebase data?
- Dynamically set chart type with Angular Chart?
- How to dynamically update data of line chart used with chart Js?
- Update Chart JS data dynamically and add new data, remove old data to create timeline "like" chart
- Changing chart data dynamically with C# from SQL database
- How to create a chart.js scatter chart with data from two lists
- how to create a bar chart with php data variables
- How to create a chart-js pie chart with PHP data variables?
- Chartjs create chart with big data and fixed labels
- Background color does not work when trying to create my data before using scatter chart with chart.js
- How to take data from an API and create a chart on that using Chart.js and Angular 8?
- Angular with ng2charts for bar chart shows NAN% when no data present
- Add data to line chart js dynamically with multiple lines
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- ChartJS - Draw chart with label by month, data by day
- line chart with {x, y} point data displays only 2 values
- Problem for display a chart with Chart.js and Angular
- Chart.js Dynamically Updating Chart with X Axis Time
- How to display data labels outside in pie chart with lines in ionic
- Show data dynamically in line chart - ChartJS
- Chartjs - data format for bar chart with multi-level x-axes
- ChartJs line chart - display permanent icon above some data points with text on hover
More Query from same tag
- How to make Radar chart's tooltips show "labels" in vue-chartjs?
- Adding an additional datasets to chartJS
- how can i show labels and value in both on bar chart
- dynamic number of chart.js charts on the same page
- Highlight area programmatically - Chart.js
- how to create line chart using chart.js in angular 2+
- How does one reproduce this plot in JavaScript?
- Issue related to the usage of the library Chart.js
- ChartJS shows up and disappears
- Chartjs Percents in Legend
- Multiple charts in one page - Chartjs
- Add dynamically function to Chart.js
- chartjs update() not updating
- Label Color same as backgroundColor - ChartJS
- live charts using chart.js
- Something similar to grace available in the latest chartJs for ChartJs 2.9.3
- How to implement doughnut ChartJS with CodeIgniter 3 and display data from database
- Displaying a chart using Chart.js
- Add new line in es6 inside a doughnut chart
- Chart.js - Changing value of hover labels
- add info for points in line chart (js)
- Real time colored bar chart
- Am I missing a chart.js component or helper?
- ChartJS remove vertical grid lines one on two
- Merge Jquery Knob Functionality in Chart Js
- Chart.Js : How to change the color of a point, based on a third data
- My chart is not shown on browser screen using chart.js in meteor
- undefined labels piechart - chartjs
- Chart.js chart flickering when re-opening page
- chart js graph not showing on canvas