Chartjs-Chart.js chart by passing data through the controller MVC

by

1👍

Looks like two different errors to me…

Error 1 : Graph container element not found

Checkout this thread as the issue sounds the same:

morris.js Graph container element not found

Error 2 : Cannot read property ‘getContext’

This looks like a red herring. This exception is not being thrown by morris.js but by chartjs. However it may be that the exception thrown by this code is stopping the morris.js code from being executed successfully. As such it’s worth testing the code in isolation i.e load up a view with nothing in it except the required morris scripts/assets and your inline script. No additional scripts or JavaScript libraries. Something like this :

Example Test View

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">

</head>
<body>

<div id="mychart"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script>
    $(document).ready(function () {
        $.getJSON("/Supernethome/BarChart", function (data) {
                new Morris.Area({
                element: 'mychart',
                data: data,
                xkey: 'X',
                ykeys: ['Y'],
                pointSize: 2,
                hideHover: 'auto',
                resize: true
            });

        });

    });
</script>

</body>
</html>

Leave a comment