How to Bind Data Of angular-Charts Dynamically

Question

I am using angular-charts directives in my application and it works well when we set the data initially.But when i read the data from json file and assign the data to the chart, it just generates x axis and y axis but not the legends.Here is my code,

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>

Here is the model where 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]
   }]
 };

Here am assigning the data to the widget,

$scope.addBarChart = function() {
  $scope.dashboard.widgets.push({
    name: "General election",
    sizeX: 110,
    sizeY: 50,
    type:"Bar",
    data:$scope.data
  });
};

This works well, and this is the output. enter image description here

Then am reading the data from a json file and assigning to the data object of widget,

  $scope.showContent = function($fileContent){
        $scope.widget.data = $fileContent;
    };

Here is the output:

enter image description here

There is no errors on the console as well.

@pankajparkar no i just get the data from a json file using a file picker — Sajeetharan
– Sajeetharan, Commented Jan 10, 2015 at 20:41
@pankajparkar I have modified the question by including the code from where i read the json file — Sajeetharan
– Sajeetharan, Commented Jan 10, 2015 at 20:48

Pankaj Parkar · Accepted Answer · 2015-01-11 20:22:32Z

1

Your problem solution is very simple.

The fileContent which you are getting using "on-read-file" directive, it returns the fileContent in string format. anguar-charts data property shpuld always be in JSON format Only you need to do JSON.parse() recieved $fileContent to JSON.

Code

$scope.showContent = function($fileContent) {
    $scope.widget.data = JSON.parse($fileContent);;
};

I created a test.txt file for test and wrote the below code inside it.

test.txt

{
     "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]
   }]
 }

You can refer fiddle link for more info. Hopefully this will be pretty helpful to you.

answered Jan 11, 2015 at 20:22

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sajeetharan Over a year ago

It works in fiddler, does not work with my project.is it necessary to parse into Json since i already have Json file

Pankaj Parkar Over a year ago

yes..because the directive is returning a data in string format.anyhow you need to parse it to get actual JSON

Pankaj Parkar Over a year ago

in fiddle i've used $scpe.data you should replace it with $scope.widget.data

Karthick Venkatraman · Accepted Answer · 2015-01-06 05:20:01Z

0

Try adding $scope.$apply(); after $scope.widget.data = $fileContent;

answered Jan 6, 2015 at 5:20

Karthick Venkatraman

613 bronze badges

Collectives™ on Stack Overflow

How to Bind Data Of angular-Charts Dynamically

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related