AngularJS Datasource Issue

[awheinr]

Hello,

 

I am working on an application that will dynamically build charts on page through angularjs.  Since I am creating the content programmatically I won't have a static datasource variable so I have defined types in which I can infer the type of graph needed.  Does anyone have any ideas on how this is best handled?  I have tried the following, however, when I run this I get infdig angular errors because of the ajax call to get the data.

 

HTML:

<div class="row x-margintop">

<div class="col-md-8">

<fusioncharts width="100%" height="400px" type="column2d" datasource="{{getComparisonChart(comparison)}}"></fusioncharts>

</div>

</div>

 

JS:

  $scope.getComparisonChart = function(comparison){

 

//Callbacks and Other Chart Data Will Vary Based On The Comparison dataSource Type

 

    if(comparison.dataSource === 'SvC'){

    var data = [];

      $http({

      url:'callbacks/chart_data/dogCallback.jsp',

      method: 'GET',

      params: {dogs: dogs, startDate: '10/01/2015', endDate: '12/01/2015'}

    }).success(function(data){

      $scope.data = data; 

      return {

        "chart": {

          "caption": "Monthly revenue for last year",

          "subCaption": "Harry's SuperMart",

          "xAxisName": "Month",

          "yAxisName": "Revenues (In USD)",

          "numberPrefix": "$",

          "paletteColors": "#0075c2",

          "bgColor": "#ffffff",

          "borderAlpha": "20",

          "canvasBorderAlpha": "0",

          "usePlotGradientColor": "0",

          "plotBorderAlpha": "10",

          "placevaluesInside": "1",

          "rotatevalues": "1",

          "valueFontColor": "#ffffff",

          "showXAxisLine": "1",

          "xAxisLineColor": "#999999",

          "divlineColor": "#999999",

          "divLineDashed": "1",

          "showAlternateHGridColor": "0",

          "subcaptionFontBold": "0",

          "subcaptionFontSize": "14",

          "theme": "fint"

        },

        "data": $scope.data,

        "trendlines": [

          {

             "line": [

                {

                   "startvalue": "700000",

                   "color": "#1aaf5d",

                   "valueOnRight": "1",

                   "displayvalue": "Monthly Target"

                }

             ]

          }

        ]

      };   });          

    }

 

[Moonmi Sonowal]

Hi,

 

Welcome to FusionCharts forum posts.

 

Could you please check the fiddle : http://jsfiddle.net/moonmi/hxsm9ow5/   ?

 

Its a simple 2D Column chart with drill down feature.

 

Please refer the doc: http://www.fusioncharts.com/dev/usage-guide/using-with-javascript-libraries/angularjs/creating-charts-using-the-angular-fusioncharts-plugin.html

 

Hope this helps.

 

Thanks.