ahmed80

Chart type not supported on angularjs

Recommended Posts

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.

Share this post


Link to post
Share on other sites

Hi Ahmed,

 

You need to include the below JS files to render the mention map :

https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js
https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js
https://cdn.fusioncharts.com/fusioncharts/latest/maps/fusioncharts.worldwithantarctica.js

Please check this below sample fetal for reference :
http://jsfiddle.net/hz3qws6p/2/

Also check if you have correctly added the map type as "worldwithantarctica" instead of "worldwithantartica".

 

Thanks,

Akash.

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