Stock widget: Ticker, Chart, Table, etc

Community Projects
1

Here’s a good place to get a stock widget and build your custom ticker, table, plot or whatever then embed the HTML into custom tile. Free Stock Widgets — Financial Web Components — TradingView

An example of the scrolling Ticker I made:

image
image875×159 39.4 KB

And in the code if you get rid of this line or one similar to this, mine was line 4, you can drop the annoying text underneath the chart.
<…div class=“tradingview-widget-copyright”… href=“https://www.tradingview.com” rel=“noopener” target=“_blank”>Ticker Tape by TradingView</div…>"

4 Likes
2

@kampto, thanks for sharing! :+1:

Edit: I just realized this is an HTML tile, not a URL tile, so ignore the comment about the URL wiki. :stuck_out_tongue:

You can also edit the following community Wiki post to include this so it is easier to be discovered by other users.

[Wiki] Good Sites for Custom Tile URL

6

I know this is an older thread, but I use TradingView - however, when loading the html to a custom tile, it is keeping the default symbols vs the custom selection.
Any thoughts or ideas?

'

`
7

I’m not familiar with TradingView. Can you share the HTML or URL that you are trying to use?

8

Thanks Josh, I tried to edit the original post with the html and it keeps just adding the link instead of the code

9

Make sure you mark the HTML / JavaScript as code so it is formatted properly and not stripped from your reply:

1 Like
11

Appreciate the KB link!
Below is the html

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async>
  {
  "colorTheme": "light",
  "dateRange": "12M",
  "showChart": true,
  "locale": "en",
  "width": "100%",
  "height": "100%",
  "largeChartUrl": "",
  "isTransparent": true,
  "showSymbolLogo": false,
  "showFloatingTooltip": false,
  "plotLineColorGrowing": "rgba(41, 98, 255, 1)",
  "plotLineColorFalling": "rgba(41, 98, 255, 1)",
  "gridLineColor": "rgba(240, 243, 250, 1)",
  "scaleFontColor": "rgba(106, 109, 120, 1)",
  "belowLineFillColorGrowing": "rgba(41, 98, 255, 0.12)",
  "belowLineFillColorFalling": "rgba(41, 98, 255, 0.12)",
  "belowLineFillColorGrowingBottom": "rgba(41, 98, 255, 0)",
  "belowLineFillColorFallingBottom": "rgba(41, 98, 255, 0)",
  "symbolActiveColor": "rgba(41, 98, 255, 0.12)",
  "tabs": [
    {
      "title": "Indices",
      "symbols": [
        {
          "s": "FOREXCOM:SPXUSD",
          "d": "S&P 500"
        },
        {
          "s": "FOREXCOM:DJI",
          "d": "Dow 30"
        },
        {
          "s": "NYSE:BODY",
          "d": "Body"
        },
        {
          "s": "COINBASE:BTCUSD",
          "d": "BitCoin"
        }
      ],
      "originalTitle": "Indices"
    },
    {
      "title": "Futures",
      "symbols": [
        {
          "s": "CME_MINI:ES1!",
          "d": "S&P 500"
        },
        {
          "s": "COMEX:GC1!",
          "d": "Gold"
        },
        {
          "s": "NYMEX:CL1!",
          "d": "WTI Crude Oil"
        },
        {
          "s": "CBOT:ZC1!",
          "d": "Corn"
        }
      ],
      "originalTitle": "Futures"
    },
    {
      "title": "Bonds",
      "symbols": [
        {
          "s": "CBOT:ZB1!",
          "d": "T-Bond"
        },
        {
          "s": "CBOT:UB1!",
          "d": "Ultra T-Bond"
        }
      ],
      "originalTitle": "Bonds"
    },
    {
      "title": "Forex",
      "symbols": [
        {
          "s": "FX:EURUSD",
          "d": "EUR to USD"
        },
        {
          "s": "FX:GBPUSD",
          "d": "GBP to USD"
        },
        {
          "s": "FX:USDJPY",
          "d": "USD to JPY"
        },
        {
          "s": "FX:USDCHF",
          "d": "USD to CHF"
        },
        {
          "s": "FX:AUDUSD",
          "d": "AUD to USD"
        },
        {
          "s": "FX:USDCAD",
          "d": "USD to CAD"
        }
      ],
      "originalTitle": "Forex"
    }
  ]
}
  </script>
</div>
<!-- TradingView Widget END -->
12

I did some brief debugging of the TradingView Widget code and it looks like their generated embed code uses a non-standard / unique approach that fails when embedded within a Custom Tile. I’ve pushed a hotfix to beta which should resolve this.

You can either PM me for beta access or if you clear the cache on your browser it should pull in the new Custom Tile rendering option directly even in production.

13

Josh, you guys are absolutely amazing!
Not only from a product standpoint, but involvement and ridiculously quick attention to resolutions!

Thank you, issue is resolved and widget customizations are showing!

3 Likes
14

Ha! Its working again, it broke like a year ago. :grinning:

1 Like