Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Jack
815
igDataChart: dispose is not a function
posted

I am trying to display a composite data chart by following the Infragistics example at http://www.igniteui.com/data-chart/composite-chart. Please see the attached image for the error message that I'm getting. Chrome keeps telling me "dispose is not a function". Here is my code:

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/modernizr-v2-8-3.js"></script>
<script src="/js/infragistics.util.js" type="text/javascript"></script>
<script src="/js/infragistics.dv.js" type="text/javascript"></script>
<script src="/js/infragistics.core.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/world-energy-production.js"></script>
<script type="text/javascript">
            $(document).ready(function () {
                for (i = 0; i < everyThreeYears.length; i++) {
                    everyThreeYears[i].Total = (everyThreeYears[i]["China"] + everyThreeYears[i]["UnitedStates"] + everyThreeYears[i]["Russia"]).toFixed(2);
                }
                $("#DIVEnertiaMainChart").igDataChart({
                    dataSource: everyThreeYears,
                    width: "450px",
                    height: "450px",
                    crosshairVisibility: Modernizr.touch ? "visible" : "collapsed",
                    title: "Energy Production Per Country",
                    subtitle: "The top three Total Primary Energy producers",
                    horizontalZoomable: true,
                    verticalZoomable: true,
                    axes: [{
                        type: "categoryX",
                        name: "xAxis",
                        label: "Year",
                        strokeThickness: 5,
                        title: "Year"
                    }, {
                        type: "numericY",
                        name: "prodPower",
                        minimumValue: 0,
                        maximumValue: 100,
                        strokeThickness: 5,
                        title: "Quadrillion Btu"
                    }, {
                        type: "numericY",
                        name: "totalPower",
                        minimumValue: 50,
                        maximumValue: 250,
                        labelLocation: "outsideRight",
                        title: "Quadrillion Btu",
                    }],
                    series: [{
                        type: "column",
                        isHighlightingEnabled: true,
                        isTransitionInEnabled: true,
                        name: "China",
                        title: "China",
                        xAxis: "xAxis",
                        yAxis: "prodPower",
                        valueMemberPath: "China",
                        showTooltip: true,
                        tooltipTemplate: "tooltipChina",
                        legend: { element: "legend" }
                    }, {
                        type: "column",
                        isHighlightingEnabled: true,
                        isTransitionInEnabled: true,
                        name: "UnitedStates",
                        title: "US",
                        xAxis: "xAxis",
                        yAxis: "prodPower",
                        valueMemberPath: "UnitedStates",
                        showTooltip: true,
                        tooltipTemplate: "tooltipUS",
                        legend: { element: "legend" }
                    }, {
                        type: "column",
                        isHighlightingEnabled: true,
                        isTransitionInEnabled: true,
                        name: "Russia",
                        title: "Russia",
                        xAxis: "xAxis",
                        yAxis: "prodPower",
                        valueMemberPath: "Russia",
                        showTooltip: true,
                        tooltipTemplate: "tooltipRussia",
                        legend: { element: "legend" }
                    }, {
                        type: "line",
                        isHighlightingEnabled: true,
                        isTransitionInEnabled: true,
                        name: "Total",
                        title: "Total Energy",
                        xAxis: "xAxis",
                        yAxis: "totalPower",
                        valueMemberPath: "Total",
                        brush: "Orange",
                        showTooltip: true,
                        tooltipTemplate: "tooltipTotal",
                        legend: { element: "legend2" }
                    }],
                    leftMargin: 5,
                    topMargin: 15
                });
            });
</script>
<div class="chartComponent">
    <div id="DIVEnertiaMainChart"></div>
</div>
Parents
  • 18204
    Suggested Answer
    Offline posted

    Hello jouin,

    Thank you for posting in our forums!

    One thing I noticed with your code is that you are including the IgniteUI files in the order: util.js, dv.js and core.js.  The infragistics.util.js file is actually included in the infragistics.core.js file.  This may be causing some issues and I would recommend removing the infragistics.util.js reference and including the other IgniteUI scripts in this order:

    <script src="/js/infragistics.core.js" type="text/javascript"></script>
    <script src="/js/infragistics.dv.js" type="text/javascript"></script>

    If that doesn't help to resolve the issue, please let me know what version of IgniteUI you are using.  You can find the version number located at the top of the script files if you open them in a text editor.

    Looking forward to hearing from you.

Reply Children