用于flot图表的JQuery JSON动态数据

时间:2014-12-29 09:29:28

标签: jquery asp.net-mvc-4 charts

我正在尝试使用示例链接here

在我的应用程序中集成JQuery Flot Chart

为了将数据传递给Plot函数,我在控制器中编写了以下操作,并返回了JSON结果。

[HttpGet]
    public JsonResult GetInvoicePoints(string FromShow, string ToShow)
    {
        StringBuilder sb = new StringBuilder();
        DateTime From;
        DateTime To;
        if (DateTime.TryParse(FromShow, out From) && DateTime.TryParse(ToShow, out To))
        {
          foreach (var x in db.res.where(f=>f.date>=FromShow && f.date<=ToShow))
           {
             sb.Append("[" + x.Dt.Month + "," + x.Amt + "],");
           }
        }
     return Json(sb.ToString(),JsonRequestBehavior.AllowGet);
    }

上述代码的输出结果为"[6,0],[7,0],[8,0],[9,0],[10,0],[11,0],[12,2000.00]," 客户端我写了以下代码

$(function () {
                // jQuery Flot Chart
                var url='@Url.Action("GetInvoicePoints", "Admin")';
                var From="06/06/2013";
                var To = "12/30/2014";                  
                $.getJSON(url, { "FromShow": From, "ToShow": To }, function (responseText) {                        
                    var jsonresponse = responseText.replace(/"/g, '');
                    jsonresponse = "[" + jsonresponse + "]";
                    var  data = [{label: "Paid Subscriptions",
                        data: jsonresponse,
                       lines: {
                           show: true,
                           lineWidth: 1,
                           fill: true,
                           fillColor: {
                               colors: [{
                                   opacity: 0.1
                               }, {
                                   opacity: 0.13
                               }]
                           }
                       },
                       points: {
                           show: true
                       }
                   }];

                    var options = {
                        grid: {
                            hoverable: true
                        },
                        colors: ["#568A89", "#3276B1"],
                        tooltip: true,
                        tooltipOpts: {
                            content: "Value <b>$x</b> Value <span>$y</span>",
                            defaultTheme: false
                        },
                        xaxis: {
                            ticks: [[1, "JAN"], [2, "FEB"], [3, "MAR"], [4, "APR"], [5, "MAY"], [6, "JUN"], [7, "JUL"], [8, "AUG"], [9, "SEP"], [10, "OCT"], [11, "NOV"], [12, "DEC"], [13, "JAN+1"]]
                        },
                        yaxes: {

                        }
                    };

                    var plot3 = $.plot($("#statsChart"), data, options);
                });

我的问题是flot图表正确显示

中的以下硬编码值
data: [[6,0],[7,0],[8,0],[9,0],[10,0],[11,0],[12,2000.00],],

但不适用于

的动态值
data: jsonresponse,

如何解决这个问题?

0 个答案:

没有答案