locked
Dynamic Data Issue in Jquery Bar Graph RRS feed

  • Question

  • Static Data for Bar Graph is fine 

    <script type="text/javascript">
                $(function () {
                    $.ajax({
                        type: "POST",
                        url: "Dashboard.aspx/GetBarData",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            // alert(data.d);

                            var testData = [{ device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'Last', Amount: 0 }];

                                Morris.Bar({
                                    element: 'morris-bar-chart',
                                    data: testData,
                                    xkey: 'device',
                                    ykeys: ['Amount'],
                                    labels: ['Amount'],
                                    barRatio: 0.4,
                                    xLabelAngle: 35,
                                    hideHover: 'auto',
                                    resize: true
                                });

                        },

                        error: function () { alert("Ajax Error"); }
                    });

                });

    when i am passing dynamic data like below it does not show the graph, can any body help me why this so or do you have any sample in jquery graph in asp.net

    WebMethod

           

          [WebMethod]
            public static string GetBarData()
            {
                string query = "[{ device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'January', Amount: 25544 }, { device: 'Last', Amount: 0 }]";
                return query;
    }

    //calling through JSON below not working

                                               

    <script type="text/javascript">
                $(function () {
                    $.ajax({
                        type: "POST",
                        url: "Dashboard.aspx/GetBarData",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            // alert(data.d);

                            var testData =data.d;

                                Morris.Bar({
                                    element: 'morris-bar-chart',
                                    data: testData,
                                    xkey: 'device',
                                    ykeys: ['Amount'],
                                    labels: ['Amount'],
                                    barRatio: 0.4,
                                    xLabelAngle: 35,
                                    hideHover: 'auto',
                                    resize: true
                                });

                        },

                        error: function () { alert("Ajax Error"); }
                    });

                });

                                               
    Wednesday, August 13, 2014 7:39 AM

All replies

  • Hey,

    Have you ever heard about highchart/highstock? You can create interactive charts easily for your web projects using highchart. Check it out. It may help you.

    Thanks.

    Sunday, August 24, 2014 4:47 AM