PG电子作弊

書名： HTML5 Data and Services Cookbook
作者名： Gorgi Kosev Mite Mitreski
本章字數： 712字
更新時間： 2021-08-06 16:50:01

Making a live range chart filter

When working with large amounts of data, we usually want to add some way of filtering or picking up what data to show. This recipe will cover a simple range filter for the graph and a chart that displays time-varying series of data.

Getting ready

We will be using the same toolkit from the Making a motion chart recipe for creating interactive graphs. The necessary library Rickshaw can be retrieved from http://code.shutterstock.com/rickshaw/, and is part of the example code as well. Besides that we also need D3, because Rickshaw works on top of it.

How to do it...

We will create an HTML page containing a JavaScript file while generating a random data for the graph, and also add additional filtering elements.

First, we will make an HTML page and include the required CSS by the libraries.

<!DOCTYPE html>
  <html>
    <head>
      <link type="text/css" rel="stylesheet"href="css/vendor/graph.css">
      <link type="text/css" rel="stylesheet"href="css/vendor/legend.css">
      <link rel="stylesheet" type="text/css">
      <link type="text/css" rel="stylesheet"
        href="css/main.css">
    </head>

Notice that we add an additional file legend.css that contains the layout information about the graph legend. We can then add our custom CSS file.
```
<link type="text/css" rel="stylesheet" href="css/main.css">
```

The HTML placeholders for the graph, legend, and slide will be the regular div elements.

<div id="content">
<div id="chart"></div>
<div id="legend"></div>
</div>
<div style="clear:both"></div>
<div id="slider"></div>

We add the dependencies for the libraries. Besides Rickshaw and its dependency D3, we are going to add jQuery and jQuery UI, because we will be using controls from there. And now, we can proceed to the main JavaScript, and start with defining the color palette and the refresh rate.
```
var refreshRate = 300;
var palette = new Rickshaw.Color.Palette( { scheme: 'munin' } );
```

The next step is to create the graph in the chart element with 900px by 500px size.

var graph = new Rickshaw.Graph( {
  element: document.getElementById("chart"),
  width: 900,
  height: 500,
  renderer: 'area',
  series: new Rickshaw.Series.FixedDuration([{
    color: palette.color(),
    name: 'NASDAQ'
  },
  {
    color: palette.color(),
    name: 'NIKKEI'
  }], palette, {
    timeInterval: refreshRate,
    maxDataPoints: 200,
    timeBase: new Date().getTime() / 1000
  })
});

As for the slider property, Rickshaw provides us with a ready control that we can connect to the graph we created.
```
var slider = new Rickshaw.Graph.RangeSlider({
  graph: graph,
  element: $('#slider')
});
```
To have a Y axis drawn, we can create it, and can connect it to our graph.
```
var yAxis = new Rickshaw.Graph.Axis.Y({
  graph: graph
});
```
For creation of a legend on the colors and names of the data samples displayed, there is a control that we can use and connect with our graph as well, while we also specify the element where it will get rendered.
```
var legend = new Rickshaw.Graph.Legend({
  graph: graph,
  element: $('#legend').get(0)
});
```

Because this example has a time-series component, we will generate random data. After the generation of the data, we call graph.series.addData(data) and re-render the graph and yAxis property. This generation, data update, and rendering happens on every refreshRate milliseconds.

function getRandomInRange(n){
  return Math.floor(Math.random() * n);
}
setInterval( function() {
  var data = {
    one: getRandomInRange(50) + 100,
    two: 400 + getRandomInRange(110)*2
  };
  graph.series.addData(data);
  graph.render();
  yAxis.render();
}, refreshRate );

How it works...

Let's take a look at the graph's series input parameters.

series: new Rickshaw.Series.FixedDuration([{
  color: palette.color(),
  name: 'NASDAQ'
  }, {
  color: palette.color(),
  name: 'NIKKEI'
  }], palette,

Besides the graph data we also have a name and a color property. Now, the first thing you might ask yourself is, why have a color property and input a palette as well? Well, we do this in order to enable the other plugins to be able to read this information.

One of these plugins is Rickshaw.Graph.Legend that constructs a legend-box displaying info for each of the data streams.

We also add a range-filtering on the X axis with Rickshaw.Graph.RangeSlider.

var slider = new Rickshaw.Graph.RangeSlider({
  graph: graph,
  element: $('#slider')
});

In the background, the slider property uses jQuery UI control that is set to range:true. The minimum and maximum values are used from the current graph data. The slider property has a slide event that is used to limit the sample size displayed on the graph.

Because there is data being added constantly to the graph, the slider properties min and max values are set accordingly by an event from the graph. These are some of the considerations that you need to keep in mind while you are developing a custom control.

Slider set to only show a given portion of time. Because the time changes the slider is moved alongside with the data.

官术网_书友最值得收藏!

HTML5 Data and Services Cookbook

Making a live range chart filter

Getting ready

How to do it...

How it works...