vicky07

Problem in displaying different chart types using drilldown in fusionchartsXT

Recommended Posts

I want to display the parent chart in bar2d and the child chart in pie2d. But both the parent and child charts are rendered in the same type. Also I used configureLink() method to specify my child chart type. But it is throwing an error like 'str' object has no attribute 'configure link'. I am using Django. The code that I have tried is:

Views.py

def drilldown(request):
    drilldownobj = FusionCharts(
         'column2d',
         'chart-container',
         '600',
         '400',
         'drilldown-chart',
         'json',
        {"chart": {
        "caption": "North American Population",
        "subcaption": "USA & Canada",
        "xaxisname": "Country (Click to drill down)",
        "theme": "fusion"
      },
      "data": [
        {
          "label": "United States",
          "value": "310380000",
          "link": "newchart-json-usa"
        },
        {
          "label": "Canada",
          "value": "34020000",
          "link": "newchart-json-can"
        }
      ],
      "linkeddata": [
        {
          "id": "usa",
          "linkedchart":{
            "chart": {
              "caption": "Population by Religion",
              "subcaption": "USA",
              "showpercentintooltip": "1",
              "enablemultislicing": "0",
              "startingangle": "90",
              "theme": "fusion"
            },
            "data": [
              {
                "label": "Christian",
                "value": "78.30"
              },
              {
                "label": "Muslim",
                "value": "0.90 "
              },
              {
                "label": "Hindu",
                "value": ".60"
              },
              {
                "label": "Buddhist",
                "value": "1.20"
              },
              {
                "label": "Jewish",
                "value": "1.80"
              },
              {
                "label": "Others",
                "value": "17.20"
              }
            ]
          }
        },
        {
          "id": "can",
          # "type":"pie2d",
          "linkedchart": {
            "chart": {
              "caption": "Population by Religion",
              "subcaption": "Canada",
              "showpercentintooltip": "1",
              "startingangle": "90",
              "theme": "fusion"
            },
            "data": [
              {
                "label": "Christian",
                "value": "72"
              },
              {
                "label": "Muslim",
                "value": "2.1"
              },
              {
                "label": "Hindu",
                "value": "1.4"
              },
              {
                "label": "Buddhist",
                "value": ".8"
              },
              {
                "label": "Jewish",
                "value": "1.72"
              },
              {
                "label": "Others",
                "value": "24.70"
              }
            ]
          }
        }
      ]
    }).render()
    drilldownobj.configureLink({
        type: "pie2d",
        overlayButton: {
            message: 'Back to parent chart',
            bgColor: '#999999',
            borderColor: '#cccccc'
        }
    }).render()

    drilldown_dict ={'drilldown':drilldownobj}
    return render(request, 'drilldown.html',context=drilldown_dict)

 

.html:

{% extends "base.html" %}
{% block body %}
<section class="content-header">
  <h1><strong>drilldown</strong></h1>
  <br>
  <div class="row">
    <div class="col-md-6">
      <div id="drilldown-chart">{{ drilldown|safe }}</div>
    </div>
{% endblock %}

Please help me to resolve this.

Thanks

Share this post


Link to post
Share on other sites

Hi Vicky,

 

The API method "configureLink()" is not used properly. It does not need the render() method to be invoked with the configureLink() as in the provided snippet.

Please use it as below :

drilldownobj.configureLink({
        type: "pie2d",
        overlayButton: {
            message: 'Back to parent chart',
            bgColor: '#999999',
            borderColor: '#cccccc'
        }
    });

You can also refer to a sample fiddle : http://jsfiddle.net/fusioncharts/zdewk96j/

Please find the configureLink() API method reference in the list : https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods

 

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