Sign in to follow this  
awheinr

AngularJS Datasource Issue

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this