There are times when some output elements from a data mashup may vary depending on some conditions. To use a concrete example, it is often the case that when displaying stock quotes, a drop in price is shown in red, a different color from a rise in stock price. To display text in different color using the dataViewer widget, one needs to wrap different HTML markup around the element value. In what follows, we will use a show how to use a data mashup to generate an element with conditional HTML markup.
First, we need to get a feed with stock prices for a few companies. Yahoo Finance provides a url to download a CSV file which returns live stock quotes for multiple tickers. To use the CSV download url in a data mashup, we need to convert it into a feed using the CSV feed generator. Starting in version 2, the CSV file is downloaded each time the feed is run providing us with live stock quote data. For this exercise, we have created a CSV feed returning stock quotes
on IBM Greenhouse
Next we create a new data mashup and use a Source operator to bring the Yahoo Stock Quote feed into the editor. Because the CSV file doesn't have a header row, the CSV feed generator generates generic element names like col_A, col_B etc. To make the data more comprehensible, we will use a Transform operator to "rename". For example, we create a new element call "Ticker" under entry on the output tree and then copy the text under col_A to underneath the "Ticker" element. We will also use the Transform operator to add HTML markup around the price change value i.e. text value under col_E. Here is the crucial step. Say we want to use red for lost and green for price gain, we will construct two elements, "redChange" and "greenChange" with the red and green HTML markup respectively. The markup can be inserted easily using the CONCAT function as shown in the image below.
Next, we will connect the Transform operator to a second Transform operator. We first copy all the elements we want in the output feed from the input to the output tree. We next create an element call "Change", right button click to bring up the context menu, select specify function value and select the Coalesce function. The Coalesce function can take any number of arguments. it will go down the list and return the first non-empty argument. For our purpose, we will specify the "redChange" text value as the first argument and "greenChange" text value as the second argument. To have the first argument be non-empty ONLY if the price is negative, we modify the generated XPath by adding a predicate which returns true only if the price is negative. In our case, this is the resulting XPath we need
./redChange[ /mhub:entry/Change < 0 ]/text()
All these are shown in the following image.
Now we are done. Just connect the second Transform operator to the Publish operator and select the desired output feed type. Since we are planning to use the dataViewer, we will select the Atom feed format. The resulting sample data mashup
can be found on IBM Greenhouse
. The feed when displayed in the dataViewer is shown below:
To summarize, we first create all the possible output elements and then use the coalesce function and XPATH predicate to select the desired element to be included in the final output.