I am creating a stock picker. I found this chart template, which is really wonderful, it comes with an html script:
<div id="tv-medium-widget-b3840"></div>
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script type="text/javascript">
new TradingView.Widget({
"container_id": "tv-medium-widget-b3840",
"symbols": [
[
"Apple",
"AAPL "
],
[
"Google",
"GOOGL"
],
[
"Yahoo!",
"YHOO"
]
],
"gridLineColor": "#e9e9ea",
"fontColor": "#83888D",
"underLineColor": "#dbeffb",
"trendLineColor": "#4bafe9",
"width": 1000,
"height": 350,
"tradeItWidget": false,
"locale": "en"
});
</script>
My question is, how can I put it inside the react component on the route of the react router? I just left the script tags in html and tried to call the constructor inside the component, but it appears on all pages as a canvas, not the one pointed to by the router.
const TradingViews = React.createClass({
componentDidMount:
new TradingView.widget({
"width": 980,
"height": 610,
"symbol": "QUANDL:YAHOO/FUND_FUSEX",
"interval": "M",
"timezone": "Etc/UTC",
"theme": "White",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"hideideas": true,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650"
}),
render:function(){
return(
null
)
}
});
export default TradingViews;