Stock Quote Web Parts
(Reposted from www.rotman.be/blog)
| Yesterday I was asked to put a web part on an internal MS site, which displays Microsoft’s stock current value and a graph to show its changes. This appeared to be easy - Yahoo offers these kind of web widgets that can be embedded in a site. However, the Yahoo widget has a big logo and commercials, and this isn’t suitable for an internal MS site. So I needed to get the data elsewhere. After some research I found a way to do this, using MS only tools: |  |
So I separated the functionality to two Web Parts:
- Data View Web Part (created using SharePoint Designer) - to consume the Web Service
- Content Editor Web Part - to run some javascript to get the chart image
If you’re interested in how I created the Web Parts, keep on reading. Otherwise, skip to the end of the post to download them.
1. The Stock Value Web Part
That’s easy - open up SharePoint Designer, open some SharePoint page you can edit on a test site, and connect to a data source - the MoneyCentral Web Service. You’ll get the data, which you can add to your page using the Data View Web Part.
However, there’s a problem - the Web Service output is a string that contains a lot of XML data as a String and not as a complex XML tag. SharePoint Designer doesn’t know the schema of that XML and can’t isolate just the current value of the stock from it. So I used a couple of functions to isolate the relevant text. (substring-before, substring-after.)
Then just save the page, view it in your browser, export it using the Web Part menu, and import it to wherever you want to place it. (By working on a test site and importing the Web Part, the page desination page will not be unghosted.)
2. The Stock Chart Web Part
This is a bit more tricky: you can take images straight from the MSN website, because the image source is a DLL that generates them on demand. You just need to send the right parameters.
Please notice that by using this trick, we’re actually “stealing” bandwidth and CPU from MSN’s servers. So the minimum I could do is put some nice link to MSN to give them credit..
I created a Javascript function that generates the URL:
formatChartImageSrc(symbol, fromDate, toDate, imgWidth, imgHeight)
Parameters:
- symbol: a string containing the stock symbol name, like “MSFT”.
- fromDate: a Date object containing the date from which to display the timeline.
- toDate: the date in which the timeline will end (usually today)
- imgWidth, imgHeight: Dimensions of generated image.
Here is a sample use of the function that outputs the URL for a 1-year view of the MSFT stock, until today. Then I get an IMG element with the ID “chart” and set it’s source to the generated URL.
var stockName = “MSFT”;
var toDate = new Date();
var day = 1000*60*60*24
var fromDate = new Date(toDate - day*365);
var srcUrl = formatChartImageSrc(stockName, fromDate, toDate, 300, 300);
var chartObj = document.getElementById(“chart”);
chartObj.src = srcUrl;
I place this code and the <img> tag itself in the Content Editor Web Part, and that’s it. The image will be up to date.
Download & Installation
Here are the links to the files:
Changing the stock symbol
After you save the Web Parts locally, open them in a text editor. Search and replace the word MSFT with the stock symbol you want to display. Do this before uploading the Web Parts to your website.
Importing the files to the site
To install, go to a SharePoint Site, click Site Settings and then Edit This Page. Add a Web Part to a zone, and then click the bottom link in the Add Web Part Dialog to get to the advanced mode. Now you’ll see the gallery on the side of the page. On the top of the gallery, you will see the word Browse. Click it and choose Import instead. Then pick one of the web part files and upload them. Drag and drop, repeat for the second file, and that’s it!
Dor Rotman.