As you can see, we’re including the JavaScript libraries at the end of the document. This approach lets the browser load the document’s entire HTML markup and begin laying out the page while it waits for the server to provide the JavaScript libraries.
Step 2: Set Aside a <div> Element to Hold the Chart
Step 2: Set Aside a <div> Element to Hold the Chart
Within our document, we need to create a <div> element to contain the chart we’ll construct. This element must have an explicit height and width, or Flot won’t be able to construct the chart. We can indicate the element’s size in a CSS style sheet, or we can place it directly on the element itself. Here’s how the document might look with the latter approach.
In later examples we’ll see how to get the data directly from the World Bank’s web service, but for this example, let’s keep things simple and assume we have the data already downloaded and formatted for JavaScript. (For brevity, only excerpts are shown here. The book’s source code includes the full data set.)
var eas = [[1960,0.1558],[1961,0.1547],[1962,0.1574], // Data continues...
var ecs = [[1960,0.4421],[1961,0.4706],[1962,0.5145], // Data continues...
var lcn = [[1960,0.0811],[1961,0.0860],[1962,0.0990], // Data continues...
var mea = [[1968,0.0383],[1969,0.0426],[1970,0.0471], // Data continues...
var sas = [[1960,0.0478],[1961,0.0383],[1962,0.0389], // Data continues...
var ssf = [[1960,0.0297],[1961,0.0308],[1962,0.0334], // Data continues...
This data includes the historical GDP (in current US dollars) for major regions of the world, from 1960 to 2011. The names of the variables are the World Bank region codes.
Before we add any interactivity, let’s check out the chart itself. The Flot library provides a simple function call to create a static graph. We call the jQuery extension plot and pass it two parameters. The first parameter identifies the HTML element that should contain the chart, and the second parameter provides the data as an array of data sets. In this case, we pass in an array with the series we defined earlier for each region.
Now that we have a chart we’re happy with, we can add the HTML controls to interact with it. For this example, our goal is fairly simple: our users should be able to pick which regions appear on the graph. We’ll give them that option with a set of checkboxes, one for each region. Here’s the markup to include the checkboxes.
<label><input type="checkbox"> East Asia & Pacific</label>
<label><input type="checkbox"> Europe & Central Asia</label>
<label><input type="checkbox"> Latin America & Caribbean</label>
<label><input type="checkbox"> Middle East & North Africa</label>
You may be surprised to see that we’ve placed the <input> controls inside the <label> elements. Although it looks a little unusual, that’s almost always the best approach. When we do that, the browser interprets clicks on the label as clicks on the control, whereas if we separate the labels from the controls, it forces the user to click on the tiny checkbox itself to have any effect.
On our web page, we’d like to place the controls on the right side of the chart. We can do that by creating a containing <div> and making the chart and the controls float (left) within it. While we’re experimenting with the layout, it’s easiest to simply add the styling directly in the HTML markup. In a production implementation, you might want to define the styles in an external style sheet.
Step 6: Define the Data Structure for the Interaction
Step 6: Define the Data Structure for the Interaction
Now that the general layout looks good, we can turn back to JavaScript. First we need to expand our data to track the interaction state. Instead of storing the data as simple arrays of values, we’ll use an array of objects. Each object will include the corresponding data values along with other properties.
Each object includes the data points for a region, and it also gives us a place to define additional properties, including the label for the series and other status information. One property that we want to track is whether the series should be included on the chart (using the key show). We also need to specify the color for each line; otherwise, the Flot library will pick the color dynamically based on how many regions are visible at the same time, and we won’t be able to match the color with the control legend.
Now that our new data structure can provide the chart input, let’s use it to add the checkbox controls to the page as well. The jQuery .each() function is a convenient way to iterate through the array of regions. Its parameters include an array of objects and a function to execute on each object in the array. That function takes two parameters, the array index and the array object.
$.each(source, function(idx, region) {
var input = $("<input>").attr("type","checkbox").attr("id","chk-"+idx);
if (region.show) {
$(input).prop("checked",true);
}
var span = $("<span>").css({
"background-color": region.color,
"display": "inline-block",
"height": "0.9em",
"width": "0.9em",
"margin-right": "0.25em",
});
var label = $("<label>").append(input).append(span).append(region.name);
jg-xs1
京公网安备 11010802022788号
论坛法律顾问：王进律师
知识产权保护声明
免责及隐私声明
发帖
雷达卡
