Does this hurt?

We've got our design in place, from top to bottom, so now it's time to cast a critical eye over it. Are there any unknown aspects of the design or are there any potential pain points? The live-updating chart is a little bit of a black box right now. While we know that charts support animation (via the animate configuration option), we want to be certain that the axis on the chart can update as the new data comes in. It's worth doing a very simple test to make certain this'll work. To do this, we're going to go a little bit retro.

Rather than using Sencha Cmd and the whole Bootstrap process, we're going to link directly to the files we need and use Ext.onReady to run our code. Here's the empty template:

<!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>Chart Test</title>
 <script type="text/javascript" src="ext/build/ext-all-debug.js"></script>
    <script type="text/javascript" src="ext/packages/sencha-charts/build/sencha-charts-debug.js"></script>
<link rel="stylesheet" type="text/css" href="ext/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all-debug.css">
</head>
<body>
   <div id="chart"></div>

   <script type="text/javascript">
   Ext.onReady(function() {
         // Code goes here.
   });
   </script>
</body>
</html>

We've created an HTML page that links to the JS files for Ext JS and Sencha Charts as well as the CSS for one of the Ext JS Themes. In the body of the HTML, we will create a div with an ID of "chart" to render into and then an Ext.onReady block where we'll place the bulk of our code. First, let's set up a store in here:

var store = Ext.create('Ext.data.Store', {
   fields: [
          { name: 'value' },
          { name: 'time', type: 'date' }
   ]
});

Variables for the current time "from" and "to" times for the chart axis is shown here:

var now = new Date();
      fromDate = Ext.Date.subtract(now, Ext.Date.MINUTE, 1),
      toDate = Ext.Date.add(now, Ext.Date.MINUTE, 5);

And then the chart itself:

var chart = Ext.create('Ext.chart.Chart', {
    renderTo: 'chart',
    width: 500, height: 300,
    animate: true, store: store,
    axes: [
        { type: 'numeric', position: 'left', fields: 'value' }, 
        {
            type: 'time', fields: 'time', dateFormat: 'H:i:s',
            fromDate: fromDate.setSeconds(0),
            toDate: toDate.setSeconds(0)
        }
    ],
    series: [{ type: 'line', xField: 'time', yField: 'value' }]
});

Now, let's add some data to the store:

setInterval(function() {
    store.add({
        time: (new Date()).toISOString(),
        value: Ext.Number.randomInt(1, 30)
    });
}, 1000);

Every second, we add a new record to the store with the current time and a random value. After running this code, we get a line chart that updates every second, fantastic! However, while this is pretty close to what we need, there is a problem. As the line approaches the right-hand side of the chart, it just disappears off the canvas. We need to somehow update the bottom axis of the chart when we update its data.

The chart has a redraw event that we can use for just this purpose. What we'll try to do is move the from date and the to date located at the bottom axis forward by 15 seconds. As the redraw event will be triggered every second, thanks to our store updating via the setInterval call, every fifteenth time the redraw event is fired, we update the axes. This is how it looks in code:

var redrawCounter = 0;

chart.on('redraw', function() {
    redrawCounter++;

    if(redrawCounter > 15) {
        redrawCounter = 0;

        var timeAxis = this.getAxes()[1],
            oldFrom = new Date(timeAxis.getFromDate()),
            oldTo = new Date(timeAxis.getToDate()),
            newFrom = Ext.Date.add(oldFrom, Ext.Date.SECOND, 15),
            newTo = Ext.Date.add(oldTo, Ext.Date.SECOND, 15);

        timeAxis.setFromDate(newFrom);
        timeAxis.setToDate(newTo);
    }
});

We use a variable called redrawCounter to keep track of how many times the redraw event has fired since our last axis adjustment. The rest of the code should be fairly straightforward. Grab the bottom and set its dates 15 seconds ahead.

This was all fairly painless, although there were some unexpected hurdles in having to hook into the redraw event. Now that we've assured ourselves that this particular issue can be solved, we can move on to building the rest of the application.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset