SharePoint 2013 Stock price viewer

Hi All

I’m very new to coding and have so far been able to use blogs or tutorials to complete what I needed, however, now I need assistance in changing something that is sort of working.
I’ve been able to get the stock info for our company displayed on a SharePoint 2013 page by using this tutorial: How to Display Stock Information in SharePoint 2013 - Viewpoint - Rightpoint Consulting

I was able to add the CSS to the code file and upload it in a script editor web part and it displays with a transparent background.

However, I need two of these stock items to display next to each other first of all.

Then it would be great if they could each be enclosed in a white background of their own (like two white boxes with the information inside) instead.

.companyTitle { color: #878787; background-color: #FFFFFF; font-size: x-large; font-weight: lighter; line-height: 1.2; font-family: Arial, sans-serif; white-space: nowrap; } .companySymbolDateTime { color: #878787; background-color: #FFFFFF; font-size: medium; font-weight: lighter; line-height: 1.2; font-family: Arial, sans-serif; white-space: nowrap; } .companyStockPrice { color: #FFFFFF; font-size: xx-large; font-weight: lighter; line-height: 1.1; font-family: Arial, sans-serif; white-space: nowrap; margin-right: 10px; } .companyStockUp { color: #3d9400; font-size: x-large; font-weight: lighter; line-height: 1.1; font-family: Arial, sans-serif; white-space: nowrap; } .companyStockDown { color: #dd4b39; font-size: x-large; font-weight: lighter; line-height: 1.1; font-family: Arial, sans-serif; white-space: nowrap; } .companyStockLabels { border-collapse: collapse; border-spacing: 0; color: #FFFFFF; float: left; font-family: Arial, sans-serif; font-size: 18px; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1.4em; list-style-image: none; list-style-position: outside; list-style-type: none; padding-right:10px; } .companyStockValues { border-collapse: collapse; border-spacing: 0; color: #FFFFFF; float: left; font-family: Arial, sans-serif; font-size: 18px; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1.4em; list-style-image: none; list-style-position: outside; list-style-type: none; } .hidden { display: none; }

Welcome to the forums, @Pixidilious.

Is this the tutorial you mean? http://community.rightpoint.com/blogs/viewpoint/archive/2014/02/25/how-to-display-stock-information-in-sharepoint-2013.aspx

Do you have a link to a live site with your code? If not, please post the code you’re using. (You can highlight your code, then use the </> button in the editor window, which will format it. Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.)

How far have you got with this, and where is the problem?

The more exact information you can give, the easier it is to help.

1 Like

Hi Technobear

Thanks for the response!

Yes, that’s the one I mean.

here is the code:


<div class="stockInfo"></div>

<style media="screen" type="text/css">

.companyTitle {
    color: #878787;
background-color: #FFFFFF;
    font-size: x-large;
    font-weight: lighter;
    line-height: 1.2;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

.companySymbolDateTime {
    color: #878787;
background-color: #FFFFFF;
    font-size: medium;
    font-weight: lighter;
    line-height: 1.2;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

.companyStockPrice {
    color: #FFFFFF;
    font-size: xx-large;
    font-weight: lighter;
    line-height: 1.1;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    margin-right: 10px;
}

.companyStockUp {
    color: #3d9400;
    font-size: x-large;
    font-weight: lighter;
    line-height: 1.1;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

.companyStockDown {
    color: #dd4b39;
    font-size: x-large;
    font-weight: lighter;
    line-height: 1.1;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

.companyStockLabels {
    border-collapse: collapse;
    border-spacing: 0;
    color: #FFFFFF;
    float: left;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.4em;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding-right:10px;
}

.companyStockValues {
    border-collapse: collapse;
    border-spacing: 0;
    color: #FFFFFF;
    float: left;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.4em;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;   
}

.hidden {
    display: none;
}
</style>
 <script>
            var url = "https://query.yahooapis.com/v1/public/yql?q=select%20Symbol%2CName%2CDaysLow%2CDaysHigh%2CYearLow%2CYearHigh%2CLastTradePriceOnly%2CLastTradeDate%2CLastTradeTime%2CMarketCapitalization%2CChange_PercentChange%20from%20yahoo.finance.quotes%20where%20symbol%20%3D%20%22AXP%22%09&format=json&diagnostics=true&env=http%3A%2F%2Fdatatables.org%2Falltables.env";
            var arrQuote, stockPrice, daysHigh, daysLow, yearHigh, yearLow, symbol, company, lastTradeDate, lastTradeTime, marketCap, arrStockChangePercent, stockChange, stockChangePercent, stockChangeDirection, stockInfoMarkup;
            $.getJSON(url, function (data) {
                arrQuote = data.query.results.quote;
                stockPrice = parseFloat(Math.round(arrQuote["LastTradePriceOnly"] * 100) / 100).toFixed(2);
                daysHigh = arrQuote["DaysHigh"];
                daysLow = arrQuote["DaysLow"];
                yearHigh = arrQuote["YearHigh"];
                yearLow = arrQuote["YearLow"];
                symbol = arrQuote["Symbol"];
                company = arrQuote["Name"];
                lastTradeDate = arrQuote["LastTradeDate"];
                lastTradeTime = arrQuote["LastTradeTime"];
                marketCap = arrQuote["MarketCapitalization"];
                arrStockChangePercent = arrQuote["Change_PercentChange"].split(" - ");
                stockChange = arrStockChangePercent[0];
                stockChangePercent = arrStockChangePercent[1];
                stockChangeDirection = stockChange.charAt(0);
                if (stockChangeDirection === "+") {
                    stockChangeDirection = "up";
                }
                else {
                    stockChangeDirection = "down";
                }
                stockInfoMarkup = buildMarkup(stockPrice, daysHigh, daysLow,
                                              yearHigh, yearLow, symbol,
                                              company, lastTradeDate, lastTradeTime,
                                              marketCap, stockChange, stockChangePercent, stockChangeDirection);
                $('.stockInfo').append(stockInfoMarkup);
            });

            function buildMarkup(stockPriceVal, daysHighVal, daysLowVal,
                                 yearHighVal, yearLowVal, symbolVal,
                                 companyVal, lastTradeDateVal, lastTradeTimeVal,
                                 marketCapVal, changeVal, changePercentVal, changeDirectionVal) {
                stockInfoMarkup = "<div class=\"companyTitle\"><a href='http://finance.yahoo.com/q?s=" + symbolVal + "' target=\"_blank\">" + companyVal + " (Symbol: " + symbolVal + ")</a></div>";
                stockInfoMarkup += "<div class=\"companySymbolDateTime\">" + lastTradeDateVal + " - " + lastTradeTimeVal + " ET</div>";
                stockInfoMarkup += "<span class=\"companyStockPrice\">" + stockPriceVal + "</span>";
                if (changeDirectionVal === "up") {
                    stockInfoMarkup += "<span class=\"companyStockUp\">" + changeVal + " (" + changePercentVal + ")</span>";
                }
                else {
                    stockInfoMarkup += "<span class=\"companyStockDown\">" + changeVal + " (" + changePercentVal + ")</span>";
                }
                stockInfoMarkup += "<div></div>";
                stockInfoMarkup += "<div>";
                stockInfoMarkup += "<div class=\"companyStockLabels\">";
                stockInfoMarkup += "<div>Days High</div>";
                stockInfoMarkup += "<div>Days Low</div>";
                stockInfoMarkup += "<div>52 Week High</div>";
                stockInfoMarkup += "<div>52 Week Low</div>";
                stockInfoMarkup += "<div>Market Capitalization</div>";
                stockInfoMarkup += "</div>";
                stockInfoMarkup += "<div class=\"companyStockValues\">";
                stockInfoMarkup += "<div>" + daysHighVal + "</div>";
                stockInfoMarkup += "<div>" + daysLowVal + "</div>";
                stockInfoMarkup += "<div>" + yearHighVal + "</div>";
                stockInfoMarkup += "<div>" + yearLowVal + "</div>";
                stockInfoMarkup += "<div>" + marketCapVal + "</div>";
                stockInfoMarkup += "</div>";
                stockInfoMarkup += "</div>";
                return stockInfoMarkup;
            }
        </script>


You can also see images of what I am referring to here: https://social.msdn.microsoft.com/Forums/office/en-US/dd435398-925b-4159-9978-df67bdc75075/sharepoint-2013-stock-price-viewer?forum=sharepointdevelopment

I can’t seem to upload any files…

We really need the full code for your page - HTML and CSS - so we can see what’s going on. You said you need two divs side by side, but you didn’t answer my question about how far you’ve got with this or where your exact problem lies, and without the code to look at, we’re still in the dark.

Ok, I thought because it’s added to a web part that only that area will be affected and the above would be adequate. Since it’s on a SharePoint homepage, can you tell me which masterpage layouts and template codes you need so that I can upload it?
Also, I’ve not gotten anywhere with it yet, I literally have added the above to a web part and now need to add a second one next to it.
please let me know which code to add since I didn’t create it, but have access to SharePoint designer to get it for you.
Thanks again for the help.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.