Search the Community

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" } ] } ] }; }); }