I’m using the canvasjs to plot stacked bar chart in angularjs web app.
I got the json api through http promise. but the chart is not rendering, can somebody help me?
here is the chart function :
var draw = function(data) {
var dataPoints = [];
var dataPoints2 = [];
var dataPoints3 = [];
var dataPoints4 = [];
var chart = new CanvasJS.Chart(“chartContainer”, {
animationEnabled: true,
theme: “light2”,
title: {
text: “MONTHLY OEE CHART”
},
axisY: {
title: “Units”,
titleFontSize: 24
},
data: [{
type: “stackedColumn”,
dataPoints: dataPoints
},
{
type: “stackedColumn”,
dataPoints: dataPoints2
},
{
type: “stackedColumn”,
dataPoints: dataPoints3
},
{
type: “stackedColumn”,
dataPoints: dataPoints4
}]
});
function addData(data) {
for (var i = 0; i < data.length; i++) {
dataPoints.push({
x: data[i].MONTH,
y: data[i].OEE
});
dataPoints2.push({
x: data[i].MONTH,
y: data[i].H1
});
dataPoints3.push({
x: data[i].MONTH,
y: data[i].H2
});
dataPoints4.push({
x: data[i].MONTH,
y: data[i].H3
});
}
chart.render();
}
}
and in the angular controller I have this:
function loadData(data_url,name) {
url = data_url;
function success(res) {
console.log(name, res.data);
$scope.name = res.data;
draw($scope.name);
}
function error() {
$scope.data_2018 = ‘No data found’;
}
$http.get(url).then(success, error);
};
loadData(“/api/oee_world1”,’data_test’)
.
