MVC jQPlot JSON dataRenderer not plotting graph

Question

I´m using MVC4 together with jQPlot to built multiple pen DateTime X-Axis graphs.

I´using the following code at the controller to retrive server data through ajax:

public ActionResult GetPlotData()
        {
                List<Tuple<DateTime, decimal>> plotData = new List<Tuple<DateTime, decimal>>();

                ///
                /// Plot data
                /// 
                plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now, 10));
                plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now.AddHours(-1), 20));
                plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now.AddHours(-1), 30));
                plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now.AddHours(-1), 40));
                plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now.AddHours(-1), 50));

                return Json(plotData, JsonRequestBehavior.AllowGet);
            }

And here is my view:

<script type="text/javascript" src="~/Scripts/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.json2.min.js"></script>

<div id="chart"></div>

<script type="text/javascript">

    $(document).ready(function () {

        var ajaxDataRenderer = function (url, plot, options) {
            var ret = null;
            $.ajax({
                // have to use synchronous here, else the function 
                // will return before the data is fetched
                async: false,
                url: url,
                dataType: "json",
                success: function (data) {
                    ret = data;
                }
            });
            return ret;
        };

        var jsonurl = '@Url.Action("GetPlotData", "UserPDataTrend")';

        var plot1 = $.jqplot('chart', jsonurl, {
            title: 'Tendência Dados de Processo',
            dataRenderer: ajaxDataRenderer,
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%b&nbsp;%#d'
                    }
                },
                yaxis: {
                    tickOptions: {
                        formatString: '$%.2f'
                    }
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 7.5
            },
            cursor: {
                show: false
            }
        });
    });

</script>

This is what I get from browser (got it through F12 on browser):

[{"Item1":"\/Date(1386710588647)\/","Item2":10},{"Item1":"\/Date(1386706988649)\/","Item2":20},{"Item1":"\/Date(1386706988649)\/","Item2":30},{"Item1":"\/Date(1386706988649)\/","Item2":40},{"Item1":"\/Date(1386706988649)\/","Item2":50}]

Of course the data is unreadable for jqPlot, but I´ve tries using a different class, converted all to string array as Json data and none of them worked.

How can I build the data in Controller so that jQPlot can understand a DateTime and a Value.

Thanks for any help.

neel shah · Accepted Answer · 2013-12-11 07:25:10Z

2

don't change the data at controller end but at javascript end and convert it to array of arrays for the jqplot linechart

        for (var i = 0; i < result.Data.length; i++) {
            var date = result.Data[i].Date;
            var value = result.Data[i].Value;
            date = moment(date).format("YYYY MM DD,h:mm:ss"); 
            arr.push([date, value]);
        }

pass the array to the jqplot data this will work

answered Dec 11, 2013 at 7:25

neel shah

2,27118 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mendes Over a year ago

Not exactly your code, but it worked for me. Thanks for the help.

Collectives™ on Stack Overflow

MVC jQPlot JSON dataRenderer not plotting graph

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related