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
