Chart type not supported on angularjs

[ahmed80]

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.

[Akash Biswas]

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.