Search the Community

Showing results for tags 'angularjs'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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 5 results

  1. I have divided the complete process into the following four easy-to-understand steps: Include the required JavaScript files Create the AngularJS app Define the chart controller Render the chart Step 1: Include the required JavaScript files We need the following three JavaScript dependencies to render our chart: AngularJS Library FusionCharts core package JS files FusionCharts Angular charts plugin We will include all the above files using the <script> tag, as shown in the code below: <html> <head> <!-- including AngularJS library --> <script type="text/javascript" src="path/to/angular.min.js"></script> <!-- including FusionCharts core package files --> <script type="text/javascript" src="path/to/fusioncharts.js"></script> <script type="text/javascript" src="path/to/fusioncharts.charts.js"></script> <!-- including FusionChart Angular charts plugin --> <script type="text/javascript" src="path/to/angular-fusioncharts.min.js"></script> </head> </html> Step 2: Create the AngularJS app Next, we need to create the Angular app and inject the ng-fusioncharts module, which is provided by the plugin that we have included in the previous step. This is how we do it: var app = angular.module('myChartApp', ['ng-fusioncharts']); Step 3: Define Chart Controller In this step, we will define a controller for our app. To achieve this, we will augment the controller scope with the dataSource and the chart configurations: app.controller('chartController', function($scope) { // chart datasource $scope.dataSource = { "chart": { // caption configuration "caption": "Highest Paid Actors", "captionFontBold": "0", "captionFontSize": "20", // more chart properties - explained later }, "data": [{ "label": "Leonardo", "value": "1" }, //more chart data ] }; }); Step 4: Render the Chart We are almost done now. To render the chart, we will add the fusioncharts directive inside the <div> tag where chart will be rendered. This is how we will do it: <div ng-controller="chartController"> <fusioncharts width= "100%" height= "400" type= "bar2d" dataFormat= "json" dataSource= "{{dataSource}}"> </fusioncharts> </div> When you’ve executed the above code, you should be seeing a live bar 2D chart. If your chart didn’t render, or you want to see the source code, check out this JSFiddle example. If you’d like to know know more about creating charts with AngularJS, you can refer to this developer documentation page.
  2. using itext render at server side to to generate pdf from HTML (passed in ajax call) , need is to fit fusion chart also in is in json format..please suggest
  3. Hi, I'm new to the forum and the fusion charts. I'm having a display issue with Fusisioncharts. I'm building a dashboard with set of charts, using ASP.Net MVC and AngluarJS. I'm using your AngularJS plugin to add charts to the dashboard. On my dashboard I have few tabs and on each tab I display set of charts. Everything works great on the first tab, but when I switch to other tab the charts are not in correct size, but after a second they resize to the correct size. When I visit all the tabs, they stay like they should. The same thing happen, when the data of the chart change and I switch the tab, it resize again. How can I avoid this? Tab 1: Tab 2: My html code: <div ng-repeat="t in myListOfTabs" ng-show="isSet(t.Id)" class="row sortable"> <div class="col-md-6" ng-repeat="chart in myListOfCharts2[t.Id]"> <div class="portlet portlet-sortable light"> <div class="portlet-title"> <div class="caption"> <i class="icon-bar-chart font-blue-madison"> Bar Charts</i> </div> <div class="tools"> <a href="javascript:;" class="collapse" data-original-title="" title=""></a> <a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title=""> </a> <a href="javascript:;" class="reload" data-original-title="" title=""> </a> <a href="javascript:;" class="fullscreen" data-original-title="" title=""> </a> <a href="javascript:;" class="remove" data-original-title="" title=""> </a> </div> </div> <div class="portlet-body"> <fusioncharts width="100%" height="300" type="MSCombi2D" datasource="{{chartData[chart]}}"></fusioncharts> </div> </div> </div> </div> Many thanks
  4. I have a FusionChart gauge that I want to update every second in Angularjs. I have a json object with values that I want to use to update the gauge with. I think that I proplably should use the function "setData(dialIndex, value)" somehow. I know how to create a interval but not how to use the update function for the dail. Right now when I update the dial value the gauge dial starts from 0 to the value, but I want it to go from lets say 75 to 90. Any ideas? Controller: app.controller('StartController',function($scope... $scope.dashboardSpeed = { "chart": { ... "dials": { "dial": [ { "value": "65", ... }] } }; }); View: <fusioncharts width="200" height="200" type="angulargauge" datasource="{{dashboardSpeed}}"> </fusioncharts>
  5. Hi I am using angular js and trying to load fusioncharts. Back-end is returning xml, as it is a legacy system. It works on there with the newest chart version. I am trying to query that api and set charts in the angular js site. This is my html: <div fc-chart fc-data-format="xmlurl" fc-width="600" fc-height="400" fc-type="column2d" fc-datasource="{{ctrl.xmlData}}" > </div> this is in my controller: self.xmlData = $http({ url: "", method: 'GET', transformResponse: [function (data) { console.log(data); return data; }] }); With the console.log, i can see that the xml is returning exactly the same as it does on the legacy site. I do get an error in the console that says GET http://localhost:3000/%7B%7D 404 (Not Found). My local dev server is running on port 3000. I am using latest fusioncharts, and angular-fusioncharts wrapper. I was able to load charts from static data and examples, but the xml url is not loading. The chart shows 'error in loading data'. Thanks