morris.js and webservice

Question

User560206892 posted

i have some troubles using morris.js with asp.net webservice here my js code :

 function Graph() {
        var dd = JSON.stringify({ "panum": pnum, "rubnum" : rnum });

        $.ajax({
            type: 'GET',
            url: "MyService.asmx/Getchartdata",
            dataType: 'json',
            async: false,
            contentType: "application/json; charset=utf-8",
            data: dd,
            success: function (result) {
                dd = result; // also tried data.d
            },
            error: function (xhr, status, error) {
                alert(error);
            }
        });

        return dd;
    }


    $(document).ready(function () {

        Morris.Line({
            element: 'area-example',
            data: $.parseJSON(Graph()),
            xkey: 'DAT',
            ykeys: ['VAL'],
            labels: ['VAL'],
            smooth: false
        });
    });
</script>

and here is my server side code 

  public class ChartPointClass
{
    public string DAT { get; set; }

    public string VAL { get; set; }
}


[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false)]
[WebMethod(EnableSession = true)]
public string Getchartdata(int panum, int rubnum)
{
    string result = "";

    using (Entities me = ContextFactory.ObtainContext())
    {


        var q = from n in me.VISRUBs.Where(a => a.RUBNUM == rubnum && a.VISANA.VISITE.PANUM == panum)
                .OrderBy(a => a.VISANA.VISITE.DATEVIS).ToList()

                select new ChartPointClass()
                {
                    DAT = String.Format("{0:dd/MM/yyyy}", (DateTime)n.VISANA.VISITE.DATEVIS.Value),
                    VAL = n.VALEUR
                };



        JavaScriptSerializer serializer = new JavaScriptSerializer();
        result = serializer.Serialize(q.ToList());
        return result;
    }

}

i have also checked that the data returned from my web service are in this form

<string xmlns="http://MyWebsite.net/WebServices">
[{"DAT":"12/01/2015","VAL":"0.92"},{"DAT":"22/01/2015","VAL":"1.00"},{"DAT":"15/02/2015","VAL":"0.98"}]

the problem is that i have an internal server error with this setup and an error in the console Uncaught TypeError: Cannot read property 'match' of undefined .

any idea what i am missing please ?

Answer 1

User61956409 posted

Hi issam75,

the problem is that i have an internal server error with this setup and an error in the console Uncaught TypeError: Cannot read property 'match' of undefined .

Firstly, do you debug your code to find the line of code that causes the error?

Secondly, you could try to initiate morris.js in AJAX success callback function.

function Graph() {
    var dd = JSON.stringify({ "panum": pnum, "rubnum": rnum });

    $.ajax({
        type: 'GET',
        url: "MyService.asmx/Getchartdata",
        dataType: 'json',
        async: false,
        contentType: "application/json; charset=utf-8",
        data: dd,
        success: function (result) {
            dd = result; // also tried data.d
            Morris.Line({
                element: 'area-example',
                data: dd,
                xkey: 'DAT',
                ykeys: ['VAL'],
                labels: ['VAL'],
                smooth: false
            });
        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });

    //return dd;
}


$(document).ready(function () {
    Graph();
});

Best Regards,

Fei Han

Answer 2

User560206892 posted

Hi Fei Han ,

actually i have solved my problem by nitiating morris.js in the AJAX success callback function just like you suggest .

btw in the morris.js create function there was an important parameter missing in my code

 Morris.Line({
                element: 'area-example',
                data: dd,
                xkey: 'DAT',
                ykeys: ['VAL'],
                labels: ['VAL'],
                smooth: false,
parseTime: false

            });

the last parameter was handling the X values as datetimes wich i don't want and it caused some errors in the clilent side .

anyway thanks a lot .