如何在实时Flot图表中显示Json随机数？

I made in my C# page a random number which is stored in a json object:

我在C#页面中创建了一个存储在json对象中的随机数:

if (method == "rnd")
{
    //Random number
    this.Page.Response.ContentType = "application/json2";
    Random rnd = new Random();
    int nr = rnd.Next(1, 100); // creates a number between 1 and 99
    String str1 = nr.ToString();
    var json2 = new JavaScriptSerializer().Serialize(str1);
    this.Page.Response.Write(json2);
}

and then I display it on my ASP page:

然后我在我的ASP页面上显示它:

  function test2() {
      $.ajax({
          type: 'GET',
          url: ('ajax.aspx?meth=') + "rnd",/
          contentType: 'application/json2; charset=utf-8',
          dataType: 'json',
          async: true,
          cache: false,
          global: false, 
          timeout: 120000,
          success: function (data, textStatus, jqXHR) { 
              $('#nr').html(data);    

              //start: plot in real time   
              var plot = $.plot("#placeholder", data, {
                  series: {
                      shadowSize: 0 // Drawing is faster without shadows
                  },
                  yaxis: {
                      min: 0,
                      max: 100
                  },
                  xaxis: {
                      show: false
                  }
              });
              //end: plot in real time
          },
          error: function (jqXHR, textStatus, errorThrown) {
              window.alert(errorThrown);
          }
      });
  }
  window.setInterval(test2, 1000);

and the HTML:

和HTML:

<div id="nr"></div>
<div class="demo-container">
    <div id="placeholder" class="demo-placeholder"></div>
</div>

I don't get the random number on my chart. What did I do wrong? The code between //start: plot in real time and //end: plot in real time I took from here: http://www.flotcharts.org/flot/examples/realtime/index.html

我的图表上没有随机数字。我做错了什么? // start:实时绘制和//结束之间的代码:我从这里实时绘制的图片:http://www.flotcharts.org/flot/examples/realtime/index.html

2 个解决方案

#1

Try this on your client side:

在客户端试试这个:

function test2() {
                $.ajax({
                    type: 'GET',
                    url: ('ajax.aspx?meth=') + "rnd",
                    contentType: 'application/json2; charset=utf-8',
                    dataType: 'json',
                    //async: true,
                    //cache: false,
                    //global: false,
                    //  timeout: 120000,
                    success: function (data, textStatus, jqXHR) {

                        var obj = jQuery.parseJSON(data);

                        $('#azi').html(obj.sec);
                        $('#nr').html(obj.val);
                        $('#nr1').html(obj.val1);

                        t = obj.val;
                        t1 = obj.val1;
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        window.alert(errorThrown);
                    }
                });

            }

#2

Flot needs its data as an array of data series and data points not just one number. The simplest solution would be to insert this before your $.plot() call:

Flot需要将其数据作为数据序列和数据点的数组而不仅仅是一个数字。最简单的解决方案是在$ .plot()调用之前插入它:

data = [[[1, data]]];

If you want to build a chart over time like in the example, you have to start with an (empty) array and add each new number you get to it.

如果你想像在示例中一样构建一个图表,你必须从(空)数组开始并添加你得到的每个新数字。

Edit:

For a complete line define a global variable for the chart data and a counter:

对于完整的行,定义图表数据的全局变量和计数器:

var completeData = [[]];
var dataCounter = 0;

In your success callback, instead of the code from above insert this:

在您的成功回调中,而不是上面的代码插入此:

completeData[0].push([dataCounter++, data]);

and change the $.plot() call to

并将$ .plot()调用更改为

var plot = $.plot("#placeholder", completeData, {

#1