Creating Javascript tables for stock ticker

Question

I am trying to get a Javascript stock ticker to work, it is going well but my knowledge of Javascript is at a beginner level - but I'm learning!

The current code pulls out live stock data using the google finance API.
It checks to see the stock acronym and prints the full company name
and has some various styling

What I am trying to accomplish is to get the stock data to print out in columns, I cant seem to do this in html and after looking at Javascript tables I think this needs to be written as Javascript.

I need to create 3 columns; 1 for the stock name e.g. (HAULOTTE), one for the stock acroynm eg (PIG) and one for the live stock figures. This will ensure each stock data row keeps parallel with the one above and below it.

Attached is the current jsfiddle:

https://jsfiddle.net/feq3L57p/

var gstock = ["EPA:PIG","LON:AHT","NYSE:URI","NYSE:TEX" ,"NYSE:CAT", "NASDAQ:HEES", "NASDAQ:MNTX", "VIE:PAL" ];
$(document).ready(function () {
       for (var i = 0; i < gstock.length; i++) {
        $.getJSON("https://finance.google.com/finance/info?client=ig&q="+gstock[i]+"&callback=?", function (response) {
            var stockInfo1 = response[0];
            var divContainer =  $('*[data-symbol="' + stockInfo1.t +'"]');

            var stockString1 = '<div class="stockWrapper">' + divContainer.data('title') + ':';
            var stockName1 = stockInfo1.t;             
            stockString1 += '<span class="stockSymbol "> '  +  stockInfo1.t + ' </span>';
            stockString1 += '<span class="stockPrice "> '  +  stockInfo1.l  + '</span>';
            stockString1 += '<span class="stockChange "> '  +  stockInfo1.c + '</span>';
            stockString1 += '</div>';
            divContainer.append(stockString1);

        });
    }
});

Thanks for your help, unfortunately I have tried a similar thing but I cannot get the live data into the html easily? I might be doing something wrong but I believe the only way to do this is to create a javascript table? — user3036451, May 26 '15 at 15:18

score 0 · Answer 1 · answered May 26 '15 at 10:47

0

This is a basic column example that should get you on your way. It emulates what I could understand of your requested layot. General idea: nest divs, set column width, and use float: left for the right container divs.

HTML:

<div class="box">
<div class="floatleft2 " style="padding:5px;">
    <div>Stock Name Info</div>
    <div>Stock Name Info</div>
    <div>Stock Name Info</div>
    <div>Stock Name Info</div>
</div>
<div class="floatleft2" style="padding:5px;">
    <div>Symbol Info</div>
    <div>Symbol Info</div>
    <div>Symbol Info</div>
    <div>Symbol Info</div>
</div>
<div class="floatleft2" style="padding:5px;">
    <div>Figure Info</div>
    <div>Figure Info</div>
    <div>Figure Info</div>
    <div>Figure Info</div>
</div>
</div>

CSS:

.box {width:800px; margin:auto; }
.floatleft2 {float: left; width: 150px; margin:5px; }

answered May 26 '15 at 10:47

Sze-Hung Daniel Tsui

2,282
13
20

Thanks for your help, unfortunately I have tried a similar thing but I cannot get the live data into the html easily? I might be doing something wrong but I believe the only way to do this is to create a javascript table? – user3036451 May 27 '15 at 08:06
I don't think you need to create a table, but you could definitely do it that way. I'm sure some prefer to use tables for this. Getting the live data into the HTML will require more knowledge of jQuery. Don't be afraid to play around a bit with search terms. Googling how to do this stuff is an invaluable skill! I'd start with jQuery's `text` and `html` functions. – Sze-Hung Daniel Tsui May 27 '15 at 13:21
Thanks I will give this a shot. I am trying to find a similar working example so I can learn from it – user3036451 May 27 '15 at 13:35
try writing an `addRow` for a set of info, and model it after what is being done with tables [here](http://stackoverflow.com/questions/3577860/jquery-insert-new-row-into-table-at-a-certain-index). Like by calling `.append` on each containing div in my answer. – Sze-Hung Daniel Tsui May 27 '15 at 13:44

Creating Javascript tables for stock ticker

1 Answers1