Sign in to follow this  
imurpal

Angular JS fusion Chart

Recommended Posts

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 by imurpal

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this