How can I fix the 'no data to display' error when trying to load drill down charts with FusionCharts linked charts?

Question

I am trying to use fusion Chart links (Linked Charts) for loading drill down chart when you click on a parent chart and it says 'no data to display when I click on parent chart.

Appreciate your help!

Here is my sample code.

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Revenue split by product category",
        "subCaption": "For current year",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        //Showing the Cumulative Sum of stacked data
        "showSum": "1",
        "numberPrefix": "$",
        "theme": "fusion"
      },
      "categories": [{
        "category": [{
            "label": "Q1"
          }         
          
        ]
      }],       
      "dataset": [{
          "seriesname": "Food Products",
          "data": [{
              "value": "11000",
               "link": "newchart-json-test",
               
            }      
          ],
            
           
        },
        {
          "seriesname": "Non-Food Products",
          "data": [{
              "value": "11400",             
            }                       
          ]
        }
      ],
       "linkeddata": [{
                    "id": "test",
                    "linkedchart": {
                        "chart": {
                            "caption": "Fodd Products - Quarterly Sales",
                            "subcaption": "Last year",
                            "numberprefix": "$",
                            "theme": "fusion",
                            "rotateValues": "0",
                            "plottooltext": "$label, $dataValue,  $percentValue"
                        },
                        "data": [{
                            "label": "Q1",
                            "value": "157000"
                        }, {
                            "label": "Q2",
                            "value": "172000"
                        }, {
                            "label": "Q3",
                            "value": "206000"
                        }, {
                            "label": "Q4",
                            "value": "275000"
                        }]
                    }
                }],
   
      
    }
  }).render();
});

When you click on the parent chart, it should load a child chart.

Answer 1

For this case, you will have to use configureLink(), because in your case parent chart has multi-series chart data and child is having single-series data, so with the help of configureLink() you can achieve your case.

For reference updated the code as per requirement, please check and hope it will work for you

    FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Revenue split by product category",
        "subCaption": "For current year",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        //Showing the Cumulative Sum of stacked data
        "showSum": "1",
        "numberPrefix": "$",
        "theme":"fusion"
      },
      "categories": [{
        "category": [{
            "label": "Q1"
          }

        ]
      }],
      "dataset": [{
          "seriesname": "Food Products",
          "data": [{
            "value": "11000",
            "link": "newchart-json-test"
          }],

        },
        {
          "seriesname": "Non-Food Products",
          "data": [{
            "value": "11400",
          }]
        }
      ],
      "linkeddata": [{
        "id": "test",
        "linkedchart": {
          "chart": {
            "caption": "Fodd Products - Quarterly Sales",
            "subcaption": "Last year",
            "numberprefix": "$",
            "theme": "fusion",
            "rotateValues": "0",
            "plottooltext": "$label, $dataValue,  $percentValue"
          },
          "data": [{
            "label": "Q1",
            "value": "157000"
          }, {
            "label": "Q2",
            "value": "172000"
          }, {
            "label": "Q3",
            "value": "206000"
          }, {
            "label": "Q4",
            "value": "275000"
          }]
        }
      }],
    }
      
  });
  
  revenueChart.configureLink([
                { type: 'bar2d' }
            ]);
            
     revenueChart.render();
});

JSFiddle