带有json实时数据的冰沙图表

时间:2012-03-20 04:24:48

标签: json charts smoothie.js

我正在尝试smoothies charts

这是我服务器的json输出:

{"time": "1332216212", "in": "4.52", "out": "4.85"}

以下是呈现图表的代码:

<script type="text/javascript">
      var dataSet1 = new TimeSeries(), dataSet2 = new TimeSeries();

      setInterval(function() {
       $.getJSON("/stats",function(data){
        var now = new Date().getTime();
        dataSet1.append(data.time, data.in);
        dataSet2.append(data.time, data.out);
     });
     }, 1000);

 var smoothie = new SmoothieChart({ minValue: 0.0, maxValue: 1.0, millisPerPixel: 20, grid: { strokeStyle: '#555555', lineWidth: 1, millisPerLine: 1000, verticalSections: 4 }});
      smoothie.addTimeSeries(dataSet1, { strokeStyle: 'rgba(255, 0, 0, 1)', fillStyle: 'rgba(255, 0, 0, 0.2)', lineWidth: 3 });
      smoothie.addTimeSeries(dataSet2, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 3 });
      smoothie.addTimeSeries(dataSet3, { strokeStyle: 'rgba(0, 0, 255, 1)', fillStyle: 'rgba(0, 0, 255, 0.2)', lineWidth: 3 });
      smoothie.streamTo(document.getElementById('chart'), 1000);

    </script>

Json数据带宽统计。使用上面的代码,图形不会被渲染。但是根据Web服务器日志从服务器获取数据。我正在使用jquery1.3.2。我有什么不对吗?

1 个答案:

答案 0 :(得分:1)

尝试使用您创建的'var now'替换每个dataSet的append()函数中的'data.time'。根据我对Smoothie的使用,它真的希望客户端(浏览器)处理图形的时间,而不是从服务器进入的值。如果您需要来自外部源的时间信息,那么我建议您查看Flot,因为这将为您提供更多功能。冰沙是非常基本的;它只是希望数据在实时时间线上绘制。