score:2
Accepted answer
I created a Plunker with a working example. To simplify I only pull the data (not the labels, etc.), but that is easy to complete.
In the controller, we assign vm to this and in the function getData I reference vm.data. Before you had $scope which is a different $scope in the function that the one you assign as a blank array.
.controller('MyCtrl', ['$scope', 'HRDataPointFactory', function($scope, HRDataPointFactory) {
var vm = this;
//The following lines cause the chart to populate, but obviously I dont care about this fake data.
vm.labels = ["January", "February", "March", "April", "May", "June", "July"];
vm.series = ["Series A", "Series B"];
// vm.data = [
// [65, 59, 80, 81, 56, 55, 40],
// [28, 48, 40, 19, 86, 27, 90]
// ];
vm.onClick = function(points, evt) {
console.log(points, evt);
};
vm.data = [
[]
];
vm.getData = function() {
HRDataPointFactory.getData($scope.department, $scope.dt1, $scope.dt2)
.then(function(success) {
console.log(JSON.stringify(success));
vm.data = success.data;
});
}
vm.getData();
/*unrelated stuff here*/
}])
I print in the console the data I receive:
{"data":[[65,59,80,81,56,55,40],[28,48,40,19,86,27,90]],"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"params":{},"url":"data","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}
The data is hosted on plunker too using this as a format:
[
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
]
Please not that I also used the "Controller as" syntax in the HTML to respect best practices... see john papa's article on this subject.
<div ng-controller="MyCtrl as vm">
<canvas id="line" class="chart chart-line" chart-data="vm.data"
chart-labels="vm.labels" chart-legend="true" chart-series="vm.series"
chart-click="onClick">
</canvas>
</div>
Let us know.
Source: stackoverflow.com
Related Query
- Angular Charts.js: Can't refresh chart with data
- Angular chart how to show the legend data value by default along with legend name
- Charts with previous data appear when hovering the cursor over the chart in Chart.js
- Angular with ng2charts for bar chart shows NAN% when no data present
- Chartjs random colors for each part of pie chart with data dynamically from database
- 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
- How to display data labels outside in pie chart with lines in ionic
- 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
- Series Details Not Showing in Angular Chart with Charts.js
- How to update data Chart in async way in Angular Chart.js?
- Show "No Data" message for Pie chart with no data
- Populating javascript chart with Razor model data
- Using data from API with Chart JS
- chart js with angular2 loading dynamic data only after zoomin
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to achieve the best possible performance with mutable data and real-time charts in React?
- Chart JS not showing On hover with small data
- How to create chartjs chart with data from database C#
- ERROR TypeError: "this.canvas is undefined" | Problem with creating a chart with angular and chart.js
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
- Angular / ng2-charts: Fetching json data in chart object showing: Cannot read property 'length' of undefined
- How to use JSON data in creating a chart with chartjs?
- How can I load multiple Chartjs charts with different data on the same page?
- Angular 2: How to pass my API data to graph and Display the Graph with data
- Doughnut Chart not displaying data with Chart Js and Backbone js
More Query from same tag
- How to enable timescale in chart.js line chart?
- Can't display chart.js after fadeOut the pageloader
- chart.js pie chart - how to update dataset with smooth transition
- convert csv to json for javascript plotting library chartjs in Python or PHP
- Chartjs (Non Vue) Not Rendering Graph Chart inside V-if/V-show
- How to add a dataset toggle to Chart.js?
- Why does nuxt give me this error with vue-chartjs?
- Prevent scroll when calling update()
- Cannot make my chart to work with data from mongoDB
- generate basic pie chart using chartjs
- How could chartjs font family display everywhere
- ReactJs: componentWillReceiveProps doesn't get called for component whose redux action gets dispatched last
- ChartJS Stacked Group with labels on each bars
- How can I draw lines inside the bars in charts.js?
- Chart JS: Donut/Doughnut Chart: Tooltip to be shown always for all the data. All tooltip is not shown when multiple data are with 0 data
- Convert date label on Y-axis Line Chart to specific date format
- How to add an extra tick on top of the highest bar in Chart.js v2.9.4 (grace)?
- Chart.JS Mixed Chart - Bars Not Showing
- chartjs update() not updating
- Chartjs: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'HALF_PI')
- How to use images as key for chart.js legend
- Return List<object> from webservice
- Hide x-Axis from angularjs-chartjs
- Why are the chartjs tooltip labels always showing the first x-axis label?
- How to address type errors when removing data with chart.js?
- chart js not dispalying data array that comes from an axios request
- Change Angular js charts.js chart type dynamically
- How can I style scale numbers in a Polar Area chart (chart.js)
- How to remove the Chart.js x Axis bottom line?
- How to use chartjs-plugin-datalabels for specific charts using vue-chart.js