DrillDown Chart is not working

[Ankit kumar]

Hi,

I would like to ask for more details on this error (Uncaught Error: #03091456 chartobject-2.render() Error >> Unable to find the container DOM element.).

On cshtml

 <div fusioncharts
                     width="100%"
                     height="400"
                     type="column2d" 
                     dataFormat= 'json'
                     dataSource="{{MonthelyEligibilityDataSource}}"></div>

 

On Jquery

$scope.MonthelyEligibilityDataSource = {
        chart: {
            caption: "Average Eligibility",
            subcaption: "",
            xAxisName: "Month (Click to drill down)",
            yAxisName: "Number of Employee",
            numberPrefix: "",
            theme: "fint",
            plotSpacePercent: ""
        },
        data: [
            { label: "Aug 2016", value: "0", link: "newchart-json-82016" },
            { label: "Sep 2016", value: "0", link: "newchart-json-92016" },
            { label: "Oct 2016", value: "0", link: "newchart-json-102016" },
            { label: "Nov 2016", value: "0", link: "newchart-json-112016" },
            { label: "Dec 2016", value: "0", link: "newchart-json-122016" },
            { label: "Jan 2017", value: "0", link: "newchart-json-12017" },
            { label: "Feb 2017", value: "0", link: "newchart-json-22017" },
            { label: "Mar 2017", value: "0", link: "newchart-json-32017" },
            { label: "Apr 2017", value: "0", link: "newchart-json-42017" },
            { label: "May 2017", value: "0", link: "newchart-json-52017" },
            { label: "Jun 2017", value: "0", link: "newchart-json-62017" },
            { label: "Jul 2017", value: "24", link: "newchart-json-72017" },
            { label: "Aug 2017", value: "168", link: "newchart-json-82017" }
        ],
        linkeddata: [
            {
                Id: "82016",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - Aug 2016",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: []
                }
            },
            {
                Id: "92016",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - Sep 2016",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: []
                }
            },
            {
                Id: "102016",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - Oct 2016",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: []
                }
            },
            {
                Id: "112016",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - Nov 2016",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: []
                }
            },
            {
                Id: "122016",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - Dec 2016",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: []
                }
            },
            {
                Id: "12017",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - Jan 2017",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: []
                }
            },
            {
                Id: "22017",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - Feb 2017",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: []
                }
            },
            {
                Id: "32017",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - Mar 2017",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: []
                }
            },
            {
                Id: "42017",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - Apr 2017",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: []
                }
            },
            {
                Id: "52017",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - May 2017",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: []
                }
            },
            {
                Id: "62017",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - Jun 2017",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: []
                }
            },
            {
                Id: "72017",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - Jul 2017",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: [
                        {
                            label: "Avant Garde Appraisal",
                            value: "6",
                            link: ""
                        },
                        {
                            label: "Murrays Discount Auto Stores",
                            value: "1",
                            link: ""
                        },
                        { label: "Good Times", value: "1", link: "" },
                        { label: "Laura Ashley", value: "1", link: "" },
                        { label: "WOOD HILLS", value: "1", link: "" },
                        { label: "Tradewell", value: "3", link: "" }
                    ]
                }
            },
            {
                Id: "82017",
                linkedchart: {
                    chart: {
                        caption: "Eligibility Monthly Revenue - Aug 2017",
                        subcaption: "",
                        xAxisName: "Company",
                        yAxisName: "Number of Employee",
                        numberPrefix: "",
                        theme: "fint",
                        plotSpacePercent: ""
                    },
                    data: [
                        {
                            label: "Avant Garde Appraisal",
                            value: "130",
                            link: ""
                        },
                        {
                            label: "Murrays Discount Auto Stores",
                            value: "4",
                            link: ""
                        },
                        { label: "Good Times", value: "3", link: "" },
                        { label: "Laura Ashley", value: "2", link: "" },
                        { label: "Pauls Record Hut", value: "1", link: "" },
                        { label: "Tradewell", value: "1", link: "" }
                    ]
                }
            }
        ]
    };;

 

[Ayan Bhadury]

Hi,

We checked the above source code at our end and its working fine at our end.

Please check the sample fiddle link - http://jsfiddle.net/bfgzL4rj/