CODEWITHSUNDEEP
javascriptangularfusioncharts
Toma Tomov
Toma Tomov

Reputation: 1674

Fusion chart doesnt load

I am using Fusion charts but one of my charts doesn't load. My html is :

<fusioncharts [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource">
    </fusioncharts>

And the data for the chart:

this.dataSource = {
      'chart': {
        'caption': 'Number of posts',
        'startingangle': '120',
        'showlabels': '0',
        'showlegend': '1',
        'enablemultislicing': '0',
        'slicingdistance': '15',
        'showpercentvalues': '1',
        'showpercentintooltip': '0',
        'theme': 'ocean'
      },
      'data': [
          { label: 'Venezuela', value: '290' },
          { label: 'Saudi', value: '260' },
          { label: 'Canada', value: '180' },
          { label: 'Iran', value: '140' },
          { label: 'Russia', value: '115' },
          { label: 'UAE', value: '100' },
          { label: 'US', value: '30' },
          { label: 'China', value: '30' }
      ]
    };

The particular chart doesn't load. In the console I also got another error TypeError: i.title is undefined. It is in vendor.2d90d48c94b0a738e874.bundle.js. The file is minified and there is no way to unerstand from where it comes. Atleast I can't. Can I ask you for some advice?

Upvotes: 0

Views: 565

Answers (1)

Aman Saraswat
Aman Saraswat

Reputation: 172

It might be expecting a title tag in your datasource.

    <html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<!-- Include fusioncharts core library -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Include fusion theme -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    //STEP 2 - Chart Data
    const chartData = [{
        "label": "Venezuela",
        "value": "290"
    }, {
        "label": "Saudi",
        "value": "260"
    }, {
        "label": "Canada",
        "value": "180"
    }, {
        "label": "Iran",
        "value": "140"
    }, {
        "label": "Russia",
        "value": "115"
    }, {
        "label": "UAE",
        "value": "100"
    }, {
        "label": "US",
        "value": "30"
    }, {
        "label": "China",
        "value": "30"
    }];

    //STEP 3 - Chart Configurations
    const chartConfig = {
    type: 'column2d',
    renderAt: 'chart-container',
    width: '100%',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        // Chart Configuration
        "chart": {
            "caption": "Countries With Most Oil Reserves [2017-18]",
            "subCaption": "In MMbbl = One Million barrels",
            "xAxisName": "Country",
            "yAxisName": "Reserves (MMbbl)",
            "numberSuffix": "K",
            "theme": "fusion",
            },
        // Chart Data
        "data": chartData
        }
    };
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts(chartConfig);
    fusioncharts.render();
    });

</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

for reference - https://www.fusioncharts.com/dev/getting-started/plain-javascript/your-first-chart-using-plain-javascript

Here is the demo fiddle - https://jsfiddle.net/fusioncharts/s7t8F/

Upvotes: 0

Related Questions