I am using the tradingview embed with notion. On notion I have different pages for different stocks and i am embedding it there. I am then changing the embed to reflect the particular stock. However, when I am closing the page and coming back to it, it is reverting back to the default stock.
Is there a way in which I can get each embed to reflect a certain stock unless I change it?
I am hosting the code on github and then embedding the github link on notion.
The following is the code:
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_9d064"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">ROHLTD Chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BSE:SBIN",
"interval": "D",
"timezone": "Asia/Kolkata",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"studies": [
{
id: "MAExp#tv-basicstudies",
inputs: {
length: 10
}
},
{
id: "MAExp#tv-basicstudies",
inputs: {
length: 20
}
},
{
id: "MAExp#tv-basicstudies",
inputs: {
length: 50
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 100
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 200
}
}
],
"container_id": "tradingview_9d064"
}
);
</script>
</div>
<!-- TradingView Widget END -->
Related
How to output response of type atom/xml feed (from arxiv call) into Jquery DataTable?
I have the datatable working for a simple json from Ajax call to flask server example.
When i try to do it with the xml from an arxiv api response, i cant seem to get it to display in the datatable (though i can just print the raw xml using <pre lang="xml" > or json).
I also tried to convert to json first via python dictionary, but still couldnt get it formatted into datatable as im unsure how to access the properties properly in the Ajax call when theyre deeper than the first level as in the basic example linked.
The HTML in template:
<table id="arxivtable" class="display" style="width:100%">
<thead>
<tr>
<th>title</th>
<th>id</th>
<th>link</th>
<th>author</th>
<th>published</th>
</tr>
</thead>
</table>
I tried via xml :
$('#arxivtable').DataTable({
"ajax": {
// "url": "static/objects2.txt", // This works for the static file
"url": "/get_arxivpapers", // This now works too thanks to #kthorngren
"dataType": "xml",
"type":"GET",
"dataSrc": "{{name}}",
"contentType":"application/atom+xml"
},
"columns": [
{"data": "title"},
{
"data": "link",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '' + data + '';
}
return data;
}
},
{ "data": "id" },
{ "data": "link" },
{ "data": "author" },
{ "data": "journal" },
{ "data": "published" },
{ "data": "summary" }
]
});
JSON from AJAX call:
{
"feed": {
"#xmlns": "http://www.w3.org/2005/Atom",
"link": {
"#href": "http://arxiv.org/api/query?search_query%3Dall%3Aeinstein%26id_list%3D%26start%3D0%26max_results%3D2",
"#rel": "self",
"#type": "application/atom+xml"
},
"title": {
"#type": "html",
"#text": "ArXiv Query: search_query=all:einstein&id_list=&start=0&max_results=2"
},
"id": "http://arxiv.org/api/vehKAQR+bheXtHwJw3qx/OG/XXw",
"updated": "2022-06-14T00:00:00-04:00",
"opensearch:totalResults": {
"#xmlns:opensearch": "http://a9.com/-/spec/opensearch/1.1/",
"#text": "36970"
},
"opensearch:startIndex": {
"#xmlns:opensearch": "http://a9.com/-/spec/opensearch/1.1/",
"#text": "0"
},
"opensearch:itemsPerPage": {
"#xmlns:opensearch": "http://a9.com/-/spec/opensearch/1.1/",
"#text": "2"
},
"entry": [
{
"id": "http://arxiv.org/abs/1801.05533v2",
"updated": "2018-11-22T14:04:43Z",
"published": "2018-01-17T03:05:51Z",
"title": "Einstein-Weyl structures on almost cosymplectic manifolds",
"summary": "",
"author": {
"name": "Xiaomin Chen"
},
"arxiv:comment": {
"#xmlns:arxiv": "http://arxiv.org/schemas/atom",
"#text": "accepted by Periodica Mathematica Hungarica, 14 pages, no figures"
},
"link": [
{
"#href": "http://arxiv.org/abs/1801.05533v2",
"#rel": "alternate",
"#type": "text/html"
},
{
"#title": "pdf",
"#href": "http://arxiv.org/pdf/1801.05533v2",
"#rel": "related",
"#type": "application/pdf"
}
],
"arxiv:primary_category": {
"#xmlns:arxiv": "http://arxiv.org/schemas/atom",
"#term": "math.DG",
"#scheme": "http://arxiv.org/schemas/atom"
},
"category": [
{
"#term": "math.DG",
"#scheme": "http://arxiv.org/schemas/atom"
},
{
"#term": "53D10, 53D15",
"#scheme": "http://arxiv.org/schemas/atom"
}
]
},
{
"id": "http://arxiv.org/abs/0802.2137v3",
"updated": "2008-04-01T04:36:21Z",
"published": "2008-02-15T04:40:56Z",
"title": "",
"summary": ".",
"author": {
"name": ""
},
"arxiv:comment": {
"#xmlns:arxiv": "http://arxiv.org/schemas/atom",
"#text": "18 pages, added Theorem 5"
},
"link": [
{
"#href": "http://arxiv.org/abs/0802.2137v3",
"#rel": "alternate",
"#type": "text/html"
},
{
"#title": "pdf",
"#href": "http://arxiv.org/pdf/0802.2137v3",
"#rel": "related",
"#type": "application/pdf"
}
],
"arxiv:primary_category": {
"#xmlns:arxiv": "http://arxiv.org/schemas/atom",
"#term": "math.DG",
"#scheme": "http://arxiv.org/schemas/atom"
},
"category": [
{
"#term": "math.DG",
"#scheme": "http://arxiv.org/schemas/atom"
},
{
"#term": "53C30; 53C25",
"#scheme": "http://arxiv.org/schemas/atom"
}
]
}
]
}
}
Or the original atom/xml:
<feed xmlns="http://www.w3.org/2005/Atom">
<link href="http://arxiv.org/api/query?search_query%3Dall%3Aeinstein%26id_list%3D%26start%3D0%26max_results%3D2" rel="self" type="application/atom+xml">
<title type="html">ArXiv Query: search_query=all:einstein&id_list=&start=0&max_results=2</title>
<id>http://arxiv.org/api/vehKAQR+bheXtHwJw3qx/OG/XXw</id>
<updated>2022-06-14T00:00:00-04:00</updated>
<opensearch:totalresults xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/">36970</opensearch:totalresults>
<opensearch:startindex xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/">0</opensearch:startindex>
<opensearch:itemsperpage xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/">2</opensearch:itemsperpage>
<entry>
<id>http://arxiv.org/abs/1801.05533v2</id>
<updated>2018-11-22T14:04:43Z</updated>
<published>2018-01-17T03:05:51Z</published>
<title></title>
<summary>
</summary>
<author>
<name></name>
</author>
<arxiv:comment xmlns:arxiv="http://arxiv.org/schemas/atom">accepted by Periodica Mathematica Hungarica, 14 pages, no figures</arxiv:comment>
<link href="http://arxiv.org/abs/1801.05533v2" rel="alternate" type="text/html">
<link title="pdf" href="http://arxiv.org/pdf/1801.05533v2" rel="related" type="application/pdf">
<arxiv:primary_category xmlns:arxiv="http://arxiv.org/schemas/atom" term="math.DG" scheme="http://arxiv.org/schemas/atom">
<category term="math.DG" scheme="http://arxiv.org/schemas/atom">
<category term="53D10, 53D15" scheme="http://arxiv.org/schemas/atom">
</category></category></arxiv:primary_category></entry>
<entry>
<id>http://arxiv.org/abs/0802.2137v3</id>
<updated>2008-04-01T04:36:21Z</updated>
<published>2008-02-15T04:40:56Z</published>
<title></title>
<summary>
</summary>
<author>
<name></name>
</author>
<arxiv:comment xmlns:arxiv="http://arxiv.org/schemas/atom"></arxiv:comment>
<link href="http://arxiv.org/abs/0802.2137v3" rel="alternate" type="text/html">
<link title="pdf" href="http://arxiv.org/pdf/0802.2137v3" rel="related" type="application/pdf">
<arxiv:primary_category xmlns:arxiv="http://arxiv.org/schemas/atom" term="math.DG" scheme="http://arxiv.org/schemas/atom">
<category term="math.DG" scheme="http://arxiv.org/schemas/atom">
<category term="53C30; 53C25" scheme="http://arxiv.org/schemas/atom">
</category></category></arxiv:primary_category></entry>
</feed>
The End Point:
#app.route('/get_arxivpapers')
def getArxivPapers(name="einstein"):
max_results = 2
searchterm = name.replace("_", " ")
url = 'http://export.arxiv.org/api/query?search_query=all:' + searchterm + '&start=0&' + 'max_results='+ str(max_results)
data = urllib.request.urlopen(url)
# data_dict = xmltodict.parse(data)
# json_data = json.dumps(data_dict)
# print(json_data)
# return jsonify(json_data)
return data.read().decode('utf-8')
I will use your JSON source data instead of the XML, since that is easier to handle in DataTables.
Here is a basic demo, to start with, followed by some explanatory notes:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
</head>
<body>
<div style="margin: 20px;">
<table id="arxivtable" class="display" style="width:100%">
<thead>
<tr>
<th>title</th>
<th>id</th>
<th>link</th>
<th>author</th>
<th>published</th>
<th>summary</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#arxivtable').DataTable({
"ajax": {
url: "YOUR_URL_GOES_HERE",
dataSrc: "feed.entry"
},
"columns": [
{"data": "title"},
{ "data": "id" },
{ "data": "link[].#href" },
{ "data": "author.name" },
{ "data": "published" },
{ "data": "summary" }
]
});
});
</script>
</body>
</html>
Notes
1 - Because you have provided hard-coded HTML column headers, you need to make sure the number of those headers matches the number of columns defined in the DataTable. Alternatively, you can remove the HTML <thead> section and use the DataTables columns.title option.
2 - Your Ajax JSON source data contains an array [ ... ]. DataTables needs to know where this array is located in your JSON response, as part of the Ajax handling option, so that it can iterate over that array. Each element in the array will be used to create a row of HTML table data. The ajax.dataSrc option therefore needs to be set accordingly:
dataSrc: "feed.entry"
Once you have set the above Ajax JSON starting point correctly, then you can use field names for each separate column data value - as shown below.
3 - The author JSON value is actually an object:
"author": {
"name": "Xiaomin Chen"
},
Therefore you need to drill down into that to get the field you want to show in the DataTable:
{ "data": "author.name" },
4 - I removed your column renderer function to keep my initial demo simple, but it can be used to access fields and sub-fields - and concatenate strings and other values as needed (as in your example in the question).
5 - The link JSON value is actually an array of objects. For my basic demo, I just accessed the final entry in that array, and then took the href field:
{ "data": "link[].#href" },
This may not be what you want. You may want to only choose links of a certain type, or choose all links, or something different.
This is where DataTables is limited in what it can handle. It cannot display arbitrary nested JSON values of this type (not surprisingly).
In such cases, you would need to re-structure the JSON, prior to sending it to DataTables - or restructure it in a dataSrc function inside DataTables itself:
"dataSrc": function ( json ) { ...transform and return your JSON here... }
6 - I was not sure what you wanted to display for { "data": "journal" }. I did not see anything called journal in the JSON.
7 - Note that all the source JSON data outside of the feed.entry array is also not available to DataTables. DataTables can only iterate over that outer array. Anything you may also need which is not in that outer array would need to be added to the array, to be accessible to DataTables.
See also Nested object data (arrays) and Nested object data (objects) for more related notes.
Using Vue.js / NativeScript (radDataForm) I want to reorder the display of the fields when using JSON as a source. My current code works, but the display is:
Album Name
Band Name
Owned
Year
Borrowed
Which is not the order in the code.
I'm aware of this:
<df:EntityProperty name="albumName" displayName="Name of Album" index="0" />
but, how do I add index="0"to my JSON object?
Also - I don't know what this does?
str: "",
bool: false
Sample Code:
<template>
<Page class="page">
<ActionBar title="JSON example" class="action-bar" />
<RadDataForm :source="album" />
</Page>
</template>
<script>
import Vue from "nativescript-vue";
import RadDataForm from "nativescript-ui-dataform/vue";
Vue.use(RadDataForm);
export default {
data() {
return {
album: {
bandName: "Beatles",
albumName: "Seargent Peppers",
year: "2017",
owned: true,
borrowed: true
},
str: "",
bool: false
};
}
};
</script>
iPhone Screenshot:
I don't think you could control index from source but you can do that using metadata.
Example
<template>
<Page class="page">
<ActionBar title="JSON example" class="action-bar" />
<RadDataForm :source="album" :metadata="metadata" />
</Page>
</template>
<script>
import Vue from "nativescript-vue";
import RadDataForm from "nativescript-ui-dataform/vue";
Vue.use(RadDataForm);
export default {
data() {
return {
album: {
bandName: "Beatles",
albumName: "Seargent Peppers",
year: "2017",
owned: true,
borrowed: true
},
metadata: {
"isReadOnly": false,
"propertyAnnotations":
[
{
"name": "bandName",
"index": 0
},
{
"name": "albumName",
"index": 1
},
{
"name": "year",
"index": 2
},
{
"name": "owned",
"index": 4
},
{
"name": "myRating",
"index": 3
}
]
}
};
}
};
</script>
I want to be able to represent a bar chart by using only two columns in my .csv file, I have written a temporary solution by writing manually the values of the columns.. But if I have more columns, or more values in every column it may become impossible to write it manually. I'd love to get some help on how to transform my code to read the columns from the .csv file, so far I've been able to get a single bar chart and wasn't able to further edit the code for using more columns to get a multiple bar chart. Also, after finding the code for multiple bar charts - it traversed on all the columns on the .csv file and it showed all the columns in the chart, then when I tried editing the for loop for just the first two columns, and it didn't work, so I decided to write it manually for now.
Question: How to read .csv columns for bar chart representation (just two columns) instead of writing the column's values manually as I did.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: ""
},
axisX:{
title: "car type"},
axisY:{
title:"$",
interval: 5000,
},
data: [
{
type: "column",
yValueFormatString: "#.####",
showInLegend: true,
name: "DealerCost",
dataPoints: [
{ "label": "Regular", y: 27446.14286 },
{ "label": "Sports.car", y: 48473.16327 },
{ "label": "SUV", y: 31625.35},
{ "label": "Wagon", y: 26645.63333 },
{ "label": "Minivan", y: 25355.5 },
{ "label": "Pickup", y: 22616.75},
]
},
{
type: "column",
showInLegend: true,
name: "RetailPrice",
yValueFormatString: "#.####",
dataPoints: [
{ "label": "Regular", y: 29814.3591836735 },
{ "label": "Sports.car", y: 53387.06122 },
{ "label": "SUV", y: 34790.25},
{ "label": "Wagon", y: 28840.53333 },
{ "label": "Minivan", y: 27796.5 },
{ "label": "Pickup", y: 24941.375},
]
},
]
});
chart.render();
}
</script>
<div id="chartContainer" style="height: 100%; width: 50%;">
</body>
</html>
I am building a stock picking application. I found this chart template that is really great, it comes with a html script:
<!-- TradingView Widget BEGIN -->
<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>
<!-- TradingView Widget END -->
My question is how would I put it inside of a react component on a react-router route? I just left the script tags in the html and tried calling the constructor inside of a component but it is being rendered on all pages as canvas instead of the one the router points to.
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;
I was using polymer example and they used core-ajax to call the api.I want to display text from the openweathermap api.When i call the api it displays no data.I'm not able to display any data and when i placed console.log(this.post) in the post-list element it gives me undefined.I'm practically a noob when it comes to polymer.
Below is the Api Calling Method
<polymer-element name="post-service" attributes="posts">
<template>
<style>
:host {
display: none;
}
</style>
<core-ajax id="ajax"
auto
url="http://api.openweathermap.org/data/2.5/weather?q=hyderabad"
on-core-response="{{postsLoaded}}"
handleAs="json">
</core-ajax>
</template>
<script>
Polymer('post-service', {
created: function() {
this.posts = [];
},
postsLoaded: function() {
// Make a copy of the loaded data
this.posts = this.$.ajax.response;
},
/**
* Update the service with the current favorite value.
* (Two-way data binding updates the favorite value
* stored locally.) If this was a real service, this
* method would do something useful.
*
* #method setFavorite
* #param uid {Number} Unique ID for post.
* #param isFavorite {Boolean} True if the user marked this post as a favorite.
*/
setFavorite: function(uid, isFavorite) {
// no service backend, just log the change
console.log('Favorite changed: ' + uid + ", now: " + isFavorite);
}
});
</script>
</polymer-element>
This is element is used to display
<polymer-element name="post-list" attributes="show">
<template>
<style>
:host {
display: block;
width: 100%;
}
post-card {
margin-bottom: 30px;
}
</style>
<post-service id="service" posts="{{posts}}">
</post-service>
<div layout vertical center>
<template>
<post-card>
<h2>{{post.weather.main}}</h2>
<p>{{post.weather.description}}</p>
</post-card>
</template>
</div>
</template>
<script>
Polymer({});
console.log(this.post);
</script>
</polymer-element>
Example json
[
{
"uid": 1,
"text" : "Have you heard about the Web Components revolution?",
"username" : "Eric",
"avatar" : "../images/avatar-01.svg",
"favorite": false
},
{
"uid": 2,
"text" : "Loving this Polymer thing.",
"username" : "Rob",
"avatar" : "../images/avatar-02.svg",
"favorite": false
}
]
My api response(json)
{
"coord": {
"lon": 78.47,
"lat": 17.38
},
"weather": [
{
"id": 802,
"main": "Clouds",
"description": "scattered clouds",
"icon": "03d"
}
],
"base": "cmc stations",
"main": {
"temp": 303.15,
"pressure": 1010,
"humidity": 62,
"temp_min": 303.15,
"temp_max": 303.15
},
"wind": {
"speed": 7.7,
"deg": 280
},
"clouds": {
"all": 40
},
"dt": 1436677800,
"sys": {
"type": 1,
"id": 7830,
"message": 0.0124,
"country": "IN",
"sunrise": 1436660330,
"sunset": 1436707470
},
"id": 1269843,
"name": "Hyderabad",
"cod": 200
}
The core-ajax element sends an event when the data are received. To use them you have to manipulate the fired event.
postsLoaded: function(event, detail) {
// Event contains lot of informations
console.log(event);
// Detail would be the received data
console.log(detail);
// Make a copy of the loaded data
this.posts = detail; // or this.posts = event.detail;
}
It would be easier to see what happens if you add a listener on the posts attributes in your element post-list. See the doc section Observing properties.
<script>
Polymer({
postsChanged: function(oldValue, newValue) {
console.log(newValue);
}
});
</script>
Moreover, I think you have a typo in your code. In the template you are using post and no posts :
<template>
<post-card>
<h2>{{post.weather.main}}</h2>
<p>{{post.weather.description}}</p>
</post-card>
</template>
Finally, if you are starting with Polymer, I suggest you to start with the version 1.0.