title: How to use the http.get method in angular to fetch the json data?
body: <p>I created a funnel chart in java script . And converted  into  angular And now I'm  trying to  use  the http.get method in angular to  fetch  the json data. And I'm stuck  here and got confused in this part</p>
  
  <p>And now let me show u my code part</p>
  
  <p>---index.html--- </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;title&gt;FusionCharts - Funnel 3D Chart&lt;/title&gt;
  
  
  
  
    &lt;link rel="stylesheet" type="text/css" href="/css/result-light.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="/css/normalize.css"&gt;
  
        &lt;script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"&gt;&lt;/script&gt; 
        &lt;script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.js"&gt;&lt;/script&gt;
        &lt;script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"&gt;&lt;/script&gt;
        &lt;script type='text/javascript' src='/js/lib/dummy.js'&gt;&lt;/script&gt;
        &lt;script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"&gt;&lt;/script&gt;
        &lt;script src="practice.js"&gt;&lt;/script&gt;
  
  
  
  
  
  
  
  &lt;/head&gt;
  &lt;body ng-app="myApp"&gt;
    &lt;!-- A funnel 3D Chart showing a conversion analysis in percentage of visiting to purchase in Harry's Supermart website last year 
  
  Attribute :
  # showPercentValues - set to 1 to show the values in percentage.
  
  --&gt;
  
  &lt;div id="chart-container" ng-controller="ParentCtrl"  ng-init='load()' ng-model="dataSource1"&gt;FusionCharts will render here&lt;/div&gt;
  
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>---script.js---</p>
  
  <pre><code>    // Code goes here
  
  //creating an application module
  var myApp = angular.module("myApp", []);
  
  //The below code will read the data from student.json file and will pass to the $scope variable 
   myApp.controller("ParentCtrl", function($scope, $http)
          {   
  
           $scope.load = function(){
             //alert("2");
      FusionCharts.ready(function () {
        //alert("1");
        var conversionChart = new FusionCharts({
          type: 'funnel',
          renderAt: 'chart-container',
          width: "100%",
          dataFormat: 'json',
          dataSource : "dataSource1"
  
        });   
  
  
        $http.get('chart.json') //reading the studentRecord.json file
              .success 
          (function(data1){
         $scope.dataSource1 = data1;// binding the data to the $scope variable
  
  
  
  
  
       }); 
  
  
  
  
  
  
  
  
  
     conversionChart.render();
  
  
  
  
  
  });
  
  };
  });
  </code></pre>
  
  <p>----chart.json----</p>
  
  <p>{</p>
  
  <pre><code>        "chart": {
                      "caption": "Ensource sales report",
                      "subcaption": "Purchase - Conversion analysis for last year",
                      "decimals": "1",
                      "isHollow": "0",
                      "isSliced": "1",
                      "labelDistance": "15",
                      "plotTooltext": "Success : $percentOfPrevValue",
                      "theme": "fint",
                      "baseFontSize":"18"
          },
              "data": 
              [
  
                                      {
                                          "label": "Total",
                                          "value": "385634"
                                      },
                                      {
                                          "label": "Contacts",
                                          "value": "175631"
                                      },
                                      {
                                          "label": "Leads",
                                          "value": "84564"
                                      },
                                      {
                                          "label": "Sanctioned",
                                          "value": "35654"
                                      },
                                       {
                                          "label": "Disbursed",
                                          "value": "12342"
                                      }
  
          ]
  </code></pre>
  
  <p>}</p>
  
  <p>Plunker:http:<a href="http://plnkr.co/edit/HUKvROQv8wIiFfx6uZBk?p=preview" rel="nofollow">http://plnkr.co/edit/HUKvROQv8wIiFfx6uZBk?p=preview</a></p>
  
  <p>Here i need  to fetch the json data for <code>dataSource :</code>but not able to  do that  </p>
  
  <p>All the script and css for the funnel chart  is been  included in index.html.  My  oly  work is to  fetch the json data using the http.get method.Plz help me with this
  And thanks in advance ...</p>