使用Envision.js創建基於Web的數據圖表組件使用股票價格訂閱源數據

我正在嘗試爲使用Envision.js的數據圖表組件創建一個Web應用程序。正在使用的數據是JSON格式的股票價格訂閱源。我已經使用ajax jquery調用獲取股票數據並在X-Y軸上應用數據，從而形成了標準的財務線圖（Envision Finance模板）。使用Envision.js創建基於Web的數據圖表組件使用股票價格訂閱源數據

但需求是創建一個實時圖表，隨着時間的推移，庫存數據會隨着所有子圖形的細節自動更新。下面是該股票圖表應用程序的代碼：

(function ajax_demo (container) { 

    // Get initial data 
    $.getJSON('static/stockTicker.json', function (initialData) { 
    var 
     currentData = initialData, 
     options, finance; 

    options = { 
     container : container, 
     data : { 
     price : currentData.price, 
     volume : currentData.volume, 
     summary : currentData.summary 
     }, 
     trackFormatter : function (o) { 

     var 
      index = o.index, 
      value; 

     value = currentData.data[index].date + ': $' + currentData.price[index][1] + ", Vol: " + currentData.volume[index][1]; 

     return value; 
     }, 
     // An initial selection 
     selection : { 
     data : { 
      x : { 
      min : 0, 
      max : 250 
      } 
     } 
     }, 
     // Override some defaults. 
     // Skip preprocessing to use flotr-formatted data. 
     defaults : { 
     volume : { 
      skipPreprocess : true 
     }, 
     price : { 
      skipPreprocess : true 
     }, 
     summary : { 
      skipPreprocess : true, 
      config : { 
      xaxis : { 
       // Set x ticks manually with defaults override: 
       ticks : currentData.summaryTicks 
      } 
      } 
     } 
     } 
    }; 

    // Set the selection callback: 

    options.selectionCallback = (function() { 

     var data = { 
     initial : initialData, 
     fetched : null 
     }; 

     // Helper for fetching high resolution data 
     function fetchData (o) { 
     $.getJSON('static/stockSample.json', function (fetchedData) { 
      data.fetched = fetchedData; 
      currentData = fetchedData; 
      finance.price.options.data = data.fetched.price; 
      finance.volume.options.data = data.fetched.volume; 
      _.each(finance.selection.followers, function (follower) { 
      follower.trigger('zoom', o); 
      }, this); 
     }); 
     } 

     // Selection callback: 
     return function (selection) { 

     if (finance) { 
      var 
      x = selection.data.x; 

      if (x.max !== null && Math.abs(x.max - x.min) < 250) { 
      if (data.fetched) { 

       // Use high resolution data, if available 
       finance.price.options.data = data.fetched.price; 
       finance.volume.options.data = data.fetched.volume; 
       currentData = data.fetched; 
      } else { 

       // Fetch high resolution data 
       fetchData(selection); 
      } 
      } else { 

      // Use low resolution data 
      finance.price.options.data = data.initial.price; 
      finance.volume.options.data = data.initial.volume; 
      currentData = data.initial; 
      } 
     } 
     } 
    })(); 

    finance = new envision.templates.Finance(options); 
    }); 
} 
)(document.getElementById("Demo"));

我不能讓我們可以在Envision.js股票圖表整合附有具體時間更新的動態股票價格數據的例子。我應該使用Spring mvc還是普通的servlet來使它工作？

請幫忙！

來源

2014-03-04 maali

您可以使用「在特定時間間隔後刷新」功能。

來源

2014-10-18 06:28:32

使用Envision.js創建基於Web的數據圖表組件使用股票價格訂閱源數據

回答

相關問題