I have integrated angular-charts directives into my application and everything works perfectly when initializing the data. However, I encountered an issue when reading the data from a JSON file and assigning it to the chart. The x-axis and y-axis are generated but the legends are missing. Below is the code snippet:
HTML:
<div id="content" ng-controller="MainCtrl1" class="box-content">
<div style="position:relative">
<div data-ac-chart="'bar'" data-ac-data="widget.data" data-ac-config="config" class="chart">
</div>
</div>
This is how I read the data from a file:
<div class="col-lg-6 col-md-6">
<div class="form-group">
<div >
<input type="file" on-read-file="showContent($fileContent)" />
</div>
</div>
App.JS:
$scope.data = {
"series": ["Northern", "Western", "Southern", "East", "Center"],
"data": [ {
"x": "Mahinda",
"y": [90, 800, 600,100,900]
}, {
"x": "Maithiri",
"y": [351,439,380,800,300]
}, {
"x": "Others",
"y": [140, 33,230, 879,43]
}]
};
When adding the bar chart:
$scope.addBarChart = function() {
$scope.dashboard.widgets.push({
name: "General election",
sizeX: 110,
sizeY: 50,
type:"Bar",
data:$scope.data
});
};
The initial setup in the above code works fine with correct output.
However, when attempting to read data from a JSON file and assign it to the widget's data object:
$scope.showContent = function($fileContent){
$scope.widget.data = $fileContent;
};
The expected output does not display any errors on the console as well.