CODEWITHSUNDEEP
asp.net-mvc-4chartsmorris.js
mahdis dezfouli
mahdis dezfouli

Reputation: 173

how to pass data from database in morris chart?

I use Morris chart to show chart of my table in database. I use bellow code to controller:

 public ActionResult Diagram()
    {
        var mc = from mon in db.tblMonthConsumes
                 where monID == 37
                 select new
                 {
                     data = mon.MonthConsume,
                     value = mon.MonthConsumeDate
                 };

        return Json(mc, JsonRequestBehavior.AllowGet);

        }

and in my view:

<script>
$.get('@Url.Action("Diagram")', function (result) {
    new Morris.Line({
        data: result,
        xkey: 'data',
        ykeys: ['value']
    });
});

but when run this in browser:

[{"data":null,"value":"/Date(1419062400000)/"},{"data":0,"value":"/Date(1421827200000)/"},{"data":0,"value":"/Date(1424419200000)/"},{"data":0,"value":"/Date(1426834800000)/"},{"data":0,"value":"/Date(1429513200000)/"},{"data":0,"value":"/Date(1432105200000)/"},{"data":77,"value":"/Date(1379746800000)/"},{"data":444,"value":"/Date(1384934400000)/"},{"data":0,"value":"/Date(1390291200000)/"},{"data":0,"value":"/Date(1392883200000)/"},{"data":0,"value":"/Date(1398495600000)/"},{"data":0,"value":"/Date(1400569200000)/"},{"data":0,"value":"/Date(1403506800000)/"},{"data":0,"value":"/Date(1405839600000)/"},{"data":0,"value":"/Date(1408604400000)/"},{"data":0,"value":"/Date(1411455600000)/"},{"data":0,"value":"/Date(1416643200000)/"},{"data":0,"value":"/Date(1421740800000)/"},{"data":0,"value":"/Date(1425110400000)/"},{"data":0,"value":"/Date(1427526000000)/"},{"data":333,"value":"/Date(1432450800000)/"},{"data":-223,"value":"/Date(1434870000000)/"}]

don't show any diagram. why?

Upvotes: 2

Views: 3729

Answers (1)

Anthony Hilyard
Anthony Hilyard

Reputation: 1240

See the documentation here: https://morrisjs.github.io/morris.js/lines.html

You are missing the required options: element and labels.

element:

The ID of (or a reference to) the element into which to insert the graph. Note: this element must have a width and height defined in its styling.

labels:

A list of strings containing labels for the data series to be plotted (corresponding to the values in the ykeys option).

Upvotes: 3

Related Questions