dojox.charting.Chart dataRange not restricting the chart x axis properly

StackOverflow https://stackoverflow.com/questions/8437719

  •  11-03-2021
  •  | 
  •  

Question

I am building an application that monitors the number of services running on an application server. Information about the services running will be stored on a database, and I want to display some of that information on a webpage. At this point I just want to build a graphical representation of the number of services actively running, which updates dynamically as the database is updated. The goal is to create a simple chart that displays the most recent 10 (or so) values for the number of services running, similar to what an ekg readout looks like. I am using the dojox.charting.Chart widget, but I am having trouble updating the chart properly, so that it only displays the ten most recent values for numFailedAttempts:"0". As it is right now, the chart displays all the values, and the x axis values continuously get closer and closer together to accommidate everything. Based on the dojo api reference and documentation on dojotoolkit.org, I thought that the "displayRange" attribute for the dojox.charting.Chart was supposed to solve this problem. So my question is, what am I doing wrong? Here's the code: 

<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>

Was it helpful?

Solution

I have been struggling with the same issue. I have not completely figured it out, but I have found an alternative that does what I think you are describing. Here is the code (explanation below):

<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>

The top chart uses a simple array as the data source (instead of an Observable store). In the interval function, it simply slices the first array element (after reaching the desired number of elements) and adds a new element. It then updates the series (dataChart.updateSeries) and then re-renders the chart. In order to get the X axis labels to work correctly, each array item is an object x and y value (e.g. {x: 1, y: 2.1}).

The bottom chart uses the data store (an adaptation of your example). It does get the data to scroll off the chart. The dataStore.notify(null, objectId) method will remove the object with the given id from the data store. However, the X axis labels on this chart still do not display correctly.

In either case, the chart does not scale well. Even with only about 50 data points, the rendering gets very slow. I may try looking at other options, such as Flot - which seems to perform better with a larger number of data points.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top