Javascript Error $(…).dxChart is not a function

Question

I'm trying to display a dxChart with jQuery binding in an ASP.NET MVC project (with DevExpress). So I included the necessary scripts in the rootLayout:

<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-3.0.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/dx.chartjs.js")" type="text/javascript"></script>

Then I added the div tag and the binding script in a partial view:

<div id='chartContainer'></div>
<script>
    $(function() {
    var dataSource = @Html.Raw(Model.RepartitionDesRdvs);
        $("#chartContainer").dxChart({
            size: {
                width: 300
            },
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'Statut',
                type: 'pie'
            },
            series: [
                {
                    argumentField: "Statut",
                    valueField: "Total",
                    label: {
                        visible: true,
                        connector: {
                            visible: true,
                            width: 1
                        }
                    }
                }
            ],
            title: "Répartition des Rendez Vous",
            onPointClick: function (e) {
                var point = e.target;
                point.isVisible() ? point.hide() : point.show();
            }
        });
    });
</script>

Nothing shows in the view and I get this error:

TypeError: $(...).dxChart is not a function

What am I missing ?

Answer 1

I encountered this issue also, using Dx Version: 15.2.5 and JQuery 2.1.4 & 2.2.0. The issue led me to this SO. As has been suggested, I re-pointed my << script >> tags to the following CDN.

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>

This did appear to work, so I manually downloaded the CDN files and used Beyond Compare to diff. Surprisingly, BC showed differences in jquery. After replacing the contents of my local files with the CDN versions, I tried again and found the error to be still present.

TypeError: $(...).dxChart is not a function

What solved it for me was to place the the chartjs after the DevExpress MVC scripts.

    <link href="@Url.Content("~/Content/dx.common.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/dx.light.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-2.1.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/globalize.min.js")"></script>
    <script src="@Url.Content("~/Scripts/angular.js")"></script>
    <script src="@Url.Content("~/Scripts/angular-sanitize.js")"></script>
    @Html.DevExpress().GetStyleSheets(
...
    )
    @Html.DevExpress().GetScripts(
...
    )

    <script src="@Url.Content("~/Scripts/dx.chartjs.js")"></script>
    <script src="@Url.Content("~/Scripts/custom.js")" type="text/javascript"></script>

Hope that helps!