Angular JS fusion Chart

[imurpal]

Hi Team,

              I am trying to incorporate angular js wiht fusion chart. I downloaded all necessary pluguin. i have issue in getting the JSON value from HTTP Request.

 

 

Angular Snippet

 

firstway

 

<div ng-controller="FusionCH2" >

<fusioncharts  width="350" height="400" type="pie2d" chart="{{attrs}}" datasource="{{myDataSource1}}"></fusioncharts>

  

   

 </div>

 

Secondway

 

<div ng-controller="FusionCH2" >

<fusioncharts  width="350" height="400" type="pie2d"  datasource="{{myDataSource1}}"></fusioncharts>

  

   

 </div>

 

angular JS

 

 JsApp2.controller('FusionCH2', function($scope,$http,$rootScope,$location)  {

//alert("hai");

// $scope.finalDataSource1 ={};

 

var qstring= "ACCOUNT_ID="+"1138";

var RESTURLChart= "RESTServiceURl";

// alert(RESTURLChart);

$http({

   method: 'GET',

   url: RESTURLChart

  }).then(function successCallback(response) {

  //var data=[];

  alert("i am in ");

  $scope.myDataSource=response.data;     // this is how is passed for way 1

  $scope.attrs=$scope.myDataSource.Chart;

  $scope.myDataSource1 = {data:[

                     {

                         "label": "Teenage",

                         "value": "1250400"

                     }, 

                     {

                         "label": "Adult",

                         "value": "1463300"

                     }, 

                     {

                         "label": "Mid-age",

                         "value": "1050700"

                     }, 

                     {

                         "label": "Senior",

                         "value": "491000"

                     }

                 ]};

  console.log($scope.myDataSource.Chart);

  console.log( $scope.myDataSource1);

  //$scope.finalDataSource1 = $scope.finalDataSource;

  //alert($scope.finalDataSource);

 

 

   }, function errorCallback(response) {

  $scope.Status="failed";

      alert("failure");

 

   });

//$rootScope.finalDataSource=$rootScope.finalDataSource1;

 

/*

 

 

$scope.attrs =  {

"caption": "Split of Visitors by Age Group",

             "subCaption": "Last year",

             "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",

             "bgColor": "#ffffff",

             "showBorder": "1",

"bgColor": "#ffffff",

             "borderAlpha": "20",

             "use3DLighting": "0",

             "showShadow": "0",

             "enableSmartLabels": "0",

             "startingAngle": "0",

             "showPercentValues": "1",

             "showPercentInTooltip": "0",

             "decimals": "1",

             "captionFontSize": "14",

             "subcaptionFontSize": "14",

             "subcaptionFontBold": "0",

             "toolTipColor": "#ffffff",

             "toolTipBorderThickness": "0",

             "toolTipBgColor": "#000000",

             "toolTipBgAlpha": "80",

             "toolTipBorderRadius": "2",

             "toolTipPadding": "5",

             "showHoverEffect":"1",

             "showLegend": "1",

             "legendBgColor": "#ffffff",

             "legendBorderAlpha": '0',

             "legendShadow": '0',

             "legendItemFontSize": '10',

             "legendItemFontColor": '#666666'

         

     };

$scope.myDataSource1 = {data:[

               {

                   "label": "Teenage",

                   "value": "1250400"

               }, 

               {

                   "label": "Adult",

                   "value": "1463300"

               }, 

               {

                   "label": "Mid-age",

                   "value": "1050700"

               }, 

               {

                   "label": "Senior",

                   "value": "491000"

               }

           ]};*/

 

 

./* This is the json i get from my rest service

 { "pxObjClass":"aig-FW-GRASP-Int-Svcs-ResponseMessage" ,"Chart":{ "BgColor":"#ffffff" ,"BorderAlpha":"20" ,"Caption":"Recommendation By Type" ,"CaptionFontSize":"14" ,"Decimals":"1" ,"EnableSmartLabels":"0" ,"LegendBgColor":"#ffffff" ,"LegendBorderAlpha":"0" ,"LegendItemFontColor":"#666666" ,"LegendItemFontSize":"10" ,"LegendShadow":"0" ,"PaletteColors":"#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000" ,"pxObjClass":"aig-FW-GRASP-Int-Svcs-" ,"showBorder":"1" ,"ShowHoverEffect":"1" ,"ShowLegend":"1" ,"ShowPercentInTooltip":"0" ,"ShowPercentValues":"1" ,"ShowShadow":"0" ,"StartingAngle":"0" ,"SubcaptionFontBold":"0" ,"SubcaptionFontSize":"14" ,"ToolTipBgAlpha":"80" ,"ToolTipBgColor":"#000000" ,"ToolTipBorderRadius":"2" ,"ToolTipBorderThickness":"0" ,"ToolTipColor":"#ffffff" ,"ToolTipPadding":"5" ,"Use3DLighting":"0" } ,"data":[ { "Label":"Human Element" ,"pxObjClass":"aig-FW-GRASP-Int-Svcs-" ,"Value":"21" } ,{ "Label":"Physical Protection" ,"pxObjClass":"aig-FW-GRASP-Int-Svcs-" ,"Value":"17" } ] }

*/

 

 

 });

 

 

For the above details the chart is not getting generated in front end. My Service is returning the JSON. But using the response data in http REST part chart is not rendering. But when i just take the JSON values and present it to a scope variable it is working as expected. Not sure what i am missing . Thanks in advance 

Edited May 26, 2016 by imurpal

[Gagan Sikri]

Hi

 

Can you check if there is any error in browser console for the issue?

 

Also, please share a scaled down sample for issue you are facing so that I can assist you accordingly.