Epoch实时图表 - 多层 - Javascript

时间:2017-10-02 22:20:36

标签: javascript charts real-time epoch.js

以下示例适用于实时运行Epoch,但是,我要做的是运行多层线而不是

    var barChartData = [{
  label: "Series 1",
  values: [{
    time: getTimeValue(),
    y: getRandomValue()
  },
{
      label: "Series 2",
      values: [{
        time: getTimeValue(),
        y: getRandomValue()
      }

]}, ];

如下所示,但我不确定如何推送不同图层的数据?任何帮助?我试图用多层推送数据,但是我收到了一个错误,我在Epoch API文档中找不到任何提示?任何帮助将非常感激

///////////////this function generates the date and time in milliseconds//////////

function getTimeValue() {
  var dateBuffer = new Date();
  var Time = dateBuffer.getTime();
  return Time;
}

////////////// this function generates a random value ////////////////////////////
function getRandomValue() {
  var randomValue = Math.random() * 100;
  return randomValue;
}

////////////// this function is used to update the chart values /////////////// 
function updateGraph() {
    var newBarChartData = [{time: getTimeValue(), y:getRandomValue()}];

  barChartInstance.push(newBarChartData);
}

////////////// real time graph generation////////////////////////////////////////     
var barChartData = [{
  label: "Series 1",
  values: [{
    time: getTimeValue(),
    y: getRandomValue()
  }]
}, ];

var barChartInstance = $('#barChart').epoch({
  type: 'time.bar',
  axes: ['right', 'bottom', 'left'],
  data: barChartData
});

下面的Html代码来运行代码,

<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js">
  </script>
  <script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/d3.min.js">
  </script>
  <script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.css">
</head>

<div id="barChart" class="epoch category10" style="width:320px; height: 240px;"></div>
<p id="updateMessage" onclick="updateGraph()">click me to update chart</p>

1 个答案:

答案 0 :(得分:0)

我找到了答案,基本上你可以用数组值推送数据对象,如下所示......

 chart.push([
    { time: time, y: x},
    { time: time, y: x * Math.log(x)},
     { time: time, y: x * Math.pow(Math.log(x), 2)}
 ]);