Search the Community

Showing results for tags 'AngularJS'.


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 4 results

  1. I am trying to add fusioncharts maps/worldwithantartica with angularjs, it was worked well but now suddenly it shows me error chart type not supported when running the same code on another machine it works, am not able to figure out what i did wrong. My Controller: $scope.mapData = { "chart": { "caption": "Shipment Across Continents", "theme": "fusion", "includeValueInLabels": "1", "formatNumberScale": "0", "showLegend": "0", }, "colorrange": { "gradient": 0, "color": [{ "minvalue": "0", "maxvalue": "100", "code": "#666666", "displayValue": "< 100" },{ "minvalue": "100", "maxvalue": "1000", "code": "#D0DFA3", "displayValue": "100-1000" }, { "minvalue": "1000", "maxvalue": "50000", "code": "#B0BF92", "displayValue": "1000-50000" }, { "minvalue": "50000", "maxvalue": "100000", "code": "#91AF64", "displayValue": "50000-100000" }, { "minvalue": "100000", "maxvalue": "500000", "code": "#A9FF8D", "displayValue": "> 500000" }] }, "data": [] }; My html: <div class="card p-5"> <div class="row"> <div class="col-md-12"> <div class="col-md-6"> <fusioncharts width="900" ng-if="showMap" height="700" type="maps/worldwithantarctica" datasource="{[{mapData}]}"> </fusioncharts> </div> </div> </div> </div> The scripts am using: <script src="{%static 'angular/assets/angular.js'%}"></script> <!-- FusionCharts Scripts --> <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script> <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/angular-fusioncharts.js"></script> <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.charts.js"></script> <script src="{%static 'fusioncharts/types/fusioncharts.maps.js'%}"></script> <script src="{%static 'fusioncharts/maps/fusioncharts.world.js'%}"></script> <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script> <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.gammel.js"></script> <script src="{%static 'angular/controllers/mainApp.js'%}"></script> What am getting in the console: Uncaught RuntimeException: #12052314141 FusionChartsJavaScriptRenderer~Maps Error >> FusionCharts' maps file is required to render the visualization. Te https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js:13 promise callback*Te https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js:13 _addChartDependency https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js:13 resolve https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js:13 _addChartDependency https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js:13 Me https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js:13 promise callback*Me https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js:13 _addChartDependency https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js:13 chartType https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js:13 e https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js:13 f https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js:13 Angular 24 Any help will be appreciated.

  2. Creating Charts in AngularJS

    Gagan Sikri posted a topic in Introduction

    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.
  3. using itext render at server side to to generate pdf from HTML (passed in ajax call) , need is to fit fusion chart also in pdf...data is in json format..please suggest
  4. 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