I am setting up a website displaying chart using tradingview chart library, and managed to setup chart to display from data feed. However once chart is loaded, the chart is not auto updating or refreshing with newer data without reloading webpage. How do I setup the chart to update automatically (eg. interval 1m, 5m etc)? This is the code I used:
function initOnReady() {
var widget = window.tvWidget = new TradingView.widget({
// debug: true, // uncomment this line to see Library errors and warnings in the
fullscreen: true,
symbol: 'AAPL',
interval: '1D',
container_id: "tv_chart_container",
// BEWARE: no trailing slash is expected in feed URL
datafeed: new Datafeeds.UDFCompatibleDatafeed("<data feed url>"),
library_path: "charting_library/",
locale: getParameterByName('lang') || "en",
disabled_features: ["use_localstorage_for_settings"],
enabled_features: ["study_templates"],
charts_storage_url: 'https://saveload.tradingview.com',
charts_storage_url: 'http://{$smarty.server.HTTP_HOST}',
charts_storage_api_version: "1.1",
client_id: 'tradingview.com',
user_id: 'public_user_id',
});
};
Thanks in advance and appreciate for helps.
create file named datafeed like so:
export default {
onReady: (callback) => {
console.log("[onReady]: Method call");
callback({});
},
searchSymbols: (userInput, exchange, symbolType, onResultReadyCallback) => {
console.log("[searchSymbols]: Method call");
},
resolveSymbol: (
symbolName,
onSymbolResolvedCallback,
onResolveErrorCallback
) => {
console.log("[resolveSymbol]: Method call", symbolName);
},
getBars: async (
symbolInfo,
resolution,
from,
to,
onHistoryCallback,
onErrorCallback,
firstDataRequest
) => {
},
subscribeBars: (
symbolInfo,
resolution,
onRealtimeCallback,
subscribeUID,
onResetCacheNeededCallback
) => {
console.log(
"[subscribeBars]: Method call with subscribeUID:",
subscribeUID
);
},
unsubscribeBars: (subscriberUID) => {
console.log(
"[unsubscribeBars]: Method call with subscriberUID:",
subscriberUID
);
},
};
and replace it with datafeeds:
import DATAFEED from './datafeed';
function initOnReady() {
var widget = window.tvWidget = new TradingView.widget({
// debug: true, // uncomment this line to see Library errors and warnings in the
fullscreen: true,
symbol: 'AAPL',
interval: '1D',
container_id: "tv_chart_container",
// BEWARE: no trailing slash is expected in feed URL
datafeed: DATAFEED, // ---> replace here
library_path: "charting_library/",
locale: getParameterByName('lang') || "en",
disabled_features: ["use_localstorage_for_settings"],
enabled_features: ["study_templates"],
charts_storage_url: 'https://saveload.tradingview.com',
charts_storage_url: 'http://{$smarty.server.HTTP_HOST}',
charts_storage_api_version: "1.1",
client_id: 'tradingview.com',
user_id: 'public_user_id',
});
};
Notice : Trading view itself manage most actions base on what it needs.
for example
if you want to drag the candle chart, trading view calculate the view port and find out how many candle it need's to show then call getBars method in datafeeds.js.
for see examples:
https://github.com/tradingview/charting-library-examples
Related
I am trying to render tradingview chart using tradingview charting library and using bitquery api for datafeed.
Chart is being displayed but there is no data on the chart.
I opened the inspect element and noticed this:
More specifically the part about RangeError: Invalid time value I am assuming that's what's causing the chart to not load any candlestick data?
This is the section of the code in datafeed.js:
// This method is used by the charting library to get historical data for the symbol.
getBars: async(symbolInfo, resolution, from, to, onHistoryCallback, onErrorCallback, first) =>{
try{
if (resolution==='1D') {
resolution = 1440;
}
const response2 = await axios.post(Bitquery.endpoint, {
query: Bitquery.GET_COIN_BARS,
variables: {
"from": new Date(from).toISOString(),
"to": new Date(to).toISOString(),
"interval": Number(resolution),
"tokenAddress": symbolInfo.ticker
},
mode: 'cors',
headers: {
"Content-Type": "application/json",
"X-API-KEY": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
})
const bars = response2.data.data.ethereum.dexTrades.map(el => ({
time: new Date(el.timeInterval.minute).getTime(), // date string in api response
low: el.low,
high: el.high,
open: Number(el.open),
close: Number(el.close),
volume: el.volume
}))
if (bars.length){
onHistoryCallback(bars, {noData: false});
}else{
onHistoryCallback(bars, {noData: true});
}
} catch(err){
console.log({err})
// onErrorCallback(err)
}
I am fairly new with tradingview charting library and JS, so I need suggestions to fix this.
I managed to trigger a job with:
const config = {
languageCode: 'en-US',
enableSpeakerDiarization: true,
audioChannelCount: 2,
enableSeparateRecognitionPerChannel: true,
useEnhanced: true,
profanityFilter: false,
enableAutomaticPunctuation: true,
};
const audio = {
uri: `gs://${filePath}`
}
const requestObj = {
config: config,
audio: audio
}
return speechClient.longRunningRecognize(requestObj)
I get back an object with a name. I want to use that with https://cloud.google.com/speech-to-text/docs/reference/rest/v1/LongRunningRecognizeMetadata (via the node.js package) to get the current status.
How do I do it?
return speechClient.longrunning.Operation()
Seems not to exist
Looks like you can do it with:
return speechClient.operationsClient.getOperation({ name: googleName })
This is not super well documented
I'm building some e2e test for my Vuejs application.
The framework I'm using is Nightwatch along with the http library Axios (and the relative plugin for mocking: Axios-mock-adapter) and my current process is to have a file that intercepts all the api, and a file that return the reponse object:
So for example, if I want to mock /api/sources:
mock.onGet(/my.url\/api\/sources/).reply(() =>
[200, ResponseObject.getSources],
);
And in the reponse object file I have:
const getSources = {
files: [
{
id: 'bogus',
fileName: 'bogus',
fileUrl: 'http://bogus.com/1',
size: 400,
uploadedTime: '2018-05-24 10:56:27',
sourceContact: 'boguscontact',
isFolder: false,
}, {
id: 'bogus2',
fileName: 'bogus 2',
fileUrl: 'http://bogus.com/2',
size: 500,
uploadedTime: '2018-05-24 10:56:27',
sourceContact: 'boguscontact',
isFolder: false,
}, {
id: 'bogus3',
fileName: 'bogus 3',
fileUrl: 'http://bogus.com/3',
size: 600,
uploadedTime: '2018-05-24 10:56:27',
sourceContact: 'boguscontact',
isFolder: false,
},
],
};
With this set up I have a very annoying problem:
Sometimes I have to return different object through the same api call, for example, if the file has a property ready and I want to test the user-flow to prepare a file to be ready I need to return the file with ready: false the first time, then I add some parameters, and then I have to return the file with ready: true. How can I do that?
Another example would be getting a single source file. I have the same api call api/source/:sourceId but when the source has ready: true it needs to have more parameters compare if the source has ready: false, but I don't know how to simulate that behaviour without a backend.
Right now the only thing I can do is to have a different response based on the query parameters:
mock.onGet(/dmd\.mocked\/api\/files/).reply((config) => {
if (typeof config.params !== 'undefined') {
switch (config.params.status) {
case 'queued':
return [200, ResponseObject.queuedFilesList];
case 'processing':
return [200, ResponseObject.processingFilesList];
default:
return [506];
}
} else {
return [200, ResponseObject.queuedFilesList];
}
});
but this approach works only if I make the call with different parameters. If I make the call without any parameters I don't know how to diversify the response.
I've been trying to utilize the Trello API via JSFiddle and haven't been able to get it to work (I have very limited JS/JSON knowledge). I need to create a card under a specific list, using the API.
function PostStuff()
{
$(document).ready(function(){
Trello.authorize({
interactive: true,
type: "popup",
expiration: "never",
name: "surveyrequest",
persist: "true",
success: function() { onAuthorizeSuccessful(); },
error: function() { onFailedAuthorization(); },
scope: { read: true, write: true}
});
function onAuthorizeSuccessful() {
Trello.post("cards", { name: "Card created for test", desc: "this is a test", idList: "........", due: null, urlSource: null});
}
});
}
I have JQuery and the Trello API included. I blanked out the idList in the code for security purposes. I confirmed that the code does execute the onAuthorizeSuccessful() function.
How can I modify this to create a Trello card?
function Auth() {
Trello.authorize({
type: 'popup',
name: 'your app name',
scope: {
read: true,
write: true },
expiration: '30days',
success: authenticationSuccess,
error: authenticationFailure
});
var authenticationSuccess = function(data){ /*your function stuff*/};
var authenticationFailure = function(data){ /*your function stuff*/};
}
this code works for me. i get function Auth() triggered on button click.
Also, you might have some issues with tokens which are expired, so Trello.deauthorize(); could be used on create new card failure function (it all depends on create new card error message).
regarding the create a new card...
var newCard =
{name: jQuery('input#tc_title').val(),
desc: jQuery('textarea#tc_desc').val(),
pos: "top",
idList: trello_list_id_var
};
Trello.post('/cards/', newCard, success, error);
var success = function(data){ /*..............*/}
var error= function(data){ /*..............*/}
in success/error functions you are able to check the error data
EDIT:
also i think that Trello.post("cards" ... should be replaced with Trello.post("/cards/" ... that might be the problem...
I've a issue on the integration of the Aviary Feather.
In my javascript I need to use Feathers like this:
// Aviary init
var featherProductEditor = new Aviary.Feather({
apiKey: 'myapykey',
apiVersion: 3,
theme: 'dark',
tools: 'all',
appendTo: '',
onSave: function(imageID, newURL) {
// Do things for featherProductEditor
console.log('featherProductEditor');
// Close the editor
featherProductEditor.close();
}
});
// Aviary init
var featherContentBlockEditor = new Aviary.Feather({
apiKey: 'myapykey',
apiVersion: 3,
theme: 'light',
tools: 'all',
appendTo: '',
onSave: function(imageID, newURL) {
// Do things for featherContentBlockEditor
console.log('featherContentBlockEditor');
// Close the editor
featherContentBlockEditor.close();
}
});
Then I call the two Feather
featherProductEditor.launch({ ....
and
featherContentBlockEditor.launch({ ....
but the only "onSave*:" callback called is the second one of the "featherContentBlockEditor" var
Why? How can I solve this?
For your first question, why only the second onSave is called ?
Internally, the Aviary Web SDK stores the feather config in AV.launchData, and AV is an alias of the Aviary global variable. This is the code snippet from the Aviary.Feather function:
AV.Feather = function (config) {
...
AV.launchData = AV.util.extend(AV.baseConfig, config);
...
}
So, that means featherContentBlockEditor's configuration will override the featherProductEditor's configuration.
You can verify this by adding AV.launchData.onSave() after the creation of each feather.
For your second question, How can I solve this ?
No, you can't without hacking into the SDK. This is how Aviary Web SDK works, only define one instance of Aviary.Feather per page.
How can you solve it?
You can use imageID to identify which instance of Aviary produced the onSave event.
onSave: function(imageID, newURL) {
if(imageID === 'productImg') {
// Do things for featherFeatureEditor
console.log('featherProductEditor');
} else {
// Do things for featherContentBlockEditor
console.log('featherContentBlockEditor');
}
// Close the editor
featherContentBlockEditor.close();
}
Use image:'productImg' for the launch configs for your product image.
You can only have one instance of the Aviary editor on a given page, but you can reuse it by calling:
editor.close(true); // passing true forces an immediate close without triggering shutdown animation
editor.launch({ image: new_id, url: new_url });