CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcjquery-uichart.js
Abhilash Gopalakrishna
Abhilash Gopalakrishna

Reputation: 980

Chart.js chart by passing data through the controller MVC

I am trying to display a chart by passing to it data from a controller. I am using chart.js

Model:

public class DatapointLine
{
    public DatapointLine(double x, double y)
    {
        this.X = x;
        this.Y = y;
    }

    // setting the name to be used when serializing to JSON.
    [DataMember(Name = "x")]
    public Nullable<double> X = null;

    //setting the name to be used whenserializing to JSON.
    [DataMember(Name = "y")]
    public Nullable<double> Y = null;
}

Controller:

public JsonResult BarChart()
        {
            List<DatapointLine> dataPoints = new List<DatapointLine>{
                new DatapointLine(10, 22),
                new DatapointLine(20, 36),
                new DatapointLine(30, 42),
                new DatapointLine(40, 51),
                new DatapointLine(50, 46),
            };

            ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);

            return Json(dataPoints, JsonRequestBehavior.AllowGet);
        }

Script:

<script type="text/javascript">

    $(function() {
        var data = getData();
        AutoFollow(data);
    });

    function getData() {
        var dateValue = [];
        var countValue = [];
        $.ajax({
            url: "/Supernethome/BarChart",
            dataType: 'json',
            async: false
        }).done(function(data) {
            data.forEach(function(data) {
                dateValue.push(data.X);
                countValue.push(data.Y);
            });
        });
        return {
            dateValue: dateValue,
            countValue: countValue
        };
    }
        $(document).ready(function () {function AutoFollow(data) {
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx,
            {
                type: 'bar',
                data: {
                    labels: data.dateValue, 
                    datasets: [
                        {
                            label: 'AutoFollow',
                            data: data.countValue, 
                            backgroundColor: "rgba(153,255,51,1)"
                        }, {
                            label: 'Manual',
                            data: [30, 29, 5, 5, 20, 3, 10],
                            backgroundColor: "rgba(255,153,0,1)"
                        }
                    ]
                }
            });
    }
    });

I am generating the views for the charts in partial views and then referencing the partial views in a main view.

I am getting the following errors:

chartjs.init.js:3 Uncaught TypeError: Cannot read property 'getContext' of null
    at HTMLDocument.<anonymous> (chartjs.init.js:3)
    at f (jquery.js:1026)
    at Object.fireWith [as resolveWith] (jquery.js:1138)
    at Function.ready (jquery.js:427)
    at HTMLDocument.xt (jquery.js:97)

The error is eating a lot of time,Need Help.

Upvotes: 0

Views: 3346

Answers (1)

Jon Ryan
Jon Ryan

Reputation: 1627

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>

Upvotes: 1

Related Questions