Derrick Smith Header Image
Information Technology

WordPress Stock Quote Widget

While designing a proof of concept intranet solution in WordPress I wanted to provide a stock quote widget in the template sidebar. I searched through the WordPress plugin repository and found a couple of widgets that display a stock watch list or ticker in the sidebar but none of them provided an on-demand quote.  The plugin requirements were simple. I wanted a site visitor to be able to input a ticker symbol in the sidebar and then have a quote displayed in a popup using ajax.  Below are some of the plugins I looked at. Stock Quote Sidebar – This widget puts a stock quote list in the sidebar. It has a nice tooltip that displays a historical chart for the ticker symbol. This is a great plugin for a list of predefined stocks. WP Stock Ticker – This plugin creates an actual ticker from a list of ticker symbols. Its under current development and has a decent rating. Although this plugin came up in my search, it isn’t at all what I was searching for. In the end, I decided to build a quick plugin. The plugin is really very simple.  It queries the Yahoo stock API for current and historical data and passes the information back to the browser via an ajax call.  I decided to use Fancybox to implement the popup. As I began to build the plugin I realized the need to display historical price data in a chart. To this end I chose to use Highcharts as the charting plugin. The popup now displays the current quote and a 1 yr historical price chart for the stock. The following are screenshots of the widget.

Stock Quote Widget
Stock Quote Widget
Stock Quote Widget Popup
Stock Quote Widget Popup
Stock Quote Widget Popup showing History Tooltip
Stock Quote Widget Popup

This plugin does require Fancybox. I suggest Easy Fancybox or WP Fancybox. Also, Highcharts is a licensed software. If you intend to use this widget on a commercial site you will want to obtain the appropriate licensing from HighCharts.com. You can download the widget below. I do not plan to maintain the plugin unless there is high interest. If I receive enough feedback I will upload it to the WordPress plugin repository.

[wp_ad_camp_2]

[wpdm_package id=’3862′]

Related Entries

GLPI IT Service Management Single Sign On using SAML

Hardening WordPress: File Permissions

GLPI integration with Nagios through custom event handlers

Buddypress Wiki Component

55 Comments

  1. sarvesh gupta

    Hi Derrick
    i want to use your widget for users to put their stock quote and check.
    please provide us the latest working link.
    Many thanks.

    1. Derrick

      I have updated the link but have not tested this plugin with recent versions of WordPress. Please post back if this works for you. Thanks

  2. Question, do you or can you tell me how to get the chart to open in a div on the page instead of the fancybox?

    1. Derrick

      You need to load the div with javascript. Here’s an example:

      HTML Code

      [div id="div_to_load_with_javascript"][/div]

      Javascript Code

      jQuery(document).ready(function($) {
      var chart = new Highcharts.StockChart({
      chart : {
      renderTo : "div_to_load_with_javascript",
      },
      series : [{
      name : 'Chart Name',
      data : data, //json data value created at page load via php or ajax
      tooltip: {
      valueDecimals: 2
      },
      pointInterval: 24 * 3600 * 1000,
      }],
      yAxis: {
      title: {
      text: "yAxis Title"
      },
      offset: 30
      },
      xAxis: {
      title: {
      text: "xAxis Title"
      },
      type: 'datetime',
      }
      });
      });

  3. David

    Great charts. However is it possbile to set this for searching swedish stock qoutes only with the company name or ticker. For example when serching for Apple stock then it is possible to write only “Apple” or the shortnamet “AAPL” and you get the qoute.

    The problem is when searchin stocks in non-us exchange for example. For Sweden it is not enough to use “Volvo” or only the short name “VOLV” When serching the qoute in the widget to get a result we also most ad the country/echange.. So a user must search for “VOLV-A.ST” adding the ST to the stoch name. Is there any workaround for this?

    Regards
    D.K

    1. d-rock

      Hi David,

      The stock quotes widget is setup to get its quotes from the Yahoo quotes engine which requires a ticker as input. You could modify/pass the search query to a subroutine that checks it against a lookup table that has both company names and tickers but you would have to source that information somewhere or use a service. You would perform this before:

      $q=$_POST[“q”];

      in the stock_quote_ajax() function

      If you can find a source I’d be happy to implement the feature. Hope that helps. Thanks

  4. Hi d-Rock… i`ve run your cool plugin on http://capitalbridge.co.id with only 2 plugin , ur plugin and fancybox wp

    but stil no luck 🙁

    can u review it..? thnaks alot

    1. d-rock

      Hello Muslih,

      You are receiving a “Null” response from the Ajax request to Yahoo Stock Quotes.

      {“history”:null}

      TypeError: quote.quote is undefined
      name = quote[‘quote’][0];

      Try to browse the following address and see if it returns a “CSV” file.

      http://finance.yahoo.com/d/quotes.csv?s=msft&f=nsxl1d1t1c1ohgv&e=.csv

      1. oks, on chrome and mozilla i`ve browse that link and returns download a csv files…

        than how to fixed..? sorry i`m not programmer geek

        thank you

  5. scott

    never mind I guess I didn’t read it haha.

    1. d-rock

      Its still available 🙂

      Were you able to get it working?

  6. scott

    Do you still have this plugin available?

    I have been searching for a simple symbol search that will display the stocks price and yours is the only one I could find, but I can’t find it anywhere.

    Thanks

  7. Thank you for all of your efforts, they are appreciated!!!
    Works great!

  8. This seems to be the problem.

    /*———————————————————————————–*/
    /* jQuery resize event – Ben Alman (v1.1)
    /*———————————————————————————–*/
    (function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k=”setTimeout”,j=”resize”,d=j+”-special-event”,b=”delay”,f=”throttleWindow”;e[b]=250;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);

    1. d-rock

      Just looked at your site and it looks like you got things working. Is the above code a jQuery plugin – did you remove it? Glad it works for you 🙂

  9. Hi,
    Well, I’ve updated wordpress, easyfancybox, and Jquery. In Mozilla I’m getting no info in popup, in Explorer the same with no chart.
    Thanks,
    M

    1. I mean… same, like… I get stock info but no chart as with the last version of the plugin, but only in Explorer.

      By the way – site makeover looks good!

      1. d-rock

        Thanks, just trying out a new skin.

        Don’t use a jQuery updater. I’ve tested on WordPress version 3.6 and the included JQuery version (1.8) is working.

        1. I removed Jquery updater and now i have the quote info in Mozilla again, but still no chart, IE, Mozilla, Chrome, tested.. Sorry, did Juari have any luck.
          Thanks

          1. What do you think D-Rock, Am I hopeless?

            1. d-rock

              I don’t think you’re hopeless but the only thing I can think is causing the problem is your Theme. I’ve tested with WordPress 3.6, Fancybox for WordPress 3.0.2 and 3 different themes (Twenty Thirteen, Techie, Parament). The plugin works flawlessly with each theme. I suggest switching to the twenty thirteen theme to verify it is a theme issue. If that solves the problem we can go from there.

            2. d-rock

              Also, try uninstalling easy-fancybox and use Fancybox For WordPress. I thought I originally tested with both but it could also be causing a problem.

              1. Ok, It works with 2012. Also, I’m now using Fancy Box but to no avail with the Suburbs theme.

                Thanks,
                M

  10. Thanks for your widget plugin , unfortunately i cannt use it. i installed it but when i am entering a stock symbol then nothing is happening . no box is coming on screen. i installed easy fancybox plugin . please response me !!!

    1. d-rock

      Sorry, your comment was marked as spam. I’ve uploaded a new version of the widget. Please download and report back. Thanks

  11. Also, is there shortcode for placement off sidebars?
    Thanks

    1. d-rock

      The original version did not have a shortcode but the updated version does.

      [widget name=’StockQuoteWidget’ title=’Stock Quote’]

      You will want to adjust your site’s css if you place the widget in the main content area.

  12. d-rock

    Wow, 75 downloads and no comments? What do you think – should I post it to WordPress?

    1. Hi,
      I’m having trouble getting the feed data to appear, please advise. This will be the best option I have found for stock quotes if I can get it to work.
      Thanks
      M

      1. d-rock

        Hi Matt,

        Thanks for the response. I’ve updated the code with improvements that should solve your problem. Download and reinstall the plugin.

        1. Matt

          Thank you!

          1. Matt

            Oh, I’m sorry, but the downloaded file is empty.

            1. d-rock

              I’m not sure whats going on with my site’s download manager but here is the file

              1. Matt

                Excellent, by far the best of the few plugins for this purpose, both in look and function. Only problem is that the chart side of the popup display isn’t loading.
                Thanks,
                Matt

                1. Matt

                  Also, hitting enter instead of submit for results, sends one back to HOME.
                  M

                  1. d-rock

                    I wrapped the function in jQuery and tested again on my site. Reinstall and let me know. Also I added a function to that responds to the Enter key.

                    1. Well, I’m still getting the link back to home, and now no response with submit. See attached page. Thanks

                    2. Any luck? Sorry to be a pain. I’d really like to be able to use this.
                      Thanks

                    3. I would be glad to make a donation if that would help.

                    4. d-rock

                      Sorry, been busy with work. I’ve checked your site and it looks like the Highstock library is loading before jQuery. I’ve updated the code to enqueue highstock after jQuery. Reupload and let me know. A Donation would be great but not required. Thanks

                    5. I will certainly do so, sorry I hadn’t yet. I’ts working again and enter now goes to popup instead of home, but the chart still isn’t showing. Do I need to configure something on my end?

                    6. d-rock

                      I suspect another one of your plugins has changed the handle for jQuery. I added a function to the widget that will print out all the javascript handles. Reinstall and I will check your site.

                    7. d-rock

                      Okay, I believe I have it figured out now. Reinstall again and let me know.

                    8. d-rock

                      Matt, you’re now getting a new error:

                      “NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle]”

                      This error indicates a problem with the highstocks library. I’ve just updated the plugin with the latest version of highcharts. Reinstall and test.

                    9. Sorry, still no charts. I deleted all inactive plugins.

                    10. Disregard last message, I’ll reinstall now.

                    11. d-rock

                      I see that it is still not working. You are now showing the following error:

                      “Uncaught TypeError: Cannot read property ‘width’ of undefined ”

                      According to this post on Stackoverflow it is a problem with the time series. I’ve double checked the code and added a function that will sort the time series. Check again and let me know.

                    12. Ok, more of the same, no chart.

                    13. Oh wait, did it again, didn’t see your most recent. Reinstalling now

                    14. Still the same.

                    15. d-rock

                      Okay, I added some JS to write whatever highcharts is yelling about to the console. Hopefully this will narrow things down. Additionally, you can try to disable all other plugins temporarily to see if it is a conflict.

                    16. Okay, same info in popup, but the wheel has now stopped spinning – no chart. I will deactivate plugins to check for conflicts, but I fear I will lose settings and content. Can you speak to this? I.E., My homepage slider would require a lot of work to reconfigure. I am running WP Stock Ticker Pro as well.

                    17. Ok, I deactivated all plugins except for stockquotes and fancybox and got the same results.

                    18. HEY D-Rock, any new thoughts on the plugin? thanks, peace.

                    19. d-rock

                      Well, I made a few changes but I’m not sure they’re going to help. You can try to install again and see. One other thing I noticed is that you are running jQuery 1.8.3 and my jQuery version is 1.10.2. I’m running the latest version of WordPress; can you update WordPress and then test the plugin? Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *