Stock Quote Web Part(s)

August 16th, 2007 by Dor

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:

image

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 .webpart files and upload them. Drag and drop, repeat for the second file, and that’s it!


Posted in English Posts, MOSS, WSSv3 | del.icio.us:Stock Quote Web Part(s) digg:Stock Quote Web Part(s) reddit:Stock Quote Web Part(s)

13 Responses

  1. Andre Says:

    Hi!
    Excellent work.

    I’m having an error when stock chart is displayed: “Chart generation failed”.

    This even appears when using the download one.

    Any help?

    Thank you.

  2. Dor Says:

    Hi Andre, Sorry for the delayed answer, I’ll contact you by e-mail. I wasn’t at work for a week…

  3. Daniel Brown Says:

    Hi,

    I love these webpart! Theyar defiantly great!

    The only thing is, being an australian company in ausralia, the dates on the charts shoudl be dd/MM/yyyy.

    Is there anyway they can be changed?

    Cheers,

    Daniel Brown

  4. Dor Says:

    Hi Daniel,
    Thanks for the feedback :)
    Unfortunently the dates are rendered in the image and I couldn’t find a parameter that sets the date format. If you see any image generated from MSN Money with d/m/y dates please refer me to it so I can try and get the parameters…
    Dor.

  5. Daniel Brown Says:

    Hi Dor,

    Thanks for getting back to me.

    I figured as much, but its still a worthly web part to use.

    Thanks foryour efforts :)

    DB

  6. Lana Says:

    Hi Dor,
    I Downloaded & Installed the
    Stock Chart Web Part and it was great for a week but now it’s giving me “Chart generation failed”. Can you help me? :(

    Thank you,
    Lana

  7. Dor Says:

    It sometimes happens, due to server errors. If it consists, I would maybe check the stock symbol in MSN Money to make sure it can show its chart.

  8. Peter Says:

    Hi,

    Both webparts are great!

    I downloaded them both, The Stock_Chart.webpart works fine. However when I try to Import the Stock_Value.webpart, I got error saying
    “Unable to display this web part. …”
    I tried to use SharePoint Designer to open the page which has Stock_Value.webpart on it, I got following error,
    “Error Creating Control - SPSWC:redirecttowelcomepage The Web Part could not be desterilized from the markup”
    Any ideas about this error

    Thanks,

    Peter

  9. Dor Says:

    Hi Peter, this might be related to proxy settings since this web part works through a web service on the internet.
    This web service requires the server to be able to connect to the internet. (As opposed to the graph component which requires the client computer to be able to connect to the internet to fetch the picture.)

    I suggest trying to add an RSS web part to the same page, and enter an internet address. See if it works. If not, look up solutions for defining proxy settings for SharePoint 2007.

  10. Peter Says:

    Hi Dor,

    I have problem to use RSS web part too. Could you please let me know how to modify the proxy settings for Sharepoint 2007?

    Thanks a lot!

    Peter

  11. Dor Says:

    I used this article to fix my server’s proxy settings:
    http://blogs.msdn.com/adamhems/archive/2006/06/13/629761.aspx
    Good luck. :)

  12. ehaze Says:

    Thank you Dor!

    Just a note to others, if you open the ‘Stock Chart Web Part’ link and see a bunch of XML do this: from your browser, select File –> Save As. Then, edit the DWP file in SP Designer.

    I had tried doing a copy / paste into SP Designer and the web part failed to import.

  13. Jay Ortiz Says:

    I kept getting the “Unable to display the Web Part” and “The server returned a non-specific error” when attempting to “Show Data” from the data source in SPD. It appears to be permissions related, and the only way I could get Dor’s Stock Value webpart to display is by embedding a valid Username and Password in the webpart. Find “AuthType=”None”" and replace with AuthType=”Basic” AuthUserName=”domain\username” AuthPassword=”password”

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.