Search the Community

Showing results for tags 'Angular JS'.


More search options

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

  • Company Forums
    • Company News
  • Product Forums
    • FusionCharts XT
    • FusionWidgets XT
    • PowerCharts XT
    • FusionMaps XT
    • Collabion Charts for SharePoint
    • jQuery Plugin for FusionCharts
    • AngularJS plugin
    • ReactJS plugin
  • General Forums
    • FusionCharts Jobs and Consultation
    • FusionLounge

Found 2 results

  1. Hi Team, I am not able to generate the angular chart if the scope variables are present inside the HTTP request. Thanks in advance . If the scope is available outside http it works perfect. Thanks . Any help on this is appreciated Html <html ng-app="HelloApp"> <body ng-controller="MyController"> {{myDataSource1}} <div > <fusioncharts id="mychartcontainer" chartid="mychart" width="400" height="200" type="column2d" datasource="{{myDataSource}}" ></fusioncharts> </div> </body> </html> JS var app = angular.module('HelloApp', ["ng-fusioncharts"]); app.controller('MyController', function ($scope,$http) { var req='Any Rest URL'; $http({ method: 'GET', url: req }).then(function successCallback(response) { //var data=[]; alert("test"); $scope.myDataSource1="nretes" $scope.myDataSource = { chart: { caption: "Harry's SuperMart", subCaption: "Top 5 stores in last month by revenue", numberPrefix: "$" }, data: [{ label: "Bakersfield Central", value: "880000" }, { label: "Garden Groove harbour", value: "730000" }, { label: "Los Angeles Topanga", value: "590000" }, { label: "Compton-Rancho Dom", value: "520000" }, { label: "Daly City Serramonte", value: "330000" }] }; }, function errorCallback(response) { $scope.Status="failed"; // $scope.Results=gems; //$scope.gridOptions.data= gems; alert("failure"); }); });
  2. 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