dojox.charting.Chart dataRangeグラフのx軸を適切に制限しない

アプリケーションサーバーで実行されているサービスの数を監視するアプリケーションを構築しています。実行中のサービスに関する情報はデータベースに保存され、その情報の一部をウェブページに表示したいと考えています。この時点では、アクティブに実行されているサービスの数をグラフィカルに表現したいだけです。これは、データベースの更新時に動的に更新されます。目標は、実行中のサービスの数について最新の10（またはそれ）の値を表示するシンプルなグラフを作成することです。これはekgの読み込みと同様です。 dojox.charting.Chartウィジェットを使用していますが、チャートを正しく更新することができないため、numFailedAttemptsの最新の10個の値（「0」）のみが表示されます。現時点では、チャートにはすべての値が表示され、x軸の値は連続的に近づき、すべてのものを補完します。 dojo apiのリファレンスとdojotoolkit.orgのドキュメントに基づいて、私はdojox.charting.Chartの "displayRange"属性がこの問題を解決するはずだと考えました。だから私の質問は、私は間違って何をしているのですか？dojox.charting.Chart dataRangeグラフのx軸を適切に制限しない

<html> 
<head>   
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">   
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> 

    <script type="text/javascript"> 

     dojo.require("dojox.charting.StoreSeries"); 
     dojo.require("dojox.charting.Chart2D"); 
     dojo.require("dojo.store.Memory"); 
     dojo.require("dojo.store.Observable"); 
     dojo.require("dojox.charting.Chart"); 
     dojo.require("dojox.charting.plot2d.Areas"); 

     dojo.ready(function(){renderDataChart()}); 

     function renderDataChart(){ 

      //data from a database 
      var dataChartData = { 
       itentifier: 'id', 
       items: 
        [ 
        {id: 1, serviceName:"service1", startDate:"today", endDate:"today", numFailedAttempts:"1", errorTime:"null", errorMessage:"null", suppressError:"null"}, 
        {id: 2, serviceName:"service2", startDate:"today", endDate:"today", numFailedAttempts:"1", errorTime:"now", errorMessage:"broken", suppressError:"click"}, 
        {id: 3, serviceName:"service3", startDate:"today", endDate:"today", numFailedAttempts:"0", errorTime:"now", errorMessage:"broken", suppressError:"click"}, 
        {id: 4, serviceName:"service4", startDate:"today", endDate:"today", numFailedAttempts:"1", errorTime:"now", errorMessage:"broken", suppressError:"click"}, 
        {id: 5, serviceName:"service5", startDate:"today", endDate:"today", numFailedAttempts:"0", errorTime:"null", errorMessage:"null", suppressError:"null"} 
       ]      
      }; 
      //data store 
      var dataChartStore = dojo.store.Observable(new dojo.store.Memory({ 
       data: { 
        identifier: "id", 
        label: "runningServices", 
        items: dataChartData 
       } 
      }));  

      var dataChart = new dojox.charting.Chart("myDataChart", { 

       displayRange: 10, 
       stretchToFit: false, 
       scrolling: true,  
       fieldName: "runningServices", 
       type: dojox.charting.plot2d.Areas 
      }); 
      dataChart.addAxis("x", {microTickStep: 1, minorTickStep: 1}); 
      dataChart.addAxis("y", {vertical: true, minorTickStep: 1, natural: true}); 
      dataChart.addSeries("y", new dojox.charting.StoreSeries(dataChartStore, {query: {numFailedAttempts: 0}}, "value")); 
      dataChart.render(); 

      //update datastore to simulate new data 
      var startNumber = dataChartData.length; 
      var interval = setInterval(function(){ 
       dataChartStore.notify({value: Math.ceil(Math.random()*29), id: ++startNumber, numFailedAttempts: 0});      

      }, 1000); 
     } 
    </script> 
</head> 
<body> 
    <div id="myDataChart" style="width: 500px; height: 200px;"></div> 
</body>

出典

2011-12-08 Ted

私は同じ問題で苦労されています。ここでは、コードです。私はそれを完全に理解していませんが、私があなたが描いていると思っていることをする代替案を見つけました。

<html> 
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">   
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> 

<script type="text/javascript"> 

    dojo.require("dojox.charting.StoreSeries"); 
    dojo.require("dojo.store.Memory"); 
    dojo.require("dojo.store.Observable"); 

    dojo.require("dojox.charting.Chart2D"); 
    dojo.require("dojox.charting.Chart"); 
    dojo.require("dojox.charting.plot2d.Areas"); 

    dojo.ready(function() { 
    renderArrayChart(); 
    renderStoreChart(); 
    }); 

    function renderArrayChart() { 
    try { 
     var dataChart = new dojox.charting.Chart("myArrayChart", { 
     stretchToFit: false, 
     scrolling: false, 
     type: dojox.charting.plot2d.Areas, 
     title: "update array, rerender" 
     }); 

     // create an array of x/y pairs as the data source 
     var data = [{ x: 1, y: 2.1}]; 

     dataChart.addAxis("x", { microTickStep: 1, minorTickStep: 1 }); 

     // set min/max so the Y axis scale does not change with the data 
     dataChart.addAxis("y", { vertical: true, minorTickStep: 1, natural: true, min: 0, max: 30 }); 

     // create the series with the data array as the source 
     dataChart.addSeries("y", data); 
     dataChart.render(); 

     // this counter is used as the x value for new data points 
     var startNumber = data.length; 

     //update datastore to simulate new data 
     var interval = setInterval(function() { 

     // if we have more than 9 data points in the array, remove the first one 
     if (data.length > 9) data.splice(0, 1); 

     // push a new data point onto the array using the counter as the X value 
     data.push({ x: ++startNumber, y: Math.ceil(Math.random() * 29) }); 

     // update the series with the updated arrray 
     dataChart.updateSeries("y", data); 

     // re-render the chart 
     dataChart.render(); 

     }, 1000); 
    } 
    catch (ex) { 
     alert(ex.message); 
    } 
    } 


    function renderStoreChart() { 
    try { 
     // create an array as the data source 
     var dataArray = [{ id: 1, value: 2.1}]; 

     // create the observable data store 
     var dataStore = dojo.store.Observable(new dojo.store.Memory({ 
     data: { 
      identifier: "id", 
      items: dataArray 
     } 
     })); 

     var storeChart = new dojox.charting.Chart("myStoreChart", { 
     stretchToFit: false, 
     scrolling: false, 
     type: dojox.charting.plot2d.Areas, 
     title: "data store" 
     }); 

     storeChart.addAxis("x", { microTickStep: 1, minorTickStep: 1 }); 

     // set min/max so the Y axis scale does not change with the data 
     storeChart.addAxis("y", { vertical: true, minorTickStep: 1, natural: true, min: 0, max: 30 }); 

     storeChart.addSeries("y", new dojox.charting.StoreSeries(dataStore, { bindings: { x: "id", y: "value"} })); 
     storeChart.render(); 

     // this counter is used as the x value for new data points 
     var startNumber = 1; 

     //update datastore to simulate new data 
     var interval = setInterval(function() { 

     // if we have more than the desired number data points in the store, remove the first one 
     if (startNumber > 9) dataStore.notify(null, startNumber - 10); 

     // add a new point to the data store 
     dataStore.notify({ id: ++startNumber, value: Math.ceil(Math.random() * 29) }); 

     }, 1000); 
    } 
    catch (ex) { 
     alert(ex.message); 
    } 
    } 

</script> 
</head> 
<body> 
<div id="myArrayChart" style="width: 500px; height: 200px;"></div><br /> 
<div id="myStoreChart" style="width: 500px; height: 200px;"></div> 
</body> 
</html>

トップチャートは、データソース（代わりに観測店）などの単純な配列を使用して：ここにコード（以下に説明）です。 interval関数では、最初の配列要素をスライスし（要素数に達すると）、新しい要素を追加します。その後、系列（dataChart.updateSeries）を更新して、グラフを再描画します。 X軸ラベルを正しく動作させるために、各配列項目はオブジェクトのxとyの値です（例：{x：1、y：2.1}）。

下の図はデータストアを使用しています。グラフからスクロールするためのデータを取得します。 dataStore.notify（null、objectId）メソッドは、指定されたIDを持つオブジェクトをデータストアから削除します。ただし、このグラフのX軸ラベルはまだ正しく表示されません。

どちらの場合でも、グラフの縮尺は適切ではありません。わずか約50データポイントであっても、レンダリングは非常に遅くなります。私はFlotのような他のオプションを調べるかもしれません - より多くのデータポイントでより良い結果を出すようです。

出典

2012-04-19 14:46:52 mweaver

dojox.charting.Chart dataRangeグラフのx軸を適切に制限しない

答えて

関連する問題