Jump to content


Angular JS fusion Chart

Angular JS

  • Please log in to reply
1 reply to this topic

#1 imurpal

imurpal

    Junior Member

  • Members
  • PipPip
  • 13 posts

Posted 26 May 2016 - 04:28 AM

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, 26 May 2016 - 04:29 AM.


#2 Gagan Sikri

Gagan Sikri

    Forum Guru

  • Members
  • PipPipPipPipPipPip
  • 110 posts
  • LocationBangalore

Posted 30 May 2016 - 09:06 AM

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.







Also tagged with one or more of these keywords: Angular JS