Link wont work with FusionCharts LinkedChart

Question

I am trying to make a simple drill down that breaks down months into weeks, and am just trying to get the first column to work. I get the chart to render, but when I click on January it doesn't go to the linked chart. The external links on february and march work so I'm guessing it is a problem with the JSON data.

define(['app'], function (app) {
app.register.controller('MilesovertimeController', [function () {
    var vm = this;

    vm.myDataSource ={
        "chart": {
            "caption": "Miles Over Time",
            "subCaption": "Track the miles you have run over your entire running career!",
            "xAxisName": "Time (Month)",
            "yAxisName": "Miles",
            "theme": "fint"
        },
        "data": [
            {
                "label": "January",
                "value": "10",
                "link": "newchart-json-Jan"
            },
            {
                "label": "February",
                "value": "20",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "March",
                "value": "5",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "April",
                "value": "55",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "May",
                "value": "40",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "June",
                "value": "110",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "July",
                "value": "75",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "August",
                "value": "90",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "September",
                "value": "10",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "October",
                "value": "45",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "November",
                "value": "30",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "December",
                "value": "100",
                "link": "n-http://fusioncharts.com"
            }
        ],
        "linkeddata": [
            {
                "id": "Jan",
                "linkedchart": {
                    "chart": {
                        "caption": "Miles In January",
                        "subcaption": "This is what you did in January",
                        "xAxisName": "Weeks",
                        "yAxisName": "Miles"
                    },
                    "data": [
                        {
                            "label": "Week 1",
                            "value": "50"
                        },
                        {
                            "label": "Week 2",
                            "value": "25"
                        },
                        {
                            "label": "Week 3",
                            "value": "40"
                        },
                        {
                            "label": "Week 4",
                            "value": "10"
                        }
                    ]
                }
            }
        ]
    }

}]);
);

edit: This is what I'm trying to emulate http://www.fusioncharts.com/features/linkedcharts-for-drill-down/

IMPORTANT EDIT: When I click the january bar I get this error:

Uncaught RuntimeException: #03091456 chartobject-2.render() Error >> Unable to find the container DOM element.

<div class="container" ng-controller="MilesovertimeController as vm">
<div fusionCharts
     width="1000"
     height="550"
     type="column2d"
     datasource="{{vm.myDataSource}}">
</div>
</div>

Actually, your json data is invalid. http://pro.jsonlint.com/. Key value must be double quoted. `{"key": "value"}` — Danny Fardy Jhonston Bermúdez, Nov 03 '15 at 15:51
I don't believe you need to pass the variable names such as "label" as string when you are using angularJS such ashttp://www.fusioncharts.com/angularjs-charts/#/demos/ex1 — Xerunix, Nov 03 '15 at 15:56
Into the example given contains json data. http://www.fusioncharts.com/features/linkedcharts-for-drill-down/ — Danny Fardy Jhonston Bermúdez, Nov 03 '15 at 16:00
Yes, but that is because you don't need angularJS to use fusioncharts. Nonetheless, I have updated the JSON data to be valid and still can't get the link working. — Xerunix, Nov 03 '15 at 16:06
Into the given example, the relationship is with «linkeddata». — Danny Fardy Jhonston Bermúdez, Nov 03 '15 at 16:09
Just found an important point. On clicking the january bar I get: Uncaught RuntimeException: #03091456 chartobject-2.render() Error >> Unable to find the container DOM element. — Xerunix, Nov 03 '15 at 16:16

score 6 · Accepted Answer · answered Nov 04 '15 at 08:44

In order to get drill-down work make sure the directive has id

var app = angular.module('myApp', ["ng-fusioncharts"]);
app.controller('MilesovertimeController', [function () {
    var vm = this;

    vm.myDataSource ={
        "chart": {
            "caption": "Miles Over Time",
            "subCaption": "Track the miles you have run over your entire running career!",
            "xAxisName": "Time (Month)",
            "yAxisName": "Miles",
            "theme": "fint"
        },
        "data": [
            {
                "label": "January",
                "value": "10",
                "link": "newchart-json-Jan"
            },
            {
                "label": "February",
                "value": "20",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "March",
                "value": "5",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "April",
                "value": "55",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "May",
                "value": "40",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "June",
                "value": "110",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "July",
                "value": "75",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "August",
                "value": "90",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "September",
                "value": "10",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "October",
                "value": "45",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "November",
                "value": "30",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "December",
                "value": "100",
                "link": "n-http://fusioncharts.com"
            }
        ],
        "linkeddata": [
            {
                "id": "Jan",
                "linkedchart": {
                    "chart": {
                        "caption": "Miles In January",
                        "subcaption": "This is what you did in January",
                        "xAxisName": "Weeks",
                        "yAxisName": "Miles"
                    },
                    "data": [
                        {
                            "label": "Week 1",
                            "value": "50"
                        },
                        {
                            "label": "Week 2",
                            "value": "25"
                        },
                        {
                            "label": "Week 3",
                            "value": "40"
                        },
                        {
                            "label": "Week 4",
                            "value": "10"
                        }
                    ]
                }
            }
        ]
    }

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>



<div ng-app="myApp">
  <div class="container" ng-controller="MilesovertimeController as vm">
    <div fusionCharts
         width="1000"
         height="550"
         id="test"
         type="column2d"
         datasource="{{vm.myDataSource}}">
    </div>
  </div>
</div>

Link wont work with FusionCharts LinkedChart

1 Answers1